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

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

Головна мета роботи з картинками — зменшити розмір файлу без шкоди для якості, що також зменшує споживання ресурсів, дозволяє швидше завантажуватися сторінкам та позитивно впливає на SEO-просування.

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

Чому важливо оптимізувати картинки?

Давайте разом розглянемо основні чинники, на які впливає робота з картинками на вебресурсі:

1. Швидкість сторінки. Великі неоптимізовані картинки можуть зробити сайт повільним та незграбним. Користувачі не чекатимуть, поки завантажиться сторінка, так що оптимізація зображень має велике значення для забезпечення швидкого завантаження.
2. Користувальницький досвід. Коли вебресурс завантажується нескінченно довго, налагодження найкращої взаємодії з користувачами перебуває під великим питанням. У наш час швидкостей люди очікують, що сторінки будуть відкриватися максимально швидко й на будь-якому пристрої. Отже, якщо ви хочете відповідати очікуванням ваших потенційних клієнтів, попрацюйте з картинками. Додавання альтернативного тексту допоможе відвідувачам сайту з порушенням зору зрозуміти, що зображено на картинці. Також про це дізнаються звичайні користувачі, якщо фото чи графіка з якихось причин не завантажується в їхньому браузері.
3. SEO-просування. Опрацювання картинок забезпечує їхнє високе ранжування в пошуковій видачі Google, буде корисним для загальної оптимізації проєкту. А також коректна робота з файлами позитивно оцінюватиметься алгоритмами Google.
4. Пропускна здатність та застосування дискового простору. Стиснуті зображення допомагають ефективно використовувати простір для зберігання інформації на сервері.

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

Основні вимоги до картинок для сайту

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

Формат

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

Формати векторних файлів — SVG, PDF, EPS та AI. Цей тип зазвичай вибирають для збереження зображень, які являють собою комбінацію ліній, точок і кольорів, таких як логотипи та значки. Головна перевага полягає в тому, що їх можна масштабувати без шкоди для якості.

Тим часом растрові зображення ґрунтуються на пікселях, що робить їх залежними від дозволу. Це означає, що вони втрачають якість, стають розмитими або буде видно пікселі при зміні розміру. Формати файлів у растровій категорії — JPEG, PNG, GIF та RAW. Далі трохи детальніше розповімо про найпопулярніші та зручніші для редагування формати.

Якість

Цей параметр залежить від ступеня стиснення файлу. Тут треба постаратися знайти необхідний баланс. Порівняйте 2 картинки:

На першій збережено високу якість, але залишається досить великий розмір файлу — 590 КБ (при вихідному варіанті — 2,06 МБ). Розмір другого файлу — 68 КБ. Але ми спостерігаємо високу зернистість, промальовування пікселів та інші недоліки.

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

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

Розмір та вага зображень

Розмір картинки та її вага — це різні параметри. Говорячи про розмір, мають на увазі співвідношення ширини до висоти, яке виражається в пікселях. А вага показує, скільки місця займає зображення на сайті, зазвичай вимірюється в КБ (кілобайтах) або МБ (мегабайтах).

Наприклад, якщо ви використовуєте зображення розміром 500x500 пікселів для мініатюри 50x50, браузер повинен правильно його завантажити й масштабувати, перш ніж відображати для користувачів. Для цього краще користуватися способом, коли зображення підлаштовуються під точні розміри (чи то повнорозмірна картинка, чи то маленька мініатюра). У цьому допоможуть Adobe Photoshop, GIMP та онлайн-редактори (наприклад, PicResize).

Проаналізувати, які зображення використані на сторінці, можна за допомогою розширення Serpstat Website SEO Checker.

Розміщення

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

Оптимізація векторних зображень

Отже, ще раз нагадаємо, що векторний формат найкраще підходить для:

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

Для таких зображень здебільшого використовують формат SVG. Файл із таким дозволом можна створити навіть у найпростішому текстовому редакторі, додавши тег <svg>. Таку саму розмітку застосовують на сайті.

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

Хочу в ТОП пошуку за картинками

Отримати консультацію щодо виведення картинок з сайту в ТОП

Докладніше

Оптимізація растрових зображень

Піксель є основою всіх растрових зображень. Він містить дані в колірній моделі RGBA. Кожен із цих 4 каналів має 256 відтінків і важить 8 бітів, відповідно, величина кожного пікселя — 32 біти або 4 байти. Знаючи ці вихідні дані, а також розмір картинки в пікселях, можна розрахувати її вагу. Наприклад, 2500 пікселів важитимуть 10 КБ (2500 х 4 байти = 10000 байтів / 1024 = 10 КБ).

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

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

• SEO-оптимізація зображень за допомогою зниження глибини кольору. Зробити вагу фото менше вдвічі можна, змінивши кількість використаних кольорів з 2500 до 256. У результаті вага кожного каналу знизиться до 2 бітів замість 8;
• використання дельта-кодування. Застосовується для ділянок зі схожими кольорами. Якщо сусідні пікселі схожі кольором, можна вказати нульову різницю між ними. Тоді піксель важитиме 1 біт;
• масштабування зображення. Ми радимо не використовувати на сайті зображення занадто великого розміру. Вибір оптимального варіанту видаляє зайві пікселі.

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

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

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

Compressjpeg.com

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

