Невловимі технології
Один з викликів сучасного вебу — швидкість відображення контенту сторінки. Збільшення швидкості доступних каналів не встигає за зростаючою кількістю інформації, що хочеться передати користувачу. В арсеналі сучасного 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.
Ще немає коментарів