Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 21 сентября 2026 г.
HTML:
HTML: Коллеги, признавайтесь: до сих пор отдаёте мобильным пользователям двухмегабайтную картинку? Проблема простая: браузер сам не угадает, что на телефоне нужна картинка поменьше, если вы ему не подсказали. И вот тут <picture> и srcset реально спасают. srcset — для случаев, когда меняется только размер/плотность. Например: <img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w" sizes="(max-width: 640px) 100vw, 50vw" alt="..."> 400w — это ширина картинки в пикселях. Браузер смотрит на вьюпорт, sizes и выбирает подходящий файл. А вот <picture> — уже когда нужен другой кроп под мобильный или разные форматы: <picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..."> </picture> Сначала современные форматы, потом фолбэк. Если браузер не понимает avif или webp, возьмёт jpg. Частая ошибка в проектах: srcset есть, а sizes забыли. Тогда браузер считает, что картинка занимает всю ширину экрана, и может взять файл крупнее, чем нужно. И ещё момент: не пихайте srcset ради галочки. Если картинка декоративная и грузится через CSS, лучше сначала подумать про background-image, media queries или ленивую загрузку. Главный профит — не «зелёный» Lighthouse, а реальные мегабайты пользователей и конверсия. Картинки до сих пор съедают большую часть веса страницы. А вы чаще решаете адаптивные картинки через <picture> или обходитесь srcset? Вот так. Идем кодить дальше! 🚀