Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 25 из 70 · 14 мин
srcset, sizes, picture и loading: каждому экрану — картинка подходящего размера и формата.
На телефоне фото огромное по весу, на ноутбуке — размытое. Как так?
Дай мне несколько версий — я выберу сам, под экран. Я умный, когда мне дают выбор 😎
srcset (x)1x и 2x для обычных и Retina-экранов.<img src="raf.jpg" srcset="raf.jpg 1x, raf@2x.jpg 2x" alt="Пенал">srcset (w) + sizessrcset с ширинами файлов, sizes — какой ширины картинка будет на странице.<img src="zal-800.jpg"
srcset="zal-400.jpg 400w, zal-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw" alt="Зал">sizessrcset с w: какую ширину займёт картинка при разных экранах.<img srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" src="a-800.jpg" alt="Зал"><picture>source с вариантами и обязательный img в конце.<picture>
<source type="image/avif" srcset="raf.avif">
<img src="raf.jpg" alt="Пенал">
</picture>mediasource (и link, style, meta): (max-width: 600px), (prefers-color-scheme: dark).<picture>
<source media="(max-width: 600px)" srcset="raf-square.jpg">
<img src="raf-wide.jpg" alt="Пенал">
</picture>loading="lazy"lazy!Добавь фото товара srcset с двумя файлами (cat-1x.jpg 1x и cat-2x.jpg 2x) и ленивую загрузку loading="lazy".
srcset есть версия 2x — пока нетsrcset есть версия 1x — пока нетОберни картинку в picture и добавь перед ней source с type="image/avif" и srcset="cat.avif".
source с типом AVIF внутри picture — пока нетsrcset="cat.avif" — пока нетimg остаётся последним — пока нетВыберите один ответ.
Что сообщает браузеру атрибут sizes?
Выберите один ответ.
Какой элемент обязательно должен быть внутри <picture>?
Выберите один ответ.
На какую картинку НЕ стоит ставить loading="lazy"?
Проверяем состояние обучения…