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

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

Оптимізація зображень для Веб – що слід знати.

Оптимізація зображень для веб стає чим раз важлівішим фактором для розробників та оптимізаторів сайтів. Нові можливості і формати дисплеїв ставлять нас перед складним вибором і постійним пошуком компромісів. Ретіна-дисплеї та інші революційні винаходи ставлять нові вимоги до зображень – а значить і нові рівні завдань розробникам веб-контенту. Швидкість завантаження зображень значимо впливає на СЕО всього сайту. Тому важливо правильно готувати зображення одразу, а не перегружати сайт додатковими модулями оптимізації.

Зміст публікації

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

Оптимізація зображень для веб - CSS - Retina | Horus267

 

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

Усунення та заміна зображень

Коротко:
  • Усуньте непотрібні(зайві) ресурси зображення
  • Використовуйте ефекти CSS3, де це можливо
  • Використовуйте веб-шрифти замість кодування тексту у зображеннях

Саме перше питання, яке ви повинні поставити собі, це те, чи дійсно зображення потрібне для досягнення ефекту, який ви наслідуєте. Хороший дизайн завжди простий і завжди забезпечить найкращу продуктивність. Якщо ви можете виключити ресурс зображення, який часто потребує великої кількості байтів щодо HTML, CSS, JavaScript та інших активів на сторінці, це завжди буде найкращою стратегією оптимізації. Тим не менш, добре розташоване зображення може також передавати більше інформації, ніж тисячу слів, тому вам слід знайти баланс у подачі вмісту сторінки. Інфографіки та прості піктограми легко сприймаються нашим мозком, а тому є бажаними при викладі матеріалу публікацій. Але ж вони і не потребують бітмапу, а значить навіть формат .png є надлишковим…

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

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

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

Типографіка завжди була важливою частиною гарного дизайну, брендингу та зручності читання, а веб-шрифти пропонують багато додаткових переваг: текст можна вибирати, можна шукати, збільшувати та друкувати в гарній якості. Зрештою, не слід забувати про бібліотеки Genericons та Fonts Awesome, без яких у сьогоднішніх інтернетрях, як без знаків на автомобільних дорогах 😉 …

Векторні чи Растрові зображення

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

Визначивши, що зображення насправді є оптимальним форматом для досягнення бажаного ефекту, наступним критичним вибором є вибір відповідного формату:

  • Векторна графіка використовує лінії, точки та багатокутники для зображення.
  • Растрова графіка являє собою зображення з кодуванням окремо значення кожного пікселя в прямокутній сітці.

Оптимізація зображень для веб - Вектор - Растр | Horus267

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

Проте, векторні формати не є доречними, коли відображається складна сцена (наприклад, фотографія): розмір SVG-розмітки для опису всіх форм може бути надзвичайно складним(важким), і результат може не виглядати “фотореалістичним”. У цьому випадку ви повинні використовувати формат растрового зображення, такий як GIF, PNG, JPEG або один з більш нових форматів, таких як JPEG-XR та WebP.

Як на мене, самим оптимальним все ще залишається PNG. Особливо після компресії в сервісах, на зразок TinyPNG

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

Особливості екранів високої роздільної здатності

Коротко:
  • Екрани високої роздільної здатності (HiDPI) містять кілька пікселів пристрою на піксель CSS
  • Зображення з високою роздільною здатністю вимагають значно більшої кількості пікселів і байтів
  • Методи оптимізації зображень однакові незалежно від роздільної здатності

Коли ми говоримо про пікселі зображення, ми повинні розрізняти різні типи пікселів: пікселі CSS і пікселі пристрою. Один піксель CSS може містити кілька пікселів пристрою – наприклад, один піксель CSS може відповідати безпосередньо одному пікселю пристрою або може бути захищений пікселями кількох пристроїв. В чому справа? Що ж, чим більше пікселів пристрою, тим точніше деталі відображуваного вмісту на екрані.

Оптимізація зображень для веб - CSS пікселі - Horus267

Екрани High DPI (HiDPI) демонструють чудові результати, однак існує одна очевидна компромісна ситуація: наші можливості зображень потребують більш детальної інформації, щоб скористатися перевагами піксельності вищих пікселів пристрою. Хороша новина полягає в тому, що векторні зображення ідеально підходять для цього завдання, оскільки вони можуть бути зроблені в будь-якому дозволі (роздільній здатності) з чіткими результатами – ми можемо понести більше витрат на обробку, щоб відобразити більш точні деталі, але основний потенціал є таким самим і є незалежним від рішення.

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

Роздільна здатність екрану Всього пікселів Не компресований розмір
4 bytes/pixel
1x 100 x 100 = 10,000 40,000 bytes
2x 100 x 100 x 4 = 40,000 160,000 bytes
3x 100 x 100 x 9 = 90,000 360,000 bytes

Коли ми подвоюємо роздільну здатність фізичного екрану, загальна кількість пікселів збільшується в чотири рази: подвоюється кількість горизонтальних пікселів, удвічі – кількість вертикальних пікселів. Отже, екран “2x” не просто подвоюється, але збільшує кількість необхідних пікселів у чотири рази!

Отже, що це означає на практиці? Екрани високої роздільної здатності дозволяють нам передавати красиві зображення, що може стати відмінною особливістю продукту. Однак, екрани високої роздільної здатності також вимагають зображень з високою роздільною здатністю: слід використовувати векторні зображення, коли воно є можливим, оскільки вони є незалежними від вирішення, і завжди дають чіткі результати, а якщо потрібен растровий образ, доставте та оптимізуйте кілька варіантів кожного зображення за допомогою методу Відповідності зображень (Responsive Images) з подальшим використанням служб CDN.

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

