Next-gen формати для зображень на вашому сайті

4 хв. читання

Невловимі технології

Один з викликів сучасного вебу — швидкість відображення контенту сторінки. Збільшення швидкості доступних каналів не встигає за зростаючою кількістю інформації, що хочеться передати користувачу. В арсеналі сучасного frontend розробника неймовірний набір технік та підходів для того, щоб сторінка «відображалася» швидко (або хоча б так здавалося). Браузери пропонують набори аналітики ефективності сайтів, а Addi Osmani підживлює ідеї про ефективність своїми дослідженнями та новими пропозиціями.

Не секрет, що найбільшу частину трафіку «зжирають» зображення. Якщо ви хоч раз запускали табу Audits в Chrome DevTools, то з великою ймовірністю бачили позначку, що ваші картинки можна оптимізувати, перегнавши в next-gen формати, і навіть наводять певні відсотки, які ви від цього виграєте. Але за посиланням, ви отримуєте лише опис того, як це круто, і перелік форматів. Як застосувати це знання на практиці невідомо. Тож розглянемо, що таке next-gen формати зображень та як скористатися цим на вашому сайті.

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

Next-gen formats — що це?

Окей, розберемося, що це за next-gen формати. Їх насправді небагато — цілих три.

  • Jpeg XR (.jpx, .wdp) — запропонований Microsoft, і за словами розробників, при 85%-якості майже не містить артефактів. Як можна здогадатися, підтримка доступна в Edge та IE11.

  • Jpeg2000 (.jp2) — малопоширений формат, що підтримується тільки в Safari на macOS та iOS. Головною причиною створення формату було бажання збільшити стиснення та зменшити кількість артефактів.

  • Webp (.webp) — формат, який розробили в Google в 2010 році. Як можна очікувати, має підтримку в Google Chrome, Opera, Samsung Internet та в інших менш поширених браузерах. До речі, підтримку цього формату вже взяли в розробку для Edge.

Підтримку можна узагальнити в таблиці:

Формат Chrome\Opera Firefox Safari Edge\IE11
Jpeg XR +
Jpeg 2000 +
Webp +

До речі, брат webp, формат для відео — webm, має поширення серед браузерів, але очікувати на підтримку на рівні з mp4, на мій погляд, не варто, хоча й шкода.

I ви, мабуть, помітили, що Firefox стоїть окремо від цієї тусовки з «супер»-картинками, і тому треба робити фолбеки для нього. Але, можливо, Firefox колись й почне підтримувати щось (робота над можливістю підтримки webp вже розпочата, але невідомо, коли закінчиться).

How to

Трохи розібравшись з описовою частиною, постає питання, а як це все застосувати на практиці. У мене пошук відповіді на це питання забрав достатньо багато часу, хоча рішення достатньо просте та лаконічне . Виявляється ситуація вирішується за допомогою тегу <picture>, що прийшов до нас разом з HTML5.

<picture>
  <source srcset="example.wdp" type="image/vnd.ms-photo"></source>
  <source srcset="example.jp2" type="image/jp2"></source>
  <source srcset="example.webp" type="image/webp"></source>
  <img src="example.jpg" alt="example image"/>
</picture>

Єдиним мінусом цього коду є відсутність кросбраузерної підтримки тегу picture. Проте вам завжди доступний поліфіл. Використання next-gen images в CSS описано в статті Using WebP Images (якщо коротко: використовуйте modernizr та трохи класичної магії каскаду).

Якщо у вас виникло питання: а як же отримати ці чудові формати? Я впевнений, що малоймовірно, що дизайнери скинуть щось подібне, якщо їх не попросити. Почати ваше ознайомлення пропоную зі статей (Converting Images To WebP та Automating image optimization) Як один з варіантів там пропонують використовувати сервіс Cloudinary (на мій погляд, зручно, але там можна отримати картинки лише в двох з трьох вище вказаних форматів: .webp та jpeg XR (.wdp)). Проте вам завжди залишаються доступні плагіни до Photoshop, node-модулі та термінальні утиліти.

Сподіваюся, що охопив основні моменти, що дозволять почати використати next-gen картинки у ваших проектах швидше та простіше. Have fun.

Трохи статей:

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: picture тег, picture source srcset, img picture