20.06.2024

webp и отзывчивые картинки

Гуглевое.

https://developers.google.com/speed/webp/ - нафига webp. Формат, который рекомендуется для облегчения картинок. Тем не менее, требуецо оставлять fallback-вариант нормальный.
https://web.dev/serve-responsive-images/ - отзывчивые картинки. Предлагать каждой картинки несколько вариантов, чтоб браузер сам думал, какую под какой размер грузить. Как fallback-вариант предоставлять самую большую.

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

или

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element.

If the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Сконвертить папку разом

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

https://developers.google.com/speed/webp/docs/using - ынструменты для работы. По щастью конвертилки есть в моем дебиане. Нокак я поняла, эти картиночке ничо моё, кроме браузеров, не видит, никакие графредакторы. Из файлов пакета webp в дебиане - инструменты командной строки и маны.

encoder and decoder applications, cwebp and dwebp respectively, to showcase the available functionalities of WebP.

/usr/bin/cwebp
/usr/bin/dwebp
/usr/bin/gif2webp
/usr/bin/img2webp
/usr/bin/vwebp
/usr/bin/webpinfo
/usr/bin/webpmux
/usr/share/man/man1/cwebp.1.gz
/usr/share/man/man1/dwebp.1.gz
/usr/share/man/man1/gif2webp.1.gz
/usr/share/man/man1/img2webp.1.gz
/usr/share/man/man1/vwebp.1.gz
/usr/share/man/man1/webpinfo.1.gz
/usr/share/man/man1/webpmux.1.gz

https://habr.com/ru/companies/netologyru/articles/721972/ ышшо статья про это всё.

Все посты