😍 Адаптивные изображения мертвы! Атрибут sizes="auto"...

😍 Адаптивные изображения мертвы!

Атрибут 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 в США диктует необходимость постепенного улучшения или стратегии фоллбэков для размеров до достижения паритета.

@MikeBlazerX

⚠️ Закрытый канал: @MikeBlazerPRO