12 Важливих Порад Щодо Оптимізації Зображень Для SEO, Які Вам Варто Знати

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

Зображення часто займають найбільшу частину вебсторінок.

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

Ваш контент у будь-якому випадку повинен містити якісні зображення, тож чому б їх також не оптимізувати?

Це як отримати печиво Орео з молоком безкоштовно від пошукових систем. Не беріть тільки печиво – краще вмочити його в молоко. У цій статті ми детально розглянемо кожен аспект SEO для зображень та надамо вам поради з оптимізації зображень для кращої видимості в пошукових системах.

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

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

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

Що таке SEO для зображень?

Оптимізація зображень – це набір технік для підвищення видимості в результатах пошуку (SERP) на основі знань про те, як пошукові системи сканують, розуміють та ранжують зображення.

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

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

1. Вибір правильного формату зображення

Існує безліч форматів зображень, але пошук Google підтримує лише такі формати: JPEG, PNG, WebP, BMP, GIF та SVG.

Розглянемо відмінності між цими форматами та їхній вплив на ваш сайт і SEO.

• PNG : Використовує безвтратне стиснення, що означає, що дані зображення не втрачаються. Це дає змогу отримати високоякісні зображення і підтримує прозорість, але розмір файлу більший. Ідеально підходить для друку.
• JPEG : Використовує втратне стиснення, що призводить до погіршення якості зображення, але можна налаштувати рівень якості для досягнення балансу між розміром файлу і якістю.
• WebP : Розроблений Google, підтримує безвтратне або втратне стиснення і є більш ефективним, ніж JPEG (на 25-80%). Дає змогу отримати менші файли при збереженні якості. Підтримується всіма основними браузерами.
• GIF : Використовує безвтратне стиснення, але обмежений 256 кольорами, тому менш придатний для високоякісних зображень і більше підходить для простих графік та анімацій.
• SVG : Це векторний формат, який використовується для логотипів, іконок та інших дизайнів, оскільки його можна масштабувати до будь-якого розміру без збільшення розміру файлу. Ідеальний для адаптивного веб-дизайну.
• BMP : Великі й неконвертовані файли зображень, які зберігають дуже високу якість. Через великий розмір файлів зазвичай не використовуються для вебсайтів, оскільки це може значно уповільнити час завантаження сторінок.

Найкращим варіантом є використання PNG, який потім можна конвертувати у формат WebP для веб-застосування.

Щодо конвертації GIF у WebP, зауважте, що старі браузери, такі як Safari 15.6 (macOS Catalina) та старіші версії, не підтримують анімовані формати WebP.

Зазвичай, лише незначна кількість користувачів використовує застарілі версії браузерів, тому це не повинно викликати значних проблем.

Як загальне правило, використовуючи певну технологію, слід регулярно моніторити відсоток пристроїв ваших користувачів, які її підтримують, через Google Analytics.

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

Для розуміння цього, розглянемо зразок зображення у форматі BMP та конвертуємо його у різні формати.

Подивімося, як змінюється розмір файлу та час завантаження на вебсторінці, ґрунтуючись на моєму досвіді. Як тестове середовище, ми використовували локальний вебсервер Apache та включили зображення на зразкову HTML-сторінку.

В качестве среды тестирования мы использовали локальный веб-сервер Apache и включили изображения в образец HTML-страницы.

Час завантаження зображень на 3G-з'єднанні (~1МБ/сек)

Час завантаження зображень на швидкому з'єднанні (128МБ/сек)

Це ілюструє ефективність формату WebP. Він має найменший розмір файлу та завантажується в п'ять разів швидше, ніж PNG, і майже вдвічі швидше, ніж файли JPG.

Ось чому рекомендується використовувати WebP. Якщо ви це зробили, ви вже досягли значного прогресу в оптимізації часу завантаження. (Існують випадки, коли розмір зображення у форматі WebP може бути більшим за оригінальний файл. Дізнайтеся більше про це на сторінці поширених запитань Google.)

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

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

У цьому випадку ви можете відображати мініатюри у форматі WebP, що посилаються на зображення високої якості у форматі PNG.

Ми дізналися про різні формати зображень та їхні відповідні методи компресії.

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

Сервіси компресії зображень використовують передові алгоритми та видаляють непотрібні метадані (наприклад, дані EXIF та GPS-теги), щоб зменшити розміри файлів понад базову компресію, властиву стандартним форматам файлів.

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

Наприклад, коли зразок зображення вище конвертується з JPG у WebP за допомогою ShortPixel з втратами, отримуємо файл розміром 8.3 КБ, тоді як TinyJPG генерує трохи інший файл розміром 8.7 КБ.

Нижче наведено список сервісів для компресії зображень, які ви можете розглянути:

• ShortPixel
• TinyJPG
• EZGIF
• Kraken.io

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

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

Що щодо формату AVIF?

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

Цей формат пропонує ще вищий рівень стиснення за допомогою втратної компресії.

