Уменьшить HTTP-запросы на 1000 изображений?

Question

Я знаю, что этот вопрос может показаться немного сумасшедшим, но я уверен, что, может быть, кто-то придумает умную идею:

Представьте, что у вас есть 1000 миниатюр изображений на одной странице HTML.

Размер изображения составляет около 5-10 КБ.

Есть ли способ загрузить все изображения за один запрос? Каким-то образом сжать все изображения в один файл ...

Или у вас есть другие предложения по теме?

Другие варианты, которые я уже знаю:

CSS спрайты

Ленивый груз

Установить заголовки Expire

Загрузка изображений под разными именами хоста

Answer 1

Есть только два других варианта, которые я могу придумать, учитывая вашу ситуацию:

1. Используйте протокол «data:» и выводите версию ваших эскизов в кодировке base64 прямо на HTML-страницу.Я бы не рекомендовал это, поскольку вы не можете затем кэшировать эти изображения в браузере пользователей.
2. Используйте веб-хранилище HTML5 для хранения всех изображений в виде записей с данными изображения в кодировке base64, хранящимися в виде больших двоичных объектов в столбце.Как только база данных будет загружена на компьютер пользователя, используйте Javascript для циклического просмотра всех записей и динамического создания миниатюр на странице, используя что-то вроде jQuery.С этой опцией вам нужно будет подождать, пока вся база данных не будет загружена в браузер конечных пользователей, и им потребуется довольно современный браузер.

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

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

Answer 2

Это делается с помощью так называемого спрайта CSS; одно изображение со всеми другими изображениями внутри него, с определенной частью, которая требуется в html, выбранной css.

См. Один учебник на http://css -tricks.com / css-sprites

Answer 3

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

Answer 4

Звучит так, будто вы хотите что-то вроде SPDY 'server push . Когда клиент запрашивает страницу HTML (или первое изображение), SPDY позволяет серверу передавать другие ресурсы, не ожидая дополнительных запросов.

Конечно, это все еще эксперимент.