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

Question

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

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

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

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

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

Answer 1

В прежние времена мы использовали свойство 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

Answer 2

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

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

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

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

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