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

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

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

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

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

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


optimization performance image-optimization
person Krunal    schedule 27.03.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

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

person Andy Davies    schedule 28.03.2012

arrow_upward
6
arrow_downward

Еще во времена коммутируемого доступа мы использовали свойство 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

person Diodeus - James MacFarlane    schedule 27.03.2012
comment
Так что на самом деле это два изображения, как насчет того, чтобы сделать это на одном изображении? Посмотрите на вопрос, я только что обновил его. - person Krunal; 27.03.2012
comment
Это называется чересстрочной разверткой, и вы должны сохранить все изображения в специальном формате, чтобы это работало. - person Diodeus - James MacFarlane; 27.03.2012