От автора: сегодня я прочитал статью Адди Османи «Более быстрая предварительная загрузка поздно обнаруженных Hero-изображений». Это хороший обзор способов предварительной загрузки ресурсов, если вы хотите настроить и улучшить поведение загрузки браузера. Крутая вещь в этой статье: я обнаружил недавно добавленную функцию веб-платформы, которая помогает ускорить загрузку адаптивных изображений. Предположим, у вас на странице есть следующее адаптивное изображение. <img srcset="image-400.jpg 400w, ...
Читать далее »Архив меток: Адаптивные изображения
Гибкие изображения в макетах с изменяющимися пропорциями
От автора: создать гибкие изображения, когда они находятся в макете, в наше время достаточно просто. Однако в более сложных интерфейсах нам часто приходится размещать изображения внутри адаптивных элементов, таких как эта карточка ниже. Пока давайте предположим, что это изображение не является семантическим содержимым, а лишь украшением. Это подходящее использование для фонового изображения. И поскольку в этом контексте изображение содержит объект, ...
Читать далее »Руководство по синтаксису адаптивных изображений в HTML
От автора: это руководство по синтаксису HTML для адаптивных изображений (и немного CSS). Синтаксис адаптивных изображений — это обслуживание одного изображения из нескольких вариантов в зависимости от правил и обстоятельств. Есть две формы адаптивных изображений, и они предназначены для двух разных вещей. Если ваша единственная цель — увеличение производительности, тогда вам нужно… <img srcset="" src="" alt="" > Использование адаптивных изображений ...
Читать далее »Адаптивные изображения простым способом
От автора: эта статья посвящена наиболее распространенному варианту использования адаптивного изображения: переключению разрешения. Спецификация адаптивных изображений является фантастической и охватывает множество вариантов использования, но, по моему опыту, в большинстве случаев вам понадобится понять только один из них: предоставление копии одного и того же изображения разного размера в зависимости от ширины области просмотра пользователя. Мы называем это переключение разрешения, и вы ...
Читать далее »