Оптимізація зображень для сайту

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

 

Оптимізація зображень для сайту – справа важлива, бо:

 

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

 

Що саме треба оптимізувати 

Формат файлів 

Найпоширеніші формати – це jpeg, png, gif, svg. 

 

JPEG – використовуйте цей формат для фото;

PNG – для графіки, простіше кажучи, для всього, що намалював дизайнер;

GIF – легкий, але погана передача кольорів, тому використовуйте для невеликих елементів, наприклад, для іконок;

SVG – для векторних зображень.

 

Найкращий формат для сайту – jpeg, вони не важкі, а тому не сповільнюють роботу сайту. 3 2015 цей параметр враховується Google при ранжуванні. Тобто, якщо ваші зображення в форматі jpeg, то сайт буде вище у видачі. 

 

URL зображення 

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

 

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

 

Уникайте назв типуproduct214w135dfg6.jpg, а пишіть простими словами, описуючи предмет. 

 

Наприклад, ми продаємо ось цю бананку: 

оптимізація зображень на сайті - ілюстративне фото для статті

В цьому випадку ідеальне URL зображення  – це: назва товару + назва бренду + особливість товару. 

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

 

Розмір зображення

Розмір зображення впливає на швидкість завантаження сторінки, а та, у свою чергу, на ранжування сторінки. Якщо ви використовуєте багато картинок на сторінці, це може значно сповільнити її завантаження. Оптимізувати зображення можна або з допомогою Photoshop, або ж з допомогою такий сервісів, як Compressor чи Kraken 

 

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

 

Title

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

Як варіант це може виглядати так:

title = “бананка wowocase прозора”

 

Alt

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

 

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

 

Найкращий варіант – зробити докладний опис:

alt = “Популярна модель wowocase прозора бананка – вид зверху”

 

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