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

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

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

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

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

• розмір і вага;
• текстове оточення;
• Alt-атрибут;
• найменування та формат файлу;
• підписи тощо.

Як вибрати формат зображень

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

• JPEG. Картинка може втратити якість відображення при стисненні. Однак баланс розміру й чіткості можна відрегулювати. JPEG чудово підходить для фото зі значною кількістю кольорів і переходів.
• PNG. Тут файли мають більший розмір, ніж у попередньому форматі, що оптимально для друку. При цьому вони можуть стиснутися без втрати якості.
• GIF. Застосування цього формату найкращий варіант для оптимізації зображень з анімацією на сайті. Він забезпечує стиснення без втрати даних. Однак обмежений за колірною гамою, яка становить лише 256 кольорів.
• WebP. Формат розроблений безпосередньо Google для графічного контенту. Ефективніший, ніж JPEG, оскільки забезпечує чудову якість навіть при значному стисненні. Важливо відзначити, що WebP адаптований під усі типи браузерів.
• SVG. Застосовується переважно для невеликих логотипів, іконок, значків, з огляду на те що може без зміни обсягу файлу змінювати розміри відображення.

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

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

Один із найдієвіших способів того, як оптимізувати зображення на сайті — здійснити стиснення. Воно дає змогу скоротити час завантаження, заощадити трафік і місце на сервері, в іншому сховищі, поліпшити показники СЕО. Така внутрішня оптимізація сайту можлива із застосуванням як самостійних сервісів, так і плагінів для конкретних типів CMS. Серед найбільш популярних самостійних інструментів:

• Tiny PNG, що працює з файлами PNG або JPG розміром до 5 Мб. На сервіс можна завантажувати до 20 картинок за один раз;
• Kraken, що дає змогу регулювати баланс ступеня стиснення та втрати чіткості;
• Compressor, що підтримує формати JPEG, GIF, PNG, SVG. Дозволяє ефективно оптимізувати зображення на сайті зі зменшенням обсягу до 90% і зі збереженням високої роздільної здатності. Максимальний обсяг завантажуваного файлу 10 Мб;

Зміна розмірів зображень

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

• 1:1 (квадрат);
• 4:3 (високий прямокутник);
• 3:2 (звичайний прямокутник);
• 16:9 (низький прямокутник).

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

• Внесення змін до HTML-коду, зокрема, в атрибути <height>, <width> і <img>.
• Застосування графічних редакторів (Adobe Photoshop, GIMP та ін.)
• Використання спеціалізованих сервісів (Canva, PicResize тощо).

Оптимізація атрибутів Alt

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

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

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

Впровадження ледачого завантаження (lazy loading)

Навіть якщо максимально грамотно оптимізувати зображення для сайту, швидкість завантаження сторінок може бути незадовільною. Зазвичай це пов’язано з тим, що завантажується одночасно весь візуальний контент при її відкритті відвідувачем. До того ж більшу його частину буде видно користувачеві тільки після прокрутки. Мінімізувати швидкість завантаження сторінок дає змогу інструмент lazy loading, який відкладає завантаження картинок, які не видно відразу. Унаслідок цього вони довантажуються плавно й поступово в міру прокручування сторінки користувачем. Активувати цей інструмент можна, вставивши атрибут loading=«lazy» в тег <img>.

Проте важливо враховувати нюанси, коли lazy loading для оптимізації картинок сайту застосовувати недоцільно. Приміром, цей параметр не потрібен для візуального контенту у верхній частині вебсторінки, оскільки він не буде відтворюватися повністю під час її відкриття. Для верхніх важливих банерів краще використовувати атрибути preload (попереднє завантаження) або fetch priority, що визначає пріоритет відображення.

Використання CDN для прискорення завантаження медіаконтенту

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

Підключення CDN – це ефективна оптимізація зображень для вебсторінок, оскільки ця мережа відкриває широкі можливості:

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

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

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

• srcset перераховує браузеру можливі варіанти відображення ширини картинки в пікселях;
• sizes разом із браузером вибирає відповідну версію ширини залежно від розміру екрана пристрою.

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