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

Зображення на сайті відіграють не тільки роль прикраси чи декорації. Картинки вже давно стали невідʼємною складовою SEO сайту та вимагають особливої уваги до себе не тільки зі сторони SEO-спеціалістів, а й веб-розробників.

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

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

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

• Прискорення завантаження та роботи сторінок. Великі за розміром та оптимізовані картинки призводять до проблем з працездатністю сайту, зокрема — зниженню швидкості його роботи. Пошукові роботи прискіпливо ставляться до швидкості роботи веб-ресурсу, тому оптимізація зображень є дієвим способом покращення працездатності сайту.
• Користувацький досвід та взаємодія з контентом. Якісний контент містить не тільки сухий текст, а й візуальне оформлення, включно з картинками. Зображення на сайті повинні відповідати змісту статті, мати достатню якість. Це покращить користувацький досвід, змусить користувача довше затриматися на ресурсі, а у перспективі — повернутися, бо він вже знає, що сайт пропонує не тільки корисний, а й цікавий контент.
• Вплив оптимізації зображень на SEO. Оптимізація графічних матеріалів допоможе не тільки підвищити позицію сайту в пошуковій видачі, а також ймовірніше піднятися вище в розділі «Зображення» Google Chrome.

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

Обираємо зображення та оптимізуємо… Чи ні?

Створили статтю, завантажили на сайт, обрали відповідні картинки… Час закотити рукава та оптимізувати? Не все так просто. Виявляється, далеко не всі зображення на сайті слід оптимізовувати. Давайте розберемося в чому тут проблема.

Картинки для дизайну та наповнення — в чому відмінність?

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

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

Всі зображення на сайті мають бути оптимізовані, але кожне — по-своєму. Наприклад, додавання атрибутів title та alt для дизайн-матеріалів в цілому не має сенсу. Але їхній розмір та розширення слід враховувати та за потреби оптимізувати.

Зображення та їх формати

Глобально формати всіх зображень можна розділити на два типи:

• Векторні — до яких відносяться формати SVG, AI, EPS, PDF та інші. Цей тип зображень створюється на базі математичних формул та геометричних фігур. Векторні зображення мають велику перевагу — їхня якість не залежить від масштабу картинки. Тобто навіть якщо використати сильний «зум», чіткість ліній не постраждає.
• Растрові — добре відомі нам формати JPEG, PNG, GIF, RAW. На відміну від вектору, растрові зображення складаються не геометричних примітивів, а з пікселів. Такий тип картинки вже залежить від масштабування, тому завеликий «зум» відкриє всі «особливості» зображення. Растр не буде виглядати однаково чітко на маленькому смартфоні та великому моніторі.

Кожен з цих типів зображення використовується для конкретних задач сайту. Повертаючись до розділення картинок за призначенням (дизайн та наповнення), можна зробити наступні висновки:

• Вектор — ідеально підійде до логотипів, іконок, схем, інфографік, тобто для тих елементів сайту, які потребують високої чіткості.
• Растр — реальні фотографії, текстури, малюнки.

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

Оптимізація вектору

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

• Вектор не втрачає свої візуальні особливості під час масштабування — тобто початкове розширення в 1200×600 пікселів можна зменшити хоч в три рази, а чіткість не впаде.
• Компресія вектору також не впливає на його якість — «стискання» векторної графіки відрізняється за аналогічним процесом над растром, але результат той самий. Умовний SVG-файл можна компресувати за допомогою онлайн-сервісів та значно зменшити його розмір, але якість файлу не постраждає.

Оптимізація растрових картинок

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

• Зменшувати розширення треба обережно — початкове розширення 600х382 буде погано виглядати при збільшенні масштабу навіть у два рази, адже на поверхню «вспливуть» усі артефакти. Краще одразу шукати або створювати растр більшого розширення.
• Компресія відрізняється від вектору — растр компресується за іншим принципом. Існує два види компресії растру, один з яких вплине на якість зображення, а другий ні. Так, перший варіант компресії призведе до «стискання» пікселів, що призведе до втрати чіткості, але разом із тим — розміру файлу. Варіант без втрати якості пропонує видалити зайві мета-дані, які можуть мати досить велику «вагу».

Розміри, розширення, формати фото та де їх краще використати

