Как оптимизировать одновременную подгрузку 2000 картинок низкого качества?

Question

[midia21]

На php сайте проекта на котором работаю есть блок - спонсоры, в котором таблицей выводятся авы их всех. Их довольно много и поэтому подгружаются они рандомными островками, а время до полно показа всех изображений занимает около 2х минут. Сами авы довольно маленькие - 64x64 и в webp и скачиваются на сайт каждая по отдельности. Было бы интересно возможно ли в принципе добиться более менее быстрой подгрузки? Есть идеи на сервере предварительно клеить все авы в один спрайт а на фронте его нарезать (думаю больше всего времени уходит на большое количество http запросов). Есть ли какие то дургие "хаки" или остается только лишь просто оптимизировать транспортный уровень, улучшать сжатие и т.п.? Заранее спасибо.

Comments

[Dark_Dante]

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

[twobomb]

Зачем загружать их все? Загружай по 10 штук, кнопкой показать больше. Кому это нужно?

[Сергей delphinpro]

Сколько весит каждая картинка? Допустим ужато на максимум. Пусть три килобайта. Умножим на 2000, получим 6 мегабайт. Если сделать общий спрайт, то авки отобразятся только после полной загрузки этого шести-мегабайтного спрайта. Как вариант, можно клеить несколько спрайтов, допустим по три-четыре строки аватарок.

[Сергей delphinpro]

А еще количество запросов можно сократить до одного, запихнув все картинки прямо в html в виде base64. Но это увеличит объем загружаемых данных, как минимум на треть. Зато картинки будут отображены сразу при загрузке.
В общем экспериментировать надо, что выгоднее получается.

[Дмитрий Гаджиев]

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

[Slava Rozhnev]

http2

Answer 1

[ThunderCat]

Однозначно спрайты.
Во первых - поэксперементировать с форматом, если лого у вас в основном малоцветные - больше подойдет пнг, нежели вебп или жпег. Фотошоп позволяет достаточно эффективно оптимизировать картинку.
Во вторых - сумма байт от всех картинок скорее всего будет в разы больше одной большой, в силу алгоритмов сжатия, так как они работают эффективнее на большой картинке.
В третьих - "резать" на фронте ничего не надо, просто вставляете бэкграундом со смещением.
Как вариант для избегания пустых мест в этом блоке - скрыть его до загрузки спрайта. По загрузке сделать видимым.

Answer 2

[sooulq]

lazyload?

Comments

[midia21]

Спасибо, но на сколько я знаю lazyload - это когда изображения скачиваются не все сразу, а постепенно (например при скролле). В данном случае это не подходит т.к. блок с аватарками сразу весь на экране пользователя и отложенная загрузка этих 2000 картинок будет заметна (эффект островков).