😍 Адаптивные изображения мертвы!
Атрибут sizes="auto" теперь поддерживается во всех основных браузерах 👇
Мэт Маркиз (человек, который возглавлял группу, вообще подарившую нам адаптивные изображения) только что написал об этом на Piccalilli, пишет Дэн Нечу.
Это стоит вашего времени.
Вот основные тезисы:
1️⃣ В течение 14 лет мы писали что-то вроде sizes="(min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), 80px".
Никто не может писать такое вручную.
2️⃣ Добавьте loading="lazy" и sizes="auto", и браузер сам во всем разберется.
К моменту запроса ленивой картинки он уже знает ее отрисованный размер, поэтому сам выбирает правильный исходник.
3️⃣ Синтаксис полностью обратно совместим.
Браузеры, которые его поддерживают, используют auto и игнорируют остальное.
Браузеры, которые не поддерживают, игнорируют auto и возвращаются к описательному значению sizes.
4️⃣ Исключение — ваши hero-изображения.
Кандидаты на LCP не должны загружаться лениво, поэтому им по-прежнему нужно указывать реальный размер.
Но hero-изображения обычно и так близки к 100vw, что легко прописать.
Читайте полную статью https://piccalil.li/blog/the-end-of-responsive-images/
Сколько атрибутов sizes вы готовы удалить из своей кодовой базы?
Пять, пятьдесят или вы уже перешли на auto?
Инсайты комьюнити
— Атрибуты width и height остаются обязательным требованием для тега img наряду с sizes="auto" — неполная реализация без указания размерных метаданных приводит к неправильному выбору исходника.
— Подход с единой таблицей стилей на базе REM/EM предлагает альтернативу sizes="auto" для адаптивного масштабирования — независимый способ реализовать адаптивность без синтаксиса относительных размеров, не привязанный к платформе.
— Автоматическая генерация миниатюр в WordPress (152+ варианта на каждую загрузку) создает трения из-за несовместимости — инфраструктура CMS еще не адаптирована к модели sizes="auto", что требует ручной настройки исходников или переработки процессов на стороне сервера.
— Задержка внедрения в Safari (база Chrome 2024 года, пока ожидается в Safari) создает окно кроссбраузерной поддержки — 54% рынка мобильного Safari в США диктует необходимость постепенного улучшения или стратегии фоллбэков для размеров до достижения паритета.
#CWV #WebDev #Images
@MikeBlazerX
⚠️ Закрытый канал: @MikeBlazerPRO
Атрибут sizes="auto" теперь поддерживается во всех основных браузерах 👇
Мэт Маркиз (человек, который возглавлял группу, вообще подарившую нам адаптивные изображения) только что написал об этом на Piccalilli, пишет Дэн Нечу.
Это стоит вашего времени.
Вот основные тезисы:
1️⃣ В течение 14 лет мы писали что-то вроде sizes="(min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), 80px".
Никто не может писать такое вручную.
2️⃣ Добавьте loading="lazy" и sizes="auto", и браузер сам во всем разберется.
К моменту запроса ленивой картинки он уже знает ее отрисованный размер, поэтому сам выбирает правильный исходник.
3️⃣ Синтаксис полностью обратно совместим.
Браузеры, которые его поддерживают, используют auto и игнорируют остальное.
Браузеры, которые не поддерживают, игнорируют auto и возвращаются к описательному значению sizes.
4️⃣ Исключение — ваши hero-изображения.
Кандидаты на LCP не должны загружаться лениво, поэтому им по-прежнему нужно указывать реальный размер.
Но hero-изображения обычно и так близки к 100vw, что легко прописать.
Читайте полную статью https://piccalil.li/blog/the-end-of-responsive-images/
Сколько атрибутов sizes вы готовы удалить из своей кодовой базы?
Пять, пятьдесят или вы уже перешли на auto?
Инсайты комьюнити
— Атрибуты width и height остаются обязательным требованием для тега img наряду с sizes="auto" — неполная реализация без указания размерных метаданных приводит к неправильному выбору исходника.
— Подход с единой таблицей стилей на базе REM/EM предлагает альтернативу sizes="auto" для адаптивного масштабирования — независимый способ реализовать адаптивность без синтаксиса относительных размеров, не привязанный к платформе.
— Автоматическая генерация миниатюр в WordPress (152+ варианта на каждую загрузку) создает трения из-за несовместимости — инфраструктура CMS еще не адаптирована к модели sizes="auto", что требует ручной настройки исходников или переработки процессов на стороне сервера.
— Задержка внедрения в Safari (база Chrome 2024 года, пока ожидается в Safari) создает окно кроссбраузерной поддержки — 54% рынка мобильного Safari в США диктует необходимость постепенного улучшения или стратегии фоллбэков для размеров до достижения паритета.
#CWV #WebDev #Images
@MikeBlazerX
⚠️ Закрытый канал: @MikeBlazerPRO