Наприклад, той самий файл зображення у форматі AVIF важить 11 КБ у порівнянні з 41 КБ у форматі WebP.

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

AVIF проти WebP

Якщо ви задоволені якістю AVIF і хочете його використовувати, ви можете зробити це, включивши його у тег <picture> як перший <source>.

Браузери, які підтримують AVIF, відобразять його навіть у меншому розмірі.

Google, який на момент написання цієї статті все ще не підтримує цей формат, просто проігнорує його і перейде до наступного формату, зазначеного в тегі <picture>.

Ось зразок коду:

<picture>

<!-- AVIF format will be processed if client (i.e. browser ) supports it as a first in list-->

<source type="image/avif" 

srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- WebP format will be processed if client doesn't support AVIF  -->

<source type="image/webp" 

srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- If WebP is also not supported, the browser will then fall back to the PNG format  -->

<source type="image/png" 

srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- Lastly, if none of the advanced formats are compatible, the browser will default to displaying the JPEG image. -->

<img src="image-300w.jpg" 

srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" 

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

alt="Description of the image">

</picture>

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

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

2. Використовуйте Унікальні Зображення Замість Стокових

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

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

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

Напевно, ви бачили одне з таких зображень:

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

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

Великі Зображення та Google Discover

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

Google рекомендує , щоб зображення були не менш ніж 1200 пікселів в ширину і мали налаштування max-image-preview

в мета-тегу robots, щоб забезпечити їхнє відображення як великих зображень у Google Discover:

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

Однак є застереження. Як видно, мініатюри можуть з'являтися маленькими, навіть якщо вебсторінки використовують необхідне налаштування.

Google не гарантує , що завжди буде відображати великі мініатюри.

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

3. Оптимізуйте Імена Файлів Зображень

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

Імена файлів зображень сигналізують Google та іншим пошуковим системам про зміст зображення.

Зазвичай імена файлів на кшталт “IMG_722019” чи щось подібне не допомагають Google краще зрозуміти зображення.

Хоча Google тепер може розпізнавати зміст зображень, встановлення змістовних імен файлів допоможе Google краще зрозуміти зображення.

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

Залежно від обсягу вашої медіатеки, це може вимагати деякої роботи, але зміна стандартного імені файлу завжди є гарною ідеєю.

4. Пишіть SEO-дружній Alt-текст

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

Коли зображення не завантажується, у верхньому лівому куті зображення з'являється блок з alt-тегом. Переконайтеся, що alt-теги відповідають зображенню та роблять його релевантним.

Звернення уваги на alt-теги також позитивно впливає на загальну стратегію SEO на сторінці.

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

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

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

Ось приклад поганого та хорошого alt-тексту згідно з офіційною документацією Google.

Скріншот з Google Search Central, лютий 2024 Також alt-текст потрібен згідно з Законом про американців з обмеженими можливостями для осіб, які не можуть самостійно переглядати зображення.

Описовий alt-текст може точно повідомити користувачам, що зображено на фото. Наприклад, якщо у вас на вебсайті є зображення шоколаду, alt-текст може бути таким:

Однак кращий alt-текст, що описує зображення, буде таким:

Для додаткової SEO-цінності, alt-текст може діяти як анкор-текст для внутрішнього посилання, коли зображення посилається на іншу сторінку сайту.

5. Оптимізуйте Заголовок та Опис Сторінки

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

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

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

6. Визначте Розміри Зображень

Атрибути розмірів зображень важливі для запобігання проблемам з Cumulative Layout Shift (CLS), які можуть заважати оптимізації Core Web Vitals. Це дозволяє уникнути стрибків сторінки під час завантаження.

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

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

7. Робіть Ваші Зображення Мобільними

Як ви могли помітити, ми коротко згадували атрибути srcset і sizes при обговоренні форматів зображень.

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

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

Ось приклад коду:

Атрибут srcset використовується всередині тега <img> , щоб вказати різні файли зображень та їх ширини.

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

Тому потрібно вказати ширину, щоб інформувати браузер про ширину кожної версії. Наприклад: srcset="image-300w.jpg 300w, image-600w.jpg 600w"

Атрибут sizes використовується браузером разом з атрибутом srcset для вибору ресурсу. Він вказує призначену ширину відображення зображення для різних розмірів екрана.

Для екранів до 600 пікселів у ширину він вибере зображення шириною 300 пікселів; для екранів до 900 пікселів – зображення шириною 600 пікселів; а для більших екранів – зображення шириною 1200 пікселів.

Без цього атрибута браузер за замовчуванням використовуватиме повну ширину екрана для вибору зображення з srcset .

Також ви можете використовувати дескриптор x , який вказує браузеру вибрати найбільш відповідний розмір зображення на основі роздільної здатності екрану пристрою (наприклад, 1x, 2x або 3x для стандартних, ретина та супер ретина екранів).

Крім того, ви можете використовувати дескриптори x для різних роздільних здатностей екранів (наприклад, ретина-дисплеїв), де розмір зображення залишається постійним.

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