Compressor.io

Якщо вам потрібний високий рівень стиснення, який допоможе заощадити сотні КБ, зверніть увагу на цей інструмент. З ним можна зменшити розмір файлу майже на 90%. Він стискає зображення JPEG та PNG без втрати пікселів та працює з файлами інших типів. Однак розмір файлу не може перевищувати 10 МБ.

Imagify.io

Сервіс працює з найпоширенішими форматами: JPG, PNG, PDF та GIF. Для безкоштовних облікових записів максимальний розмір зображення, яке завантажується, становить 2 МБ. Для платних облікових записів немає обмежень на максимальний розмір завантаження. Автори сервісу акцентують на простоті його використання та відсутності складних налаштувань.

WebP Converter

За допомогою цього онлайн-інструменту можна перетворити фото, напівпрозорі та графічні зображення на зручний формат WebP. Ступінь стиснення із втратами регулюється, тому користувач може вибрати компроміс між розміром файлу та якістю картинки. Файл формату WebP в середньому на 30% менше «важить», ніж JPEG та JPEG 2000, причому без втрати якості. Якщо порівнювати з PNG, то зображення, конвертоване в WebP Converter, менше в середньому на 26%.

ezGIF.com

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

Jpegtran

Сервіс працює з форматом JPEG. З його допомогою можна забрати зайві метадані, вказати ім’я вихідного файлу, самостійно вибрати коефіцієнт стиснення. З утилітою зручно працювати з великими пакетами (наприклад, фото карток товарів).

Pngquant.org

Це утиліта командного рядка та бібліотека для стиснення PNG із втратами. Перетворення значно зменшує розмір файлу (часто до 70%) та зберігає повну альфа-прозорість. Згенеровані зображення сумісні з усіма веббраузерами та операційними системами.

Приклад зображення до та після стиснення представлений нижче.

Оригінал — 75,628 байта.

Оброблений файл — 19,996 байта (73% стиснення).

ILoveIMG.com

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

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

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

Назва зображень

Кожному файлу потрібне коротке та релевантне ім’я, яке описує його вміст. Важливо, щоб воно дало підказку про предмет зображення. Наприклад, my-new-black-kitten.jpg для пошукової системи буде кращим, ніж IMG00023.JPG.

Зміна імені файлу допоможе пошуковикам краще зрозуміти, про що картинка, і підвищити його цінність для розкручування сайту. Для комерційних онлайн-проєктів додайте в ім’я файлу назву продукту та кілька описових слів (наприклад, бренд або колір). Також використовуйте дефіси, а не символи підкреслення. Наприклад, краще white-shirt.jpeg замість white_shirt.jpeg. Якщо працюєте з регіональною версією сайту, переконайтеся, що ви також переклали імена файлів.

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

Зберігання

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

Розташування картинок

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

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

Зворотні посилання

Якщо у своїй роботі з нарощування маси посилань ви вирішили розмістити посилання на картинку з вашого вебресурсу, то перевірте, наскільки відповідають анкор і назва зображення. Для пошукових роботів це важливо. Наприклад, надати посилання на картинку trafik-na-sayt-2022.jpg краще в такому контексті: «Трафік на сайт у 2022 році був вищим, ніж у попередньому».

Метадані для зображень

Чим більший файл, тим більша ймовірність збільшення швидкості завантаження вебсторінки. Щоразу, коли сторінка отримує файл, вона витрачає час на його «завантаження». Згідно з дослідженням компанії Dexecure, що займається SEO-оптимізацією, на метадані припадає в середньому 16% розміру файлу зображення. Хоча начебто ця цифра невелика й інформація не займає багато місця, у міру їхнього накопичення сторінки з великою кількістю картинок уповільнюватимуться під час завантаження. Ми рекомендуємо видалити метадані, аби зберегти високу швидкість сторінки.

Карта сайту

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

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

Мікророзмітка

При ранжируванні зображень Google також враховує такі компоненти, як назва файлу та атрибут опису Alt (альтернативний текст). Фактично це те, що читають програми та що з’явиться на сторінці, якщо картинка не може бути завантажена.

У 2021 році 26% всіх картинок на 1 мільйоні найкращих сайтів не мали альтернативного тексту. Крім покращення доступності та SEO, таке додавання додасть переваг перед конкурентами.

Є кілька правил написання хорошого альтернативного тексту:

• будьте конкретними. Переконайтеся, що опис є надзвичайно точним (у тому числі саме зображення, контекст тощо);
• будьте короткими. Намагайтеся, щоб описи не перевищували 125 символів. Зверніть увагу, що не треба вживати слова «зображення», «фото» або щось подібне до альтернативного тексту, оскільки це передбачено в HTML-коді;
• використовуйте ключові слова. Однак будьте обережні, щоб не перестаратися.

Такі інструменти, як Ahrefs, Ubersuggest та Semrush, допоможуть виділити найбільш релевантні пошукові запити, і тоді оптимізація картинок для сайту досягне своєї мети.

Унікальність

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

Shutterstock, Unsplash та Getty Images є одними з найвідоміших постачальників стокових зображень. Ці сайти містять тисячі безкоштовних фото для різних цілей.

Також намагайтеся застосовувати розширений пошук Google Images та використовувати зображення з урахуванням авторських прав.

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

Висновки

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