Від автора: оптимізація зображень – один з найпростіших способів прискорити сайт та підвищити бали в PageSpeed і YSlow. Стиснені і великі зображення багато важать і змушують завантажувати користувачів непотрібні дані. Оптимізація зображень знижує загальну вагу сторінки, з-за чого сторінка вантажиться швидше.
Навіщо оптимізувати зображення?
Зображення сильно позначаються на загальній вазі сторінки (в порівнянні з HTML/CSS/JS). Де ви взяли зображення?
стоковий сайт?
камера?
мобільний пристрій?
пошуковик?
Дозвіл у більшої частини цих зображень дуже висока, і їх можна використовувати для друку. Деякі можуть бути зменшені для вебу, інші ж ні. Велика частина зображень не оптимально стиснута і містить додаткові дані, непотрібні користувачеві.
Здебільшого, ці зображення важать більше, ніж потрібно.
Що буде, якщо використовувати неоптимізовані зображення
Великі і стиснені зображення сильно уповільнюють завантаження сторінки. Ось що буде:
Великі і стиснені зображення довше завантажуються, масштабуються та рендеряться
Браузер запитує і завантажує зображення – 2400 х 1350 і 2.5 Мб!
Залежно від дизайну сайту HTML або CSS зменшують розмір зображення, щоб вона вписалася в область превью 300 х 169.
Браузер рендерить масштабированное зображення на сторінці.
Використовуючи неоптимизированное зображення, ви змусили користувачів завантажувати даних більше, ніж потрібно. Ось чому:
Потрібно було зображення 300 х 169, а ви використовували 2400 х 1350.
Зображення експортувалося в максимальній якості 12/100% — це рівень для друку.
… або ж зображення було взято безпосередньо з телефону/камери/інтернету, а отже, там можуть зберігатися метадані і колірні профілі, а якість може бути завищеними.
Якщо ці кроки повторюються для декількох зображень, то все накладається і призводить до уповільнення роботи веб-сторінки.
Що таке оптимізація зображень?
У практичних цілях ми зосередимося на проблемах, пов’язаних з розміром неоптимізованих зображень. Проте оптимізація зображень зачіпає і інші галузі (наприклад, перебудову в браузері).
Простіше кажучи, менше розмір файлу = менше час завантаження = швидше завантажується сторінка. Основні концепції оптимізації зображень зводяться до розмірів зображення (візуальний розмір, ширина і висота) і стиску (якість зображення і т. д.).
Дозвіл сильно впливає на розмір файлу
Зображення з великою роздільною здатністю важать більше. Якщо завантажувати зображення в максимальному розмірі для відображення, то браузеру не потрібно буде скачувати непотрібні дані і витрачати час на масштабування.
Стиснення
У найпростішому визначенні алгоритми стиснення з втратами шукають і зменшують надлишкові пікселі всередині зображення. Чим активніше ви будете, тим більше вырежется пікселів, що знизить якість.
Стиснені зображення зберігають всі дані про пікселях, а також виглядають чистіше і чіткіше – але і важать більше
Найпростіший приклад стиснення – операція «Експортувати для веб» в фотошопі. Необхідно вибрати якість експорту з найкращим співвідношенням ваги і якості.
Стиснені зображення гірше за якістю – помітні артефакти і втрата деталей і квітів
У цьому випадку ви виконуєте стиснення з втратою якості. Тобто чим менше вага файлу, тим менше якість зображення. Читайте докладніше про стиснення з втратами по посиланню.
Стиснення без втрат – метод, в якому якість зображення не змінюється, а дані, з яких складається зображення, більш ефективно і компактно організовуються, що призводить до зменшення ваги файлу.
Сучасні компресори зображень використовують просунуті алгоритми на основі як стиснення з втратами, так і без втрат, щоб стиснути зображення і знизити розмір файлу без втрати якості.
Ще більше оптимізації
Крім дозволу і стиснення оптимізація зображень включає в себе видалення зайвих даних, непотрібних користувачеві.
Користувачі не бачать метадані, тому їх потрібно вирізати
У файлі зображення є шари даних, невидимі звичайному користувачеві. До таких даних відносяться EXIF інформація про колірний профіль, а також дата/положення.
Якщо видалити ці дані, то залишаться тільки видимі пікселі – це реальні дані, видимі користувачеві – що зменшить вагу зображення.
Що буде, якщо використовувати оптимізовані зображення
Зменшені і стиснуті зображення швидше завантажуються і рендеряться
Браузер запитує і завантажує зображення – 300 х 169 і 68Кб!
HTML/CSS масштабування не потрібно, тому браузер рендерить зображення на сторінці.
В результаті зображення на сайті набагато швидше завантажуються і рендеряться.
«Робота з масштабовані зображеннями» і адаптивний веб
У вас є адаптивний дизайн, а GTmetrix радить «працювати з масштабовані зображеннями». І тут виникає конфлікт. Ви можете задатися питанням: «Як мені використовувати адаптивний дизайн, якщо я повинен працювати з масштабовані зображеннями? Не будуть мої зображення погано виглядати на певних брейкпоинтах?»
Адаптивний дизайн змінює розмір і масштабує зображення, тому неможливо використовувати зображення з тим розміром, що відображається на екрані, так як вьюпорт змінюється.
Під радою «працювати з масштабовані зображеннями» мається на увазі, що потрібно працювати з зображеннями, не сильно відрізняються від масштабу.
Тоді основне правило змінюється на «працювати з зображеннями на максимальному розмірі відображення в дизайні». Щоб зображення добре виглядали на ретина екранах, їх можна збільшити в два рази від максимального розміру.
В адаптивному дизайні теж доведеться масштабувати зображення
Так ви отримаєте максимальну гнучкість і адаптивний дизайн, а також оптимальну якість на дисплеях з високою щільністю пікселів. GTmetrix дозволяє збільшувати зображення в два рази відносно фонового на екрані перед вирахуванням очок (сторінки аналізувалися на вьюпорте 1024 х 768).
Також існує атрибут srcset, а також обробка адаптивних зображень в CMS. Ці теми варто обговорити більш докладно, але ми краще напишемо для цього окрему статтю.
А як ви оптимізуєте зображення?
Це пояснює керівництво повинно дати вам гарне розуміння базових концепцій оптимізації зображень. У наступних статтях ми покажемо вам, як правильно стискати і масштабувати зображення, щоб ви могли оптимізувати розмір сторінок на сайті.