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

Чому це важливо

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

HTML-синтаксис для оптимізації зображень

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

  • alt – альтернативний текст для опису зображення;
  • title – спливаюча підказка (підпис);
  • width – ширина зображення;
  • height – висота зображення.

На мал.1 представлений фрагмент HTML коду із заповненими атрибутами. Варто відзначити, що згідно з рекомендаціями пошукових систем, у випадку, коли зображення є посиланням, прийнятніше title приписувати до посилання.

ris.1

Мал.1 - Приклад заповнення атрибутів тега a - title; b - width & height; c - alt

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

Формування текстів для атрибутів тега

Альтернативний текст для атрибутів повинен бути коротким (менше 150-ти символів з урахуванням пробілів) і інформативним. Пошуковим системам необхідний текстовий еквівалент зображення. Необхідно надати їм інформацію про тематичний зміст картинки з включенням релевантних ключових слів. Для цих цілей можна задіяти низькочастотні запити, що збільшить шанси потрапляння зображення в TOP пошуку по картинках. Найбільш значимі запити краще вказувати на початку опису. Разом з тим, не слід зловживати кількістю ключових слів в описі, щоб не перевантажувати ними зображення. Такі дії можуть мати негативні наслідки для просування.

Не потрібно використовувати символи, які не мають пошукової актуальності, наприклад © або (с). Для кожного зображення описовий текст повинен бути унікальним, а графічний об'єкт за змістом повинен відповідати вмісту. Важливий також релевантний контекст для зображень. Особливо - семантична складова навколишнього тексту (приблизно 15 слів до і після зображення). Такий зв'язок дозволяє пошуковим системам визначити «якість» зображення. Почасти дані рекомендації сформульовані в документах MSDN (MSDN - бібліотека для технічних фахівців з розробки програмного забезпечення).

Установка значень для атрибутів width і height

Заповнення значень ширини (width) і висоти (height) зображення (див. мал.1) сприяють прискоренню його завантаження. Так, якщо браузеру недоступні ці дані, він повинен їх спочатку визначити і тільки потім завантажити об'єкт і іншу частину коду сторінки. Коли ж параметри прописані, браузер може заздалегідь виділити місце під малюнок, одночасно завантажуючи решту сторінки. Крім того, ці правила справедливі і для таблиць. Сервіси пошуку картинок (див. мал.2) також використовують атрибути width і height для визначення класу зображення (мале, середнє, велике). Варто перевіряти ще раз, що встановлені значення відповідають фактичному розміру зображення.

ris.2

Мал.2 - Сервіси пошуку картинок (a - images.yandex.ru; b - images.google.com.ua)

Іменування графічних файлів

Файл - це ще один покажчик, за допомогою якого пошукові системи можуть визначати тематику зображення. При іменуванні графічних файлів можна спиратися на такі «швидкі» рекомендації:

  • імена повинні бути прості та зрозумілі користувачеві;

  • можна використовувати ключові слова в назві файлу;

  • не використовувати назви файлів без смислового навантаження (наприклад, IMG027589.jpg);

  • кількість слів у файлі не повинно перевищувати 4-5;

  • замість пробілів між словами використовувати дефіс;

  • при необхідності використання однієї смислової основи в імені файлів для різних зображень, просто додавати ідентифікатор (наприклад, kozhanaja-kurtka-01.jpg, kozhanaja-kurtka-02.jpg, kozhanaja-kurtka-03.jpg тощо;).

  • якщо можливо, всі схожі картинки, які логічно можуть бути згруповані, розміщувати в одній папці з відповідним ім'ям (наприклад, ... /kozhanye-kurtki/kozhanaja-kurtka-01.jpg, ... /kozhanye-kurtki/kozhanaja-kurtka-02.jpg і т.д.).

Вибір формату зображень

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

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

  • GraphicsInterchangeFormat (GIF) - цей формат зображення найкраще підходить для зображень, в яких використовується 1-2 кольори, наприклад, логотипи або анімація. Особливості: прозорий фон, відсутня змішання кольорів.

  • PortableNetworkGraphics (PNG) - забезпечує високу якість, але при цьому генерує файли великого розміру, які часто не підходять для використання в мережі. Існують винятки, наприклад, коли потрібно надзвичайно високу якість: твори мистецтва (картини).

  • JointPhotographicExpertsGroup (JPEG) - це бажаний формат для зображень в мережі Інтернет. Показує велику різноманітність кольорів і генерує файли меншого розміру, ніж PNG. Цей формат чудово підходить для фотографій, а також для ілюстрацій, де присутній градієнт, тіні і т. п.

Зберігати зображення краще із застосуванням прогресивної схеми стиснення (progressive JPEG, див. мал.3а) замість базового режиму кодування (baseline JPEG, див. мал.3b). У такому випадку малюнок буде завантажуватися швидше, поступово збільшуючи ступінь деталізації. (див. мал.3a).

ris.3

Мал. 3 - a (прогресивне стиснення JPEG); b (базове стиснення JPEG)

Розмір одного і того ж зображення при використанні різних форматів: GIF (256 кольорів) - 42K; PNG-8 (256 кольорів) - 37K; PNG-24 - 146K; JPG (60 quality) - 32K

Висновки

У статті розглянуті методи роботи з графічними матеріалами. При комплексному використанні вони сприяють поліпшенню індексування та ранжирування зображень на сайті. Разом з тим, добре оптимізована графіка допомагає встановити емоційний зв'язок з відвідувачами ресурсу. Зображення пожвавлюють сторінки з текстом, додаючи яскраві кольори і образи, до великого задоволення користувачів. На додаток до всього графічні зображення можуть служити також джерелом додаткового пошукового трафіку для сайту.

Підводячи підсумок, необхідно врахувати ще кілька хороших практик:

  • графічні файли повинні бути доступні для пошукових роботів (у файлі robots.txt папки із зображеннями не повинні закриватися від індексації);

  • зображення бажано додавати в карту сайту (див. детальніше);

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

  • залучати зовнішні посилання для найбільш цінних зображень;

  • забезпечити унікальність графічних матеріалів.

Додаткову інформацію можна знайти в довідниках пошукових систем:

Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Обговорити задачу

Отримуйте новини інтернет-маркетингу

Тільки корисна інформація від експертів Promodo

Отримуйте новини інтернет-маркетингу