Адаптивные изображения позволяют браузеру выбрать лучшее изображение для устройства — экономя пропускную способность на телефонах и предоставляя резкие изображения на экранах с высоким DPI.
srcset + sizes — одно изображение, разные разрешения
html
Адаптивные изображения позволяют браузеру выбрать лучшее изображение для устройства — экономя пропускную способность на телефонах и предоставляя резкие изображения на экранах с высоким DPI.
srcset перечисляет изображения-кандидаты с их внутренней шириной (400w = ширина 400px).sizes сообщает браузеру, какой ширины будет отображаться изображение при различных точках останова (здесь: полная ширина области просмотра ниже 600px, иначе половина).sizes + плотность пикселей устройства, чтобы выбрать наименьшее изображение, которое все еще выглядит резко — перед загрузкой чего-либо.Телефон может выбрать small.jpg; ноутбук Retina, отображающий его при ширине 50%, может выбрать large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Браузер использует первый <source>, который он поддерживает/соответствует. Используйте <picture>, если вам нужны разные форматы (подача AVIF/WebP с fallback JPEG) или разный обрез для каждого размера экрана (художественное направление) — то, что один srcset не может сделать.
srcset + sizes.<picture>.Предоставление изображений правильного размера в современном формате — одна из самых больших побед производительности в Интернете — это резко снижает использование мобильных данных и улучшает Largest Contentful Paint.
Эти встроенные инструменты позволяют браузеру автоматически сделать оптимальный выбор с корректными fallback для более старых браузеров.