Наведемо деякі поради з приводу фактичного використання графічних елементів на сайті.

Розмір файлу зображення

Сьогодні Інтернет набагато швидший та доступніший ніж десять років тому, але це не означає, що слід зловживати потужностями сучасних мереж. Розмір файлу напряму впливає на швидкість завантаження всього сайту, тому використовувати зображення розміром більше 3-4 Мб не варто.

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

Так, ті самі конструктори сайтів, зокрема WordPress, не дуже «полюбляють» важкі зображення, а тому страждає швидкість завантаження сторінок. Навіть самописні сайти можуть зіткнутися з проблемою обробки великих зображень, тому рекомендуємо обрати ідеальний розмір файлу саме для вас.

Головне, щоб швидкість завантаження сторінки не перевищувала показника 2-3 секунди для desktop і 3-4 для мобільних пристроїв.

Розширення зображення

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

• «Задник» він же background image — 1920 x 1080 — 16:9
• Розмір зображення для блогу — 1200 х 630 — 3:2
• Логотип сайту — 100 x 100 — 1:1
• Фавікон — 16 х 16 — 1:1

Втім, той же фавікон інколи рекомендують створювати у розширенні 32 х 32 чи навіть 64 х 64. Коли мова заходить про «задник», то на деяких сайтах співвідношення його сторін може відрізнятися — замість 16:9 може бути 21:9.

Формати зображень та фото для сайту

Розділимо усі формати за ймовірними напрямками використання наступним чином:

• Ілюстровані матеріали (фото, зображення до статей) — JPG (JPEG), PNG чи WebP. С точки зору швидкодії, оптимальним варіантом буде компресований JPG. Якщо потребується чіткість зображення з середнім розміром файлу, то зверніть увагу на сучасний WebP. PNG має найбільшу чіткість, але разом із тим — розмір. Якщо не потребуються особливі для PNG можливості (прозорі картинки, тіні тощо), то від використання некомпресованного PNG варто утриматись.
• Дизайн-складова (логотипи, кнопки, функціональні зображення) — SVG, AI, EPS інколи оптимізований PNG. Сучасний стандарт — SVG. AI та EPS можуть мати проблеми з візуалізацією на деяких системах чи браузерах. Часто фавікони та технічні зображення для сайтів створюються з PNG картинок попри те, що цей формат растровий.

Сервіси для компресії зображень

Ось деякі сервіси, за допомогою яких можна зменшити розмір зображень:

• Compressjpeg.com — підтримує JPEG, PNG, GIF та PDF. Також підтримує пакетну обробку великої кількості файлів одночасно.
• JPEGMini — сервіс для компресії JPEG. Також підтримує пакетну обробку.
• TinyPNG — підтримує формати WebP, PNG та JPEG.
• Compressor.io — може обробляти зображення в форматі JPEG, PNG, GIF та SVG.

Операційна система MacOS має вбудовану функцію компресії фотографій та картинок. Для цього необхідно відкрити зображення через вбудований додаток «Перегляд», відкрити «Файл» та знайти пункт «Експортувати». Після цього зʼявиться вікно, в якому можна обрати місце збереження нової версії зображення, його формат та визначити якість. Трохи нижче буде наведений майбутній розмір файлу.

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

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

Мета-теги та особливості оптимізації картинок

Ми вже зʼясували, що для дизайн-елементів сайту по типу логотипів, розмитих «задників» та елементів, які несуть лише візуальний сенс, можна не прописувати Alt та Title. Інша ситуація з основними зображеннями, які інтегровані в «тіло» контенту. Ось деякі поради.

Тег Alt

Мета-тег Alt використовується для опису змісту картинки або фото. Пошукові роботи не мають очей, тому спиратися під час сканування сторінок можуть лише на текстові пояснення. І саме мета-тег Alt допомагає роботам зʼясувати відношення зображення до конкретної тематики.

Більше того, тег Alt відповідає за ранжування зображень у Google Image. Коли користувач надав запит пошуковику та перейшов у розділ «Зображення», то Google «підтягує» відповідні за темою картинки на основі Alt-опису. Поради для створення працюючого Alt:

