Выбор ответа Middle Адаптивность обновлено
srcset, sizes и picture
Вопрос
Нужно, чтобы телефон скачивал фото поменьше, а десктоп побольше, кадр один и тот же. Что подходит?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: <img srcset="... 400w, ... 800w, ... 1600w" sizes="...". Для одного и того же кадра в разных размерах хватает srcset с дескрипторами ширины и sizes: браузер сам выберет файл с учётом ширины слота и плотности экрана. <picture нужен для арт-дирекшна (другой кадр) или выбора формата, а здесь он…
Варианты ответа
<picture>с несколькими<source media>, это единственный способ<img srcset="... 400w, ... 800w, ... 1600w" sizes="...">правильный ответ- CSS
background-imageв медиазапросах вместо<img> - Загружать большую картинку и уменьшать через
width: 100%
Разбор
Для одного и того же кадра в разных размерах хватает srcset с дескрипторами ширины и sizes: браузер сам выберет файл с учётом ширины слота и плотности экрана. <picture> нужен для арт-дирекшна (другой кадр) или выбора формата, а здесь он избыточен и не единственный способ. Фон из CSS теряет alt и семантику контента. Уменьшение через CSS не экономит трафик: качается всё равно большой файл.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.