SuperOleg dev notes

Привет!

После релиза Next.js 13 было очень много интересных обсуждений, и одна из немногих фич, про которую я не слышал никакой критики - обновленный компонент next/image - https://nextjs.org/docs/api-reference/next/image.

Работать с изображениями в 2022 году действительно сложно, но и возможности у нас очень широкие.

По поводу сложности - когда мне понадобилось ознакомиться со всеми современными возможностями, в первую очередь это srcset и sizes, беглым поиском нашел около пяти гайдов, все подробные и с хорошей визуализацией (один из подробнейших - https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/), но даже изучив все я откровенно не разобрался во всех нюансах.

Но список возможностей впечатляет:

- Мы можем отдать пользователю изображение в оптимальном формате с помощью picture - форматы .webp и особенно .avif позволяют очень сильно уменьшить размер изображения
- Мы можем отдать оптимальное изображения для экранов разного размера и даже разной плотности пикселей с помощью srcset
- Самая сложная для меня часть, мы даже можем подсказать браузеру, на экране какого размера, какую часть этого экрана будет занимать изображение, с помощью sizes! Условно, на мобилках, весь экран, а на десктопе половину - это напрямую повлияет на выбор оптимального изображения из srcset
- Наконец-то, с очень хорошей браузерной поддержкой, мы можем легко объявить пропорции изображения передав атрибуты width и height или CSS свойство aspect-ratio. Т.е. больше никаких хаков с padding (https://css-tricks.com/aspect-ratio-boxes/), дополнительными невидимыми блоками, пустым svg изображением нужного размера (смотри исходники legacy next image компонента :) ).
Важный рецепт для хорошей метрики Cumulative Layout Shift.
- Адаптивная верстка стала проще, во многом благодаря aspect-ratio, object-position и object-fit
- Ленивая загрузка без сторонних либ с помощью атрибута loading="lazy"

Также есть ряд техник, как сделать placeholder изображение, например blur заглушка в base64, сгенерированная из исходной картинки.
Но не могу это отнести к развитию возможностей веба, кажется такие техники существуют уже давно, и зависят от инструментария сборки.

nextjs.org

Components: Image Component

Optimize Images in your Next.js Application using the built-in `next/image` Component.

👍7

www.tgoop.com/super_oleg_dev/61

638 viewsedited  Oct 28, 2022 at 17:29

Привет!

После релиза Next.js 13 было очень много интересных обсуждений, и одна из немногих фич, про которую я не слышал никакой критики - обновленный компонент next/image - https://nextjs.org/docs/api-reference/next/image.

Работать с изображениями в 2022 году действительно сложно, но и возможности у нас очень широкие.

По поводу сложности - когда мне понадобилось ознакомиться со всеми современными возможностями, в первую очередь это srcset и sizes, беглым поиском нашел около пяти гайдов, все подробные и с хорошей визуализацией (один из подробнейших - https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/), но даже изучив все я откровенно не разобрался во всех нюансах.

Но список возможностей впечатляет:

- Мы можем отдать пользователю изображение в оптимальном формате с помощью picture - форматы .webp и особенно .avif позволяют очень сильно уменьшить размер изображения
- Мы можем отдать оптимальное изображения для экранов разного размера и даже разной плотности пикселей с помощью srcset
- Самая сложная для меня часть, мы даже можем подсказать браузеру, на экране какого размера, какую часть этого экрана будет занимать изображение, с помощью sizes! Условно, на мобилках, весь экран, а на десктопе половину - это напрямую повлияет на выбор оптимального изображения из srcset
- Наконец-то, с очень хорошей браузерной поддержкой, мы можем легко объявить пропорции изображения передав атрибуты width и height или CSS свойство aspect-ratio. Т.е. больше никаких хаков с padding (https://css-tricks.com/aspect-ratio-boxes/), дополнительными невидимыми блоками, пустым svg изображением нужного размера (смотри исходники legacy next image компонента :) ).
Важный рецепт для хорошей метрики Cumulative Layout Shift.
- Адаптивная верстка стала проще, во многом благодаря aspect-ratio, object-position и object-fit
- Ленивая загрузка без сторонних либ с помощью атрибута loading="lazy"

Также есть ряд техник, как сделать placeholder изображение, например blur заглушка в base64, сгенерированная из исходной картинки.
Но не могу это отнести к развитию возможностей веба, кажется такие техники существуют уже давно, и зависят от инструментария сборки.

BY SuperOleg dev notes