Як оптимізувати зображення на сайті

На необхідність оптимізації зображень вказують усі пошукові системи. Чому це важливо?

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

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

Повні рекомендації для пошукових систем можна отримати тут:

Рекомендації Google 

Рекомендації Яндекса

А ми зараз зазначимо основні моменти, на які варто звернути увагу.

1) Індексація

1) Сторінки, на яких знаходяться зображення, не повинні бути закриті в robots.txt.

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

3) Самі зображення не повинні бути закриті від індексації в robots.txt або будь-якими іншими способами.

2) Формат зображення

1) Пошукові системи рекомендують вибирати такі формати: GIF, PNG або JPEG.

2) Якщо зображення має невеликий розмір або є анімованим, то рекомендуємо вибирати формат GIF.

3) Якщо для вас вкрай важливо передати зображення без стиснення або високої якості, необхідно вибрати PNG. Але вибираючи цей формат, ви повинні розуміти, що можуть виникнути проблеми з коректним та швидким завантаженням контенту. Обов’язково варто перевірити, чи правильно будуть відображатися у вас такі зображення.

4) У решті випадків можна використовувати формат JPG.

5) Пошукові системи також не рекомендують використовувати формати BMP і TIFF.

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

Розміри зображення прописуються 2 способами:

1) Через CMS

У будь-якій CMS є можливість прописати ширину та висоту зображення в редакторі зображень. Ви можете вказати там бажані значення.

2) Через атрибути

Якщо з якихось причин ви не можете вказати розміри зображення через CMS, є можливість прописати їх за допомогою атрибутів width (ширина) і height (висота).

Приклад:

<Imgsrc = “photo1.jpg” width = “800” height = “600”>

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

Ви можете перевірити, чи є у вас проблеми з відображенням зображень, через спеціальний сервіс Google тут.

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

Google рекомендує скористатися наступними сервісами:

https://www.lcdf.org/gifsicle/ – створює та оптимізує GIF-зображення;
https://jpegclub.org/jpegtran/ – оптимізує JPEG-зображення;
https://optipng.sourceforge.net – стискає PNG без втрат;
https://pngquant.org  – стискає PNG з втратами.

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

https://www.punypng.com – дозволяє стиснути до 10 зображень за раз;
https://tinypng.com – працює тільки з форматом PNG;
https://www.jpegmini.com – зменшує розмір зображення до 5 разів.

4) Алфавіт у назві

1) Назву файлу зображення рекомендується писати виключно латиницею, щоб уникнути проблем із відображенням назви файлу.

2) Якщо спочатку назва файлу була кирилицею (російська, українська, білоруська та ін.), вона повинна бути транслітерована відповідно до правил. Для цього можна скористатися сервісом https://translit.net.

5) Назва файлу

Назва файлу зображення не повинна містити спаму або малозрозумілих нечитабельних символів.

– Для комерційних сайтів

Приклад неправильних варіантів назви:

kupit-obuv-nedorogo-converse.jpg – спамний варіант;
obuv4317892.png – малоінформативний варіант;
IMG436432.jpg – неінформативний варіант.

Приклад правильних варіантів назви:

kedi-convers-krasnie-80.jpg;
kedi-convers-krasnie-front.jpg.

– Для інформаційних сайтів

Приклад неправильних варіантів назви:

Louvre-Museum-photo-smotret.jpg – спамний варіант;
Paris4317892.png – малоінформативний варіант;
IMG436432.jpg – неінформативний варіант.

Приклад правильних варіантів назви:

Louvre-Museum-At-Night.jpg;
Louvre-Museum-Winter.jpg;
Louvre-Museum-01.jpg;
Louvre-Museum-02.jpg.

6) Title

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

– Для комерційних сайтів

Правильний варіант може виглядати так:

title = “кеди converse червоні”
title = “кеди converse All-Starчервоні модель 80”
title = “кеди converse червоні вид зверху”

Неправильний варіант:

– Спам:

title = “кеди converse червоні купити недорого”
title = “кеди converse червоні, сині, жовті, зелені, фото, ціни, відгук”

– Малоінформативні або шаблонні:

title = “кеди”
title = “взуття”
title = “фото взуття”

– Неінформативні:

title = “4312125”
title = “купити”

– Для інформаційних сайтів

Правильний варіант може виглядати так:

title = “Музей Лувр вночі”
title = “Музей Лувр вночі зсередини”
title = “Музей Лувр взимку”
title = “Музей Лувр взимку 12.12.2008”

Неправильний варіант:

– Спам:

title = “Музей Лувр дивитися фото”

– Малоінформативні або шаблонні:

title = “Франція”
title = “музей”

– Неінформативні:

title = “4312125”
title = “туристичний гід”

7) Alt

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

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

Якщо ви вирішили не дублювати, то ви можете заповнити alt наступним чином:

alt = “кеди converse червоні мал. 1 “
alt = “кеди converse червоні мал. 2 “
alt = “Музей Лувр вночі мал. 1”
alt = “Музей Лувр вночі мал. 2”

або так:

alt = “кеди converse червоні вид зверху”
alt = “кеди converse червоні вид збоку”
alt = “Музей Лувр вночі панорама”
alt = “Музей Лувр вночі зсередини”

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

alt = “Популярні модель кедів converse all star червоного кольору – вид зверху”
alt = “Популярні модель кедів converse all star червоного кольору – вид збоку”
alt = “Зображення Музею Лувр в Парижі вночі з освітленням”
alt = “Фотографія Музею Лувр, зроблена взимку в грудні 2008 року”

Важливо! Текст у alt може і навіть повинен містити ключові слова, але головне, щоб це не виглядало як спам.

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

Еще по теме:

• Як складати Title: 5 основних правил із прикладами
• Турбо-сторінки Яндексу: навіщо потрібні, як створити та підключити
• Оновлення Google – «Speed ​​Update»