оптимізація зображень

1. Вимоги до оптимізації зображень
2. якість зображень
3. Розмір і вага зображень
4. Інструменти оптимізації зображень вручну
5. Інструменти автоматичної оптимізації зображень онлайн
6. Модулі WordPress для стиснення
7. SEO-оптимізація картинок на сторінці
8. Назва файлу картинки
9. Title картинки
10. Alt зображення
11. Мікророзмітки для зображень
12. висновки

При розміщенні зображень на сайт не варто забувати про їх оптимізації, яка сприяє просуванню сайту. Якщо пошуковим роботам грамотно підказати, що знаходиться на картинці, то після індексації зображення з'являться в пошуку. А це додатковий трафік на ваш сайт.

Чи не оптимізовані зображення на сайті приведуть до неймовірно низької швидкості завантаження і пропускної здатності. Зображення можуть займати багато місця на диску, і велика частина з них може виявитися не потрібною.

Вимоги до оптимізації зображень

Ваша мета по оптимізації зображень на сайті - зменшити розмір файлу без зниження якості зображення. Ідеального способу для оптимізації немає, але замість цього ви можете знайти баланс.

Google може індексувати типи зображень в форматах BMP, GIF, JPEG, PNG і WebP, а також SVG.

Рекомендовані формати картинок:

1. JPEG - використовуйте цей формат для фото;
2. PNG - для графіки, простіше кажучи, для всього, що намалював дизайнер;
3. SVG - для векторних зображень.

З'явилися і нові формати, такі, як WebP і JPEG-XR. Їх перевага в тому, що вони дійсно менше важать, але, на жаль, поки не всі браузери підтримують ці формати. Наприклад, JPEG-XR підтримує тільки IE, а WebP - Chrome, Opera, Android. У зв'язку з цим я не розглядаю їх. Але вибір за вами

Для індексування картинок в Яндексі варто вибрати такі формати: JPEG, GIF і PNG. Крім правильного вибору формату, варто врахувати, що зображення, які завантажуються на сторінці за допомогою скрипта, Яндексом не індексуються.

якість зображень

При оптимізації картинок для Яндекс і Google, слід знайти оптимальне рішення між розміром і якістю графіки, оскільки, перш за все контент призначений для користувача. Слідкуйте за тим, щоб графіка була чіткою і візуально привабливою.

Неякісним зображенням також вважається картинка, яка не відповідає своєму опису або розташована близько незв'язаного за змістом тексту.

Розмір і вага зображень

Розмір зображення впливає на швидкість завантаження сторінки , А та, в свою чергу, на ранжування сторінки. Якщо ви використовуєте багато картинок на сторінці, це може значно сповільнити її завантаження. Існує безліч інструментів для стиснення файлу без втрати якості. Використовуючи їх, будьте обережні - звіряйте оригінальну картинку і стислу.

Зображення потрібно створювати в розмірі, в якому вони будуть представлені на сайті.

Браузеру буде легше сканувати контент сторінок, якщо в CSS прописати ширину і висоту зображення. Для дисплеїв з ретиной додавайте зображення в розмірі 2x і налаштуйте відображення різних розмірів одного і того ж зображення для різних екранів. Інакше для користувачів, які відкриють зображення на дисплеї з ретиной, все картинки будуть відображені з візуальної втратою якості.

Інструменти оптимізації зображень вручну