Коротко:
  • SVG – це XML-формат зображення
  • SVG-файли слід оптимізовувати, щоб зменшити їх розмір
  • Файли SVG повинні бути стиснуті за допомогою GZIP

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

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

Наведений вище приклад описує просту форму круга з чорним контуром та червоним фоном і експортується з Adobe Illustrator. Як ви можете зауважити, тут зосереджено багато метаданих, таких як інформація про шар, коментарі та простори імен XML, які часто не потрібні для відтворення об’єкта в браузері. В результаті, завжди рекомендується мінімізовувати ваші SVG-файли за допомогою додаткових інструментів, таких як svgo.

Річ у тому, що svgo зменшує розмір вищевказаного SVG-файлу, згенерованого Illustrator-ом на 58%, приймаючи його з 470 і скорочує його до 199 байт. Крім того, оскільки SVG – це XML-формат, ми також можемо застосувати стиснення GZIP для зменшення його розміру – переконайтеся, що ваш сервер налаштований на стиснення ресурсів SVG!

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

Коротко:
  • Растрове зображення – це сітка пікселів
  • Кожен піксель кодує інформацію про кольори та прозорість
  • Компресори зображення використовують різні методи для зменшення кількості необхідних бітів на піксель, щоб зменшити розмір файлу зображення

Растрове зображення* – це просто 2-мірна сітка окремих пікселів – наприклад, зображення 100×100 пікселів – це послідовність із 10 000 пікселів. У свою чергу, кожен піксель зберігає значення «RGBA»: (R) червоний канал, (G) зелений канал, (B) синій канал і (A) альфа (прозорість) канал.

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

Внутрішньо браузер виділяє 256 значень (відтінків) для кожного каналу, який перекладає до 8 біт на канал (2 ^ 8 = 256) і 4 байти на піксель (4 канали x 8 біт = 32 біта = 4 байти). В результаті, якщо ми знаємо розміри сітки, ми можемо легко обчислити розмір файлу:

  • 100 x 100 пікселів складається з 10 000 пікселів
  • 10 000 пікселів x 4 байти = 40 000 байт
  • 40 000 байт / 1024 = 39 КБ

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

 

Розміри Всього пікселів Розмір файлу
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

39 Кб для зображення із роздільною здатністю 100×100 пікселів, можливо, не виглядає ресурсоємким, але розмір файлів швидко вибухає для збільшення зображень і робить активацію зображень як повільними, так і дорогими для завантаження. На щастя, те, що описано до цих пір, це «нескомпресований» формат зображення. Що необхідно зробити, щоб зменшити розмір файлу зображення?

Одна проста стратегія полягає в тому, щоб зменшити «бітну глибину» зображення від 8 біт на канал до меншої колірної палітри: 8 біт на канал дає нам 256 значень на канал і 16 777 216 (256 ^ 3) кольорів в цілому. Що робити, якщо ми зменшили палітру до 256 кольорів? Тоді нам потрібні всього 8 біт в цілому для каналів RGB і одразу збережемо два байти на піксель – це 50% економія стиснення над нашими оригінальними 4 байтами у форматі пікселів!

 

Примітка: зліва направо (PNG): 32-розрядна (16М кольорів), 7-бітний (128 кольорів), 5-бітний (32 кольори). Комплексні сцени із поступовими кольоровими переходами (градієнти, небо та ін.) вимагають більшої кольорової палітри, щоб уникнути візуальних артефактів, таких як пікселізоване небо у 5-бітовому об’єкті. З іншого боку, якщо зображення використовує лише кілька кольорів, то велика палітра просто витрачає дорогі біти!

Далі, коли вже оптимізовано дані, що зберігаються в окремих пікселях, ми могли б розумніше розібратися і подивитися на сусідні пікселі: виявляється, багато зображень, і особливо фотографій, мають багато сусідніх пікселів із подібними кольорами, наприклад, небо, повторювані текстури тощо. Використовуючи цю інформацію, на нашу користь, компресор може застосувати «дельта-кодування», де замість зберігання індивідуальних значень для кожного пікселя ми можемо зберегти різницю між сусідніми пікселями. Тобто, якщо сусідні пікселі однакові, то дельта дорівнює нулю і нам потрібно лише зберегти один біт! Але чому ж на цьому зупинятися…

Людське око має окремий рівень чутливості до різних кольорів: ми можемо оптимізувати нашу колірну криву зменшивши або збільшивши палітру цих кольорів. Пікселі «Поруч» утворюють двомірну сітку, що означає, що кожен піксель має кілька сусідів: ми можемо використовувати цей факт для подальшого вдосконалення дельта-кодування. Замість того, щоб дивитися лише на найближчих сусідів для кожного пікселя, ми можемо переглянути більші блоки сусідніх пікселів і кодувати різні блоки з різними налаштуваннями. І так далі…

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

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

 

—————————– ПУБЛІКАЦІЯ В ПРОЦЕСІ ЗАВЕРШЕННЯ ——————–

пишу на перекурах між адмініструванням і написанням декількох сайтів 😉

Залишились питання?
Скористайтесь нагодою і залишіть коментар чи Ваше запитання
в Контактній формі нижче