• Довжина складає 100-150 символів. Опис зображення може бути й більшим, але Google скануватиме перші 150 символів, тому важливо використати їх з користю.
• Alt повинен відображати сенс та тематику зображення. Потрібно простими словами описати зміст картинки. Наприклад: «Кадри тесту вітрильної яхти Fountaine Pajot New 44».
• Не дублюйте текст з заголовку H1 чи Title самої сторінки. Використання цих речень чи слів можуть погано позначитися на ранжуванні картинки в Google Image, адже пошуковик не зрозуміє вміст картинки.
• Кожен Alt повинен бути унікальним. Якщо на сторінці кілька різних зображень з однаковим Alt-описом, то це може заплутати пошукових роботів.
• Відмовтеся від спаму ключами. Головні ключі статті, в якій розташоване фото, не варто повторювати чи навмисно дублювати в Alt-описі, тим паче декілька разів.

Гарним варіантом буде створення різних Alt-описів для однакових зображеннях у різних мовних версіях сторінки. Звичайно, що мова опису повинна відповідати мові сторінки.

Тег Title та назва файлу

Мета-тег Title не впливає на SEO-просування зображення. Втім, його можна використати для практичної користі — наприклад, систематизувати зображення різних типів. Наприклад, Title для всіх бекграундів сайту може містити якусь таку конструкцію:

example_name_bg.jpg чи bg_example_name.jpeg

Такий підхід дозволить швидше знаходити файли за пошуком на сервері або CMS.

Наприклад, часто «сирі» фотографії мають назви на кшталт «IMG_2089.jpeg», який не дає жодних підказок з приводу того, що зображено всередині. Змініть назву на щось зрозуміліше: «photo-yabluka-na-stoli.jpg».

Що таке IPTC та як з його допомогою оптимізувати зображення?

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

• заголовок;
• опис;
• ключі;
• автор;
• право власності;
• дата створення;
• місце створення зображення.

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

Чому слід обачно використовувати Lazy Load?

Lazy Loading — корисна можливість для додаткової оптимізації сторінок вашого сайту, зокрема зображень. Суть технології проста і полягає в тому, що елементи (будь-які, але включно з зображеннями), відображаються лише тоді, коли користувач «доходить» до них під час скроллінгу сторінки.

Lazy Loading корисний на сторінках сайту, що містять велику кількість графічних обʼєктів. Для активації такого режиму завантаження контенту слід додати параметр loading=”lazy” до строки ініціалізації елементу в HTML-коді. Приклад:

<img src=”epiphone.jpg” alt=”Шестиструнна електрогітара та підсилювач” loading=”lazy”>

Звернути увагу на «ліниве завантаження» варто у випадках:

• якщо зображення завантажуються через JS-скрипти;
• якщо src або srcset прописані у HTML, а не через data-src чи інші нестандартні атрибути.
• структура DOM відображає зображення без додаткових умов.

В усіх інших випадках нормальне сканування пошуковиками сторінок та зображень гарантоване майже на 99%.

В двох словах про унікальність картинок, Google Image та як не натрапити на проблеми

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

Перевірте знайдене в Інтернеті фото на унікальність — просто пропустіть його через пошук Google Image. Дослідіть скільки разів фото чи графіка використовувалася на інших сайтах, як саме воно ранжується. Вірогідно, що обране безкоштовне фото занадто популярне, тому варто пошукати альтернативу.

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

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

Підсумки

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

• Розділяйте зображення на дизайнові та змістовні.
• Обирайте підходящий до стилю сайту та його дизайну розміри зображень.
• Стежте за розмірами файлів зображень та швидкістю роботи сайту.
• Давайте картинкам зрозумілі імена, прості, але змістовні Alt-описи, людиночитані title та явні URL.
• Видаляйте непотрібні мета-дані, які не містять корисної інформації для пошуковиків — файл стане меншим за обсягом.
• Розділіть всі зображення на категорії та систематизуйте їх для полегшення пошуку.
• За можливістю використовуйте унікальні зображення — створюйте самостійно або використовуйте сток. Існує декілька безкоштовних стоків, але зловживати використанням фото, у безкоштовності яких ви не впевнені, не варто.

І памʼятайте, що навіть з оптимізацією можна перестаратися — і замість красивого оформлення отримати перекомпресовану мішанину кольорів.

Олександр Шмідько

SEO-фахівець

Сторінка автора