Отзывчивый дизайн и размеры изображений

Question

В. Какой метод является наиболее эффективным с точки зрения времени загрузки и производительности изображений ...?

Сценарий 1.

ли загружать различный размер изображения с помощью медиа-запрос, как показано ниже:

/* Smartphone */ 
@media screen and (max-width: 320px) { 
    .img-page-1-img { 
     background: url('../images/img-page-1-img-117.jpg') no-repeat; 
     width: 117px; 
     height: 77px; 
    } 
} 
/* Desktop */ 
@media only screen and (min-width: 769px) { 
    .img-page-1-img { 
     background: url('../images/img-page-1-img-234.jpg') no-repeat; 
     width: 234px; 
     height: 154px; 
    } 
} 

ИЛИ ...

Сценарий 2.

Загрузите одно большое изображение и используйте CSS для «растягивания» и изменения размера, установив свойство max-width ..?

img { 
    max-width: 100%; 
} 

Спасибо ....

Answer 1

Возможно, еще более целесообразно и/или отзывчивым подход заключается в объединении обоих. Используйте второй img как запасной вариант и использовать медиа-запросы с resolution указать изображение:

img { ...low-res source } 

@media (min-resolution: 2dppx) { 
    img { ...hi-res source } 
} 

Агент, который понимает высокое разрешение может выбросить первый запрос и получать только привет-разрешение изображения; в худшем случае было бы два запроса. Все остальные получат только источник с низким разрешением.

resolution в настоящее время в W3 Candidate Recommendation

Answer 2

для адаптивного дизайна, нам нужно добавить это, чтобы получить исходное изображение для больших экранов

img { 
max-width: 100%; 
} 

и внутри СМИ запросов добавить как этот

@media screen and (max-width: 320px) { 
width:117px; 
} 

и не устанавливайте высоту. вы просто управляете изображением с родителем, установив

overflow: hidden; высота: 117px;

**

и лучше, чтобы избежать фоновых изображений в адаптивном дизайне, если вы помощью, если Вам потребуется от 4 до 5 изображений для каждого набора. Попробуйте использовать IMG тег

**

Answer 3

Ввод различных изображений в запросах медиа не будет работать, как некоторые браузеры просто поджать все активы (даже те, которые не подходят для текущего видового экрана).

См. http://www.nealgrosskopf.com/tech/thread.php?pid=73 для приятного обзора.

Я бы выбрал div с атрибутами данных, которые содержат ссылку на загружаемое изображение. Проверьте ширину окна (или используйте matchMedia) с javascript и создайте изображение на лету.

Для изображений, которые действительно важны (содержание/нужно индексировать), вы можете сначала добавить небольшую версию и заменить ее версией с высоким разрешением, если окно достаточно широкое (или медиа-запрос сопоставляется с помощью matchmedia).