Десктопні інструменти (встановлені на вашому локальному комп'ютері) пропонують вам більше налаштувань управління оптимізацією. Якщо ви, наприклад, працюєте в редакторі зображень на кшталт Photoshop, тоді вам може підійти більше цей варіант.

Найбільш популярні декстопов інструменти:

• Adobe Photoshop - Photoshop має свій власний строєний інструмент зі стиснення зображень, який готує їх до публікації в інтернеті.
• Gimp - безкоштовна альтернатива Photoshop, має круту криву навченості, але теж має вбудовану оптимізацію.
• Affinity Photo - це найдешевша альтернатива Photoshop, з вбудованою функцією оптимізації.
• Paint.NET - редактор картинок для користувачів Windows, впевнена альтернатива Photoshop і має стиснення зображень.

Інструменти, перераховані вище, зажадають навчання, але вони дозволяють вам знайти настройки оптимізації найбільш підходящі саме для вас.

Інструменти автоматичної оптимізації зображень онлайн

Якщо ви віддаєте перевагу більш спрощений підхід, тоді ви можете використовувати онлайн інструменти, які автоматично оптимізують ваші фото.

Ці інструменти прекрасні, якщо ви не хочете витрачати час на вивчення подробиці роботи редакторів.

Деякі найпоширеніші редактори - JPEGmimi і TinyPNG .

При цьому все, що вам потрібно зробити, це завантажити свої фотографії, інструмент запуститься, і ви скачаєте оптимізовані фотографії.

Модулі WordPress для стиснення

У WordPress є плагіни для вирішення різних завдань.

Наступні доданки будуть оптимізувати ваші зображення при завантаженні і навіть оптимізувати будь-які зображення вже в медіа-бібліотеці:

• Imagify Image Optimizer - плагін пропонує кілька рівнів стиску, зміна розміру зображення, відновлення зображень і багато іншого.
• ShortPixel Image Optimizer - безкоштовний плагін дозволяє вам стискати до 100 зображень на місяць і обробляти кілька різних форматів зображень. Крім того, він має вбудовану функцію відновлення і групову оптимізацію.
• WP Smush - плагін буде оптимізувати зображення при їх завантаженні на ваш сайт, а також оптимізувати існуючу медіа-бібліотеку. Це зменшить розмір ваших зображень, не впливаючи на якість.
• Optimus Image Optimizer - легкий плагін оптимізує ваші зображення за допомогою стиснення без втрати загальної якості, просто за рахунок зменшення розміру файлу.
• Compress JPEG & PNG images - плагін від сайту TinyPNG.com. Автоматично оптимізує нові зображення на сайті. Є безкоштовний ліміт.

SEO-оптимізація картинок на сторінці

унікальність

Для отримання більш значущого результату при оптимізації зображень, створюйте не тільки якісні картинки, а й унікальні. Суть в тому, що пошукові системи цінують оригінальний і нескопірованний контент, щоб показувати користувачам більш різноманітні результати у видачі.

Яндекс, наприклад, здатний побачити, звідки було вкрадено картинка, які копії були створені, де саме вони були розміщені і багато інших Якщо ви не впевнені в унікальності контенту на вашому сайті, це легко перевірити c допомогою сервісу Tineye .

Назва файлу картинки

Щоб передати пошуковим системам зміст картинки, давайте короткий відповідне опис в назві файлу із зображенням.

Важливо використовувати в імені файлу латинські букви і дефіс замість пробілів. Уникайте таких назв jzbdfjklJ_KSD5667.jpg, а пишіть словами описуючи - televizor-lg.jpg.

Зверніть увагу, що ключові слова повинні бути максимально релевантними і описують суть картинки.

Title картинки

Важливий атрибут при оптимізації. У Title розміщується текст, який буде відображатися при наведенні курсору на зображення.

Правильний тайтл виглядає так:

title = "Ноутбук Acer 7741G вид зверху»

Alt зображення

Alt - це альтернативне опис вашого файлу. Коли з якихось причин зображення не показиваетсяна сайті, то користувач бачить текст, розміщеному в тезі Alt. Якщо тексту немає, і тег відсутній, людина, швидше за все, нічого не побачить. Іноді це може бути причиною різних проблем: пошукові роботи проїндексируют порожню сторінку, користувачі побачать не той контент і багато іншого. Таким чином, це може негативним чином вплинути на ранжування сайту в пошукових системах.

Важливе питання в використанні alt і title - чи можна робити їх однаковими? Так, можна, особливо якщо у вас багато однотипних зображень. Таке дублювання в будь-якому випадку буде виглядати краще, ніж повна відсутність будь-якого з тегів.

Приклад хорошого alt:

alt = "Недорогий ноутбук Acer 7741G за 16000 рублів»

Мікророзмітки для зображень

Додайте мікродані ImageObject. Додаючи спеціальні теги до зображень, ви допомагаєте пошуковим системам розрізняти контент і відображати його підходящим і корисним чином.

Приклад впровадження мікророзмітки http://schema.org/ImageObject

висновки

Для ефективної оптимізації зображень слід застосовувати всі вищеописані методи в комплексі:

1. Зберігайте файли з зображеннями в правильному форматі, які індексують пошукові системи.
2. Додавайте на сайт унікальні і корисні зображення.
3. Використовуйте інструменти для стиснення зображень.
4. Оптимізуйте картинки за допомогою тегів title і alt.
5. Впровадити мікродані для зображень.
6. Завантажуйте картинки, пов'язані за змістом з текстом.
7. Не забувайте, що зображення насамперед створені для користувача.

При створенні та оптимізації картинок керуйтеся головним принципом: якість і цінність контенту - ось що важливо для пошукових систем. Успіхів в оптимізації!