Що таке оптимізація зображень?

19

Від автора: оптимізація зображень – один з найпростіших способів прискорити сайт та підвищити бали в 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. Ці теми варто обговорити більш докладно, але ми краще напишемо для цього окрему статтю.

А як ви оптимізуєте зображення?

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