Оптимизация загрузки множества изображений в веб-приложении

Оффтоп javascript
1

Проблема с производительностью при загрузке картинок

Разрабатываю сайт для торговли, где нужно показывать примерно 2300 изображений размером 37x50 пикселей. Эти картинки отображаются дважды - в левой и правой колонках страницы. Использую jQuery для вставки изображений и данных после загрузки документа.

Текущая проблема: загрузка такого количества PNG файлов занимает слишком много времени и даже подвешивает современные версии Chrome.

Временное решение и его недостатки

Пока убрал картинки и показываю их только в динамической подсказке при наведении. Работает быстро, но пользователи недовольны внешним видом.

Возможные варианты решения

Рассматриваю несколько подходов:

  1. Конвертация в JPEG с уменьшением качества
  2. Объединение в спрайт - создать одно большое изображение, загрузить его и отрисовать 4600 canvas элементов, используя координаты из массива типа pictureData["item123"] = { posX: 0, posY: 40 }
  3. Base64 кодирование - преобразовать все картинки в base64, сохранить в массив pictureData["item123"] = "base64string" и рендерить через canvas

Дополнительные условия

У каждого из 2300 изображений есть три версии: маленькая, средняя и большая. На странице одновременно показываются только маленькие версии (37x40).

Какой подход будет наиболее эффективным для решения данной задачи?

2

Попробуйте WebP вместо PNG — он сокращает размер файла на 70-80% при той же качестве. Не забудьте про запасной вариант с PNG для старых браузеров. Также используйте виртуальный скроллинг, чтобы отображать только видимые элементы. У нас было около 3000 превью товаров, перешли на WebP и использовали Intersection Observer для ленивой загрузки, это решило все проблемы. Браузер перестал зависать, и загрузка ускорилась.

3

А что если попробовать svg иконки? Для таких размеров они идеальны - векторные, четкие на любом экране, легко стилизуются через css. Можно упаковать все в один svg спрайт и использовать через use. Правда зависит от ваших изображений - если это фото товаров, то не подойдет. Но если иконки или простые картинки, то точно стоит попробовать.

4

честно говоря, 4600 canvas элементов это перебор) у меня был похожий проект с каталогом товаров, только картинок поменьше. пробовал спрайты - работает отлично, но лучше не через canvas, а через css background-position. намного проще и быстрее рендерится. не загружай все сразу - используй lazy loading или виртуализацию. показывай только картинки в viewport, остальные подгружай при прокрутке. у меня скорость загрузки увеличилась в разы.