🔥 Минус 7% от веса картинок всего за 4 символа в коде! (Кейс инженеров Medium)

Фронтендеры и Fullstack-разработчики, ловите свежайший лайфхак из веб-стандартов 2026 года, который уже внедрили Medium и WordPress.

В чем боль?
Картинки — самый тяжелый ассет на сайтах. Чтобы оптимизировать их под разные экраны, в HTML придумали атрибуты srcset и sizes. Но высчитывать размеры картинок через breakpoints в коде — это адский ручной труд:
sizes="(min-width: 1040px) 257px, (min-width: 360px) calc(28.64vw - 17px), 80px"
Писать такое вручную для каждого аватара или превью статьи невозможно.

🚀 Решение из 2026 года:
Недавно браузерные движки (WebKit и Gecko) добавили нативную поддержку значения auto для атрибута sizes у картинок с ленивой загрузкой (`loading="lazy"`).

Как код выглядел раньше:
<img src="img-480.jpg" srcset="img-480.jpg 480w, img-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" loading="lazy" />

Как это пишется теперь:
<img src="img-480.jpg" srcset="img-480.jpg 480w, img-800.jpg 800w" sizes="auto" loading="lazy" />

⚡ Почему это гениально:
1. Браузер сам смотрит на итоговый CSS-макет страницы и скачивает строго ту картинку из srcset, которая идеально подходит под текущие размеры экрана.
2. Полная обратная совместимость. Старые браузеры просто проигнорируют auto и не сломают верстку.

Инженеры Medium добавили «auto» на главную страницу и сразу снизили объем загружаемых данных изображений на 7%!

Проверьте свои React/Express проекты и добавьте sizes="auto" ко всем loading="lazy" картинкам. Это самый легкий performance-выигрыш года.

👉 Больше практических бэкенд и фронтенд фишек разбираем в нашем Fullstack Хранилище: https://t.me/devhotspot

#frontend #html #performance #devhotspot #webdev