Оптимизация времени загрузки изображения. (думая по-другому)

Question

Я создал интерактивную картинку ... но загрузка занимает немного больше времени.

Интерактивное изображение находится по адресу:

southernwindowdesign.com

Используется 5 изображений для перехода по каждому состоянию (путем нажатия и перетаскивания). Я хочу сохранить изображения в высоком качестве; поэтому, любое дальнейшее сжатие в формате jpeg отсутствует (включая punypng и smush.it).

Есть идеи по сокращению времени загрузки? Я готов рискнуть использовать URI данных, холст, сжатие PNG (круто) и т. Д.

Любые идеи или указатели вообще будут полезны.

UPDATE: Спасибо всем, кто дал совет, если я воспользовался советом, который вы дали, я дал вам один плюс. Я установил еще один статический поддомен (s2), который должен распространяться в течение следующих нескольких часов или около того. Позже сегодня я, вероятно, переключу некоторые изображения на этот новый поддомен. Я также изменил порядок загрузки изображений и сделал некоторые другие оптимизации здесь и там.

Я надеялся, что кто-нибудь знает способ использовать избыточные пиксели в каждом изображении. Есть ли способ кодировать все изображения в один файл и считывать их, используя умный способ getImageData () холста javascript?

Я попытался использовать метод getImageData для http://www.eswd.com/southern/test.jpg, который из-за без потерь в формате jpeg (Качество = 100! = 100%) предлагает следующее: http://www.eswd.com/southern/test.aspx., что не годится. При сохранении изображения в формате PNG с использованием той же техники размер файла был больше, чем в формате JPEG со всеми данными (без красной рамки).

Я подумываю попробовать поработать с .APNG и прочитать данные пикселей таким образом ... но поскольку формат находится на ранней стадии разработки, не похоже, что он вообще уменьшит размер файла ... и я не уверен, позволит ли canvas прочитать отдельные кадры PNG в анимации.

Answer 1

Загрузка всей страницы делает 40 запросов HTTP, включая около 20 запросов изображений для логотипов и таких, которые загружаются перед вашими изображениями. Спрайт эти 20 других изображений. Тогда образы скольжения дверей не загружаются до тех пор, пока не загрузится main.js. Этот файл занимает всего 1 КБ - вы, вероятно, не получите большой выгоды от его кэширования. Я думаю, вам следует попробовать вставить этот скрипт на странице, чтобы он быстрее загружал изображения, скользящие по двери.

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

Answer 2

Сделать одно изображение, которое вы используете в качестве спрайта? http://www.alistapart.com/articles/sprites/

Answer 3

Ты многое можешь сделать.

Для меня HTML сам по себе потребовалось около 7 секунд для загрузки в первый раз - около половины общего времени.

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

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

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

Кроме того, анимированный GIF-файл loading.gif загружается после step1.jpg в step5.jpg. Если вам это действительно нужно, сначала загрузите его.

Если это поможет, я написал целую главу в своей книге об этих типах оптимизации, в том числе о том, как контролировать порядок загрузки изображений и т. Д .: Сверхбыстрый ASP.NET .

Answer 4

Я искал несколько вариантов оптимизации содержимого изображения, но единственное, что соответствует вашим требованиям, это изображение базовых дверей, http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg Обратите внимание, что нижняя полоса закрыта на веб-странице. Это может быть обрезано. Это не сэкономит больше, чем несколько байтов.