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

1. Стандартний підхід
2. Нова вимога: кожному екрану зображення
3. А чи можна простіше?

Наша команда-партнер Artmisto

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

Стандартний підхід

Перед публікацією фотографії на сайті я зменшую її вага. Роблю це в графічному редакторі (Gimp + плагін «gimp-plugin-saveforweb») або сервісі Optimizilla .

приклад

оптимізовано в Gimp, 32,4 КБ
відкрив фото і зберіг для веб. настройки програми - за умовчанням

оптимізовано в Optimizilla, 20,5 КБ
настройки онлайн сервісу - за замовчуванням

Зменшили розмір фото - можна публікувати. У код html-сторінки додаємо такий рядок:

<Img src = "шлях до зображення" alt = "опис, що зображено" width = "ширина" height = "висота" />

Раніше цих дій було достатньо. Зараз немає. Назву три причини:

• Іноді оптимізовані фото на «ретине» виглядають погано → «ретине» потрібно пропонувати свої картинки.

• з'явився новий формат зображень - WebP , Який робить вага фото ще менше. Поки формат підтримується не всіма браузерами → для браузерів, які «бачать» WebP, слід пропонувати WebP, а іншим - інші формати.

• Щоб браузери в смартфонах не відволікалися на адаптацію картинок під розмір екрану, потрібно пропонувати картинки потрібного розміру відразу. Один розмір для смартфонів, інший - для планшетів, третій - для десктопів.

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

Нова вимога: кожному екрану зображення

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

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

Показувати різні зображення для різних ситуацій допоможе тег <picture>.

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

А ось як це працює:

<Picture>
<Source media = "(min-width: 650px)" srcset = "... kitten-large.png">
<Source media = "(min-width: 465px)" srcset = "... kitten-medium.png">
<Img src = "... kitten-small.png" alt = "a cute kitten">
</ Picture>

Атрибут srcset вказує шлях зображення для завантаження. Тег <source> і атрибут media вказують умови появи кожної з картинок. Якщо ширина екрану більше 650px, показується позіхає кіт, якщо від 465px до 650px - кіт сидить. Якщо екран менше 465px або якщо браузер не розпізнає тег <picture>, ви побачите сплячого кота.

У блозі Opera є 15 прикладів використання тега <picture> (На англ.). Я заглядаю туди як в шпаргалку по синтаксису: який код потрібен, щоб для ретини завантажувати зображення з високою роздільною здатністю, щоб показувати різні фото для різних екранів, щоб пропонувати WebP там, де браузери розпізнають цей формат, щоб всі ці умови вказати разом для одного зображення .

А чи можна простіше?

З тегом <picture> код картинки займає іноді більше 10 рядків, не кажучи вже про те, що потрібно вручну підготувати кілька варіантів зображення. Якщо писати 1-2 статті в місяць, це необтяжливо. А якщо у вас інтернет-магазин з тисячею найменувань і відповідною кількістю фотографій?

Одного разу я верстав фотогалерею в flexbox. Залежно від розміру екрана ширина фотографій могла займати будь-яке значення від 250px до 1200px. Цей діапазон я розбив на інтервали і для кожного підготував своє зображення зі своїм розміром і форматом. Великий обсяг ручної роботи + неідеальний результат (часто необхідна ширина картинки не збігалася з наявною, що засмучувало гугловський pagespeed insight) - все це змусило мене шукати інше рішення. І я його знайшов - Cloudinary .

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

Адреса фото:

//res.cloudinary.com/bartoshevich/image/upload/v1538423803/coin_original.jpg

Все, що потрібно, - це після upload / в адресі додати q_auto, f_auto /. Нова адреса:

//res.cloudinary.com/bartoshevich/image/upload/q_auto,f_auto/v1538423803/coin_original.jpg

На цьому робота по оптимізації картинки завершена. Сервіс автоматично змінить якість і формат зображення в залежності від екрану, на якому відкривають адресу картинки. Не потрібно готувати багато варіантів зображення, прописувати умови для «ретини» і WebP. Все це вже «зашито» в адресі. Код картинки знову вміщається в один рядок.

Нижче - оптимізована за допомогою Cloudinary фотографія монети. Якщо ви відкриєте статтю в різних браузерах (Firefox і Chrome) і збережіть фото, ви отримаєте фотографії різних форматів і ваги. У мене скачана з Chrome фотографія важить всього 10,9 КБ - майже в 10 разів менше оригіналу. Код ж - один рядок. Ні <picture>, <source>, media та ін.

Співробітники Cloudinary підготували Cookbook , Де описують можливості сервісу: що можна додати на адресу зображення і який результат отримати. Наприклад, можна поліпшити фотографію, якщо після upload / написати в адресі e_improve /. результат:

Іноді я не можу обходитися без тега <picture>. І якщо тег комбіную з Cloudinary, «пропускаючи» адреси зображень через сервіс, я використовую більше можливостей оптимізації при мінімальних зусиллях.