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

Question

У меня есть веб-приложение, которое должно обслуживать большое количество небольших изображений на странице (до 100). Я могу использовать кэширование, чтобы уменьшить количество обращений к базе данных / бэкэнду, но заметное влияние оказывает то, что приходится делать так много отдельных запросов к самим изображениям, так как изображения требуют времени для запроса и рендеринга, особенно на медленных соединениях.

Какие существуют хорошие практики для размещения нескольких изображений на странице? Мне известно об использовании CDN (например, S3 + Cloudfront), чтобы уменьшить узкие места в http-запросах и обслуживать контент из более близкого географического местоположения, а также потенциально загружать изображения / контент через Ajax только после того, как они попадут в поле зрения пользователя в браузере., Существуют ли другие методы, которые могут обеспечить значительный прирост производительности для страниц с большим количеством изображений? Неважно, относятся ли они к аппаратному обеспечению, интерфейсу или что-то еще.

Благодарю.

Answer 1

Загрузка 100 изображений за один запрос страницы увеличивает время загрузки страницы, так как каждое изображение требует времени для загрузки в браузере.

Простая техника заключается в загрузке только одного изображения по умолчанию. Это означает, что источником каждого изображения 100 должно быть общее изображение по умолчанию, и только одно изображение не займет много времени для загрузки.

когда страница загружает все свое содержимое, попробуйте загрузить каждое изображение с помощью jQuery.

используйте плагин lazyload jQuery для загрузки всех изображений после загрузки страницы.

как это

<img class="lazy" src="default.jpg" data-original="img1.jpg" >
<img class="lazy" src="default.jpg" data-original="img2.jpg" >
<img class="lazy" src="default.jpg" data-original="img3.jpg" >
.......
<img class="lazy" src="default.jpg" data-original="img100.jpg">

и в скрипте используйте следующий код

$(document).ready(function(){
  $("img.lazy").lazyload();
});

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

надеюсь, это поможет вам.

Answer 2

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

У Google также есть довольно глубокая статья о том, как они реализовали "Instant Previews", которая покрывает некоторые из оптимизаций:

http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1

Answer 3

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

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

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

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