Главная » Архив меток: Адаптивные изображения

Архив меток: Адаптивные изображения

Как загрузить адаптивные изображения с imagesize и imagesrcset

От автора: сегодня я прочитал статью Адди Османи «Более быстрая предварительная загрузка поздно обнаруженных Hero-изображений». Это хороший обзор способов предварительной загрузки ресурсов, если вы хотите настроить и улучшить поведение загрузки браузера. Крутая вещь в этой статье: я обнаружил недавно добавленную функцию веб-платформы, которая помогает ускорить загрузку адаптивных изображений. Предположим, у вас на странице есть следующее адаптивное изображение. <img srcset="image-400.jpg 400w, ...

Читать далее »

Гибкие изображения в макетах с изменяющимися пропорциями

От автора: создать гибкие изображения, когда они находятся в макете, в наше время достаточно просто. Однако в более сложных интерфейсах нам часто приходится размещать изображения внутри адаптивных элементов, таких как эта карточка ниже. Пока давайте предположим, что это изображение не является семантическим содержимым, а лишь украшением. Это подходящее использование для фонового изображения. И поскольку в этом контексте изображение содержит объект, ...

Читать далее »

Руководство по синтаксису адаптивных изображений в HTML

От автора: это руководство по синтаксису HTML для адаптивных изображений (и немного CSS). Синтаксис адаптивных изображений — это обслуживание одного изображения из нескольких вариантов в зависимости от правил и обстоятельств. Есть две формы адаптивных изображений, и они предназначены для двух разных вещей. Если ваша единственная цель — увеличение производительности, тогда вам нужно… <img srcset="" src="" alt="" > Использование адаптивных изображений ...

Читать далее »

Адаптивные изображения простым способом

От автора: эта статья посвящена наиболее распространенному варианту использования адаптивного изображения: переключению разрешения. Спецификация адаптивных изображений является фантастической и охватывает множество вариантов использования, но, по моему опыту, в большинстве случаев вам понадобится понять только один из них: предоставление копии одного и того же изображения разного размера в зависимости от ширины области просмотра пользователя. Мы называем это переключение разрешения, и вы ...

Читать далее »