Оптимізація зображень: як оптимізувати зображення для вашого сайту та чому це важливо
Оптимізація зображень для сайту – справа важлива, бо:
- пошуковики мають окремий розділ, де можна здійснити пошук за зображенням і люди ним користуються;
- це допомагає підняти сайт в пошуковиках;
- прискорює завантаження сторінок сайту;
- зменшується обсяг файлів, а значить сайт використовує менше місця на хостингу;
- покращує видимість сайту при пошуку за зображенням;
- підвищує відвідуваність сайту;
- забезпечує додатковий ріст продажів.
Що саме треба оптимізувати
Формат файлів
Найпоширеніші формати – це 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 прозора бананка – вид зверху”
Як бачите, оптимізація зображень – важливий напрямок при роботі над сайтом, оскільки це все враховується пошуковими системами і впливає на видимість сайту при пошуку. Оптимізувавши зображення, ви зможете збільшити кількість трафіку, а це вплине на рівень продажів.
