Возможно ли при запросе страницы сайта ,отдавать браузеру сразу все картинки в одном архиве?

Question

[SVM]

1) возможно ли при запросе страницы сайта ,отдавать браузеру сразу все картинки
одним архивом,чтобы они были распакованы на стороне клиента,?
2) чтобы закешировались и при повторном обращении к этой странице уже не скачивались ещё раз.

т.е.
есть html страницы ,которые содержат < 600 фото формата .jpg
сами фото не сильно тяжёлые,но их достаточно много

Answer 1

[Дмитрий Александров]

Варианты:
1) В целом можно такое провернуть самописными костылями.
2) Можно слепить их в 1 большой "атлас", т.е. просто 1 мегакартинка.
3) Можно сделать "on demand"(подгрузка по требованию), т.е. как только прокрутил страницу то подгрузить картинки которые он должен увидеть
4) Небольшой хак, всем необходимым картинкам делаются миниатюры, миниатюры лепятся в атлас, пользователь сразу видит картинки в плохом качестве но в фоне идет подгрузка в большом и заменяет миниатюры
5) Использовать CDN

Во всех случаях в хедерах передавать флаг на полное кэширование пользователю.

Comments

[SVM]

1)"провернуть самописными костылями." - не совсем представляю как,поэтому и задал вопрос,
где можно подсмотреть пример реализации такого костыля?
2)не плохой вариант,но моих мозгов не хватит чтобы автоматизировать процесс создания/конвертации. (смотри сноску. * )
3)вообще не вариант ,т.к. изначально от этого и избавлялся.
4)наверное не вариант т.к. качество исходных картинок и так не высоко 400х300px ≈ 20кб,
+ увеличение запросов к серверу,
5)не такой масштаб ,чтобы с этим заморачиваться.

* всё это изобреталось ради/для того ,чтобы можно было быстро найти нужный coub.:
в своём аккаунте на coub.com использую 10-15 каналов (папок/тэгов)
чтобы было удобнее сортировать ролики по своим ассоциациям ,
на php сделал скрипт,который из полученого JSON формирует список нужного мне канала,
в виде

<div class="tooltip" title="Bliss">
<a href="http://coub.com/embed/b3f5y" onclick="return frame(this)">
<img src="coub.sotvm_files/small_1471537086_00015.jpg"></a>
<span class="tooltip">Bliss</span></div>

всё это сохраняю в статику/html
на onclick по картинке-ссылке происходит подгрузка медиаконтента в iframe.
да вот так нагляднее будет