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

Question

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

Интерактивное изображение вещь, расположен по адресу:

southernwindowdesign.com 

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

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

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

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

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

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

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

Answer 1

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

Вы должны использовать инструмент, например, панель Firebug net или HttpWatch, которая позволяет вам увидеть график загрузки ресурсов для оптимизации запросов, чтобы как можно скорее загрузились скользящие изображения дверей. Прочитайте this post on the Firebug net panel, чтобы убедиться, что вы используете версии, которые дают вам наиболее точное время.

Answer 2

Сделайте одно изображение подходящим для спрайтов? http://www.alistapart.com/articles/sprites/

Answer 3

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

Answer 4

Есть много, что вы можете сделать.

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

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

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

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

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

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