Повышение производительности для реагирующих изображений

Question

У меня есть отзывчивая страница, на которой я пытаюсь оптимизировать время загрузки страницы. Я побежал YSlow расширения на странице и на из предложений вставляли ширины и высоты атрибутов изображения так, что он может сделать изображение до загрузки CSS: (пример)

<img src="example.png" width="50px" height="50px" /> 

Моего вопроса, есть ли способ реализовать что-то подобное, но таким образом, чтобы сохранить отзывчивые свойства изображений на странице?

Answer 1

Вы можете установить ширину и высоту изображений в файле CSS и настроить их с помощью мультимедийных запросов.

Из вас может установить изображение в качестве фона на его вышестоящего контейнера:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 

Фоновый подход очень хорошо работает с спрайтов, что это еще один способ ускорить вашу страницу.