Ви, напевно, задумалися, як важко автоматизувати роботу з атрибутами sizes та srcset , навіть якщо ви добре знаєте макет своїх веб-сторінок.

На щастя, Chrome нещодавно почав розробляти підтримку sizes="auto" , що дозволить браузеру визначати розмір зображень, що завантажуються з відкладеним завантаженням, на основі атрибута srcset згідно з HTML макетом та CSS.

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

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

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

Зазначаючи розміри зображень та використовуючи CSS ( width: 100%; height: auto; ) для збереження пропорцій, браузер може точно вибрати та відобразити зображення з атрибута srcset при використанні sizes="auto" .

8. Відкладене Завантаження Та Попереднє Завантаження

Відкладене завантаження (Lazy loading) полягає в тому, щоб відкладати завантаження зображень, які не видно в області перегляду користувача (поза першим екраном).

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

Це зменшує початковий час завантаження, прискорює роботу сторінки і може значно покращити показник Largest Contentful Paint (LCP), особливо на сторінках з великою кількістю зображень.

Реалізувати відкладене завантаження дуже просто – додайте атрибут loading="lazy" до вашого тега <img> .

Але ніколи не застосовуйте відкладене завантаження для зображень, які знаходяться в області перегляду (above the fold), оскільки це може негативно вплинути на показник First Contentful Paint (FCP).

Замість цього попередньо завантажте їх або використовуйте атрибут fetchpriority="high" .

Перевага попереднього завантаження перед атрибутом fetchpriority полягає в тому, що попереднє завантаження підтримується всіма браузерами, тоді як fetchpriority не підтримується браузерами Firefox та Opera.

Нижче наведено приклади попереднього завантаження та використання fetchpriority :

Використовуючи попереднє завантаження або fetchpriority , ви вказуєте браузеру почати завантаження зображень як пріоритетних, що є корисним для покращення показника Largest Contentful Paint (LCP).

9. Додайте Зображення до Вашої Карти Сайту

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

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

Якщо ви використовуєте WordPress, плагіни Yoast та RankMath пропонують рішення для карти сайту.

Якщо ви не використовуєте WordPress, можете скористатися програмним забезпеченням, таким як Screaming Frog, для генерації карти сайту.

10. Додайте Структуровані Дані

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

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

Інший варіант використання включає додавання схеми зображень у схему статті з декількома розмірами для підвищення видимості ваших статей у Google Discover і на різних пристроях у Google Search.

Google може вибрати найбільш відповідний розмір при відображенні їх.

Ось приклад:

11. Використання CDN для Швидшої Доставки Зображень

Content Delivery Network (CDN) або мережа доставки контенту - це набір серверів, розташованих по всьому світу, які зберігають ваш контент і доставляють його користувачам з найближчого географічного сервера.

Однак доставка - це не єдина перевага CDN; вони також пропонують можливості трансформації та оптимізації.

Передаючи параметри разом з URL зображення, ви можете запитувати різні розміри зображень або конвертувати їх у більш ефективні формати, такі як WebP.

Наприклад, служби, такі як Cloudflare’s Polish, можуть автоматично оптимізувати формати зображень, визначаючи сумісність браузера з форматом WebP. Вони можуть подавати PNG і JPEG зображення у форматі WebP за запитом.

Наприклад, на Search Engine Journal ми використовуємо цю техніку для подачі зображень у форматі WebP за допомогою вбудованого CDN нашого сервера.

Навіть якщо зображення мають розширення ".jpeg" або ".png", наш CDN подає їх у форматі WebP, якщо браузери його підтримують.

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

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

• Cloudflare .
• Amazon CloudFront .
• ImageKit .
• KeyCDN .

12. Пильнуйте за Авторськими Правами

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

Наприклад, Поштова служба США виплатила 3,5 мільйона доларів у позові про порушення авторських прав на зображення, а компанію Skechers було засуджено на 2,5 мільйона доларів.

Якщо зображення, яке ви використовуєте, належить таким провайдерам стокових фотографій, як Getty, Shutterstock, DepositFiles, і ви не маєте ліцензії на його використання, ви ризикуєте зіткнутися з дорогим позовом.

Відповідно до Закону про цифрове тисячоліття і авторське право (DMCA), вам можуть видати повідомлення про порушення авторських прав. Якщо власник контенту побачить свій контент на вашому сайті, він може подати запит на видалення DMCA, який ви повинні виконати.

Ключові Висновки Оптимізації Зображень

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

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

• Обирайте правильний формат файлу.
• Подавайте правильний розмір файлу для швидшого завантаження сторінки.
• Переконайтеся, що ваші елементи SEO на сторінці (метадані, структуровані дані тощо) відповідають вашому зображенню.
• Для покращення індексації створіть карту сайту для зображень або переконайтеся, що ваші зображення представлені у вашій карті сайту.

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

Бажаю успіхів в оптимізації!