Как загружать изображения низкого качества в первую очередь для более быстрой загрузки веб-сайта?

Question

Я работаю над веб-приложением Asp.net MVC3. У меня есть одна страница, на которой appx. 100 изображений с несколькими размерами загружаются с общим приложением. размер 1,5 МБ.

Я буду работать над распространением этих 100 изображений на несколько имен хостов, чтобы ускорить загрузку позже. Но сейчас мне нужна ваша помощь для оптимизации скорости загрузки изображений. И я действительно не могу использовать Sprite для этих изображений.

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

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

Как они это делают?

Answer 1

Предположив Изображения в формате JPEG можно использовать переплетение, но я не уверен, что я беспокоить, я был бы более склонен обеспечивать изображения правильно оптимизированы и использовать правильное количество имен хостов для их загрузки.

Если вы хотите оптимизировать JPEG, jpegmini.com, вероятно, лучший оптимизатор нашего присутствия на данный момент.

Я бы оштрафовал изображения по нескольким именам хостов (выбор правильного номера будет забавным, я слышал, что шесть - это оптимальное решение для некоторых людей, но YMMV, и если вы используете keep-alive, это может быть плохо использовать так много доменов)

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

Целью должно быть постепенное отображение страницы, чтобы материал вверху видимый перед материалом под складкой.

Answer 2

Назад в день подключения, мы использовали свойство LOWSRC тега IMG, чтобы указать на невысокую версию GIF финального изображения. Вы все еще можете использовать его.

<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif"> 

См: http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479971/So-You-Want-LowSrc-Huh.htm