Источник идеи: Clown Car Technique: Solving Adaptive Images In Responsive Web Design
Автор: Estelle Weyl
Техника состоит в использовании SVG c Media Queries для загрузки на страницу изображений только нужного размера.
Чтобы увидеть пример в действии, поизменяйте размер окна браузера: при разных размерах окна картинка слева будет разной (всего три размера).
SVG вставляется через object. Внутри файла задаются стили, которые в зависимости от ширины внешнего контейнера загружают для всего SVG подходящее фоновое изображение.
Медиазапросы работают именно относительно размеров object, в котором находится SVG, а не всей страницы, таким образом, меняя размеры внешнего object можно через SVG получать разные картинки для разных разрешений. При этом каждое изображение будет загружено только если сработает соответствующее медиавыражение.
Примерный код:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 532 800"
preserveAspectRatio="xMidYMid meet">
<style>
svg {
background-size: content;
background-repeat: no-repeat;
}
@media screen and (max-width: 100px) {
svg {
background-image: url(small.jpg);
}
}
@media screen and (min-width: 101px) and (max-width: 300px) {
svg {
background-image: url(middle.jpg);
}
}
@media screen and (min-width: 301px) and (max-width: 700px) {
svg {
background-image: url(large.jpg);
}
}
</style>
</svg><object data="your.svg" type="image/svg+xml"></object>object также задаются через Media Queries:
@media screen and (max-width: 600px) {
OBJECT {
width: 100px;
height: 150px;
}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
OBJECT {
width: 200px;
height: 300px;
}
}
@media screen and (min-width: 801px) {
OBJECT {
width: 332px;
height: 500px;
}
}