Проблема с производительностью при загрузке картинок
Разрабатываю сайт для торговли, где нужно показывать примерно 2300 изображений размером 37x50 пикселей. Эти картинки отображаются дважды - в левой и правой колонках страницы. Использую jQuery для вставки изображений и данных после загрузки документа.
Текущая проблема: загрузка такого количества PNG файлов занимает слишком много времени и даже подвешивает современные версии Chrome.
Временное решение и его недостатки
Пока убрал картинки и показываю их только в динамической подсказке при наведении. Работает быстро, но пользователи недовольны внешним видом.
Возможные варианты решения
Рассматриваю несколько подходов:
- Конвертация в JPEG с уменьшением качества
- Объединение в спрайт - создать одно большое изображение, загрузить его и отрисовать 4600 canvas элементов, используя координаты из массива типа
pictureData["item123"] = { posX: 0, posY: 40 }
- Base64 кодирование - преобразовать все картинки в base64, сохранить в массив
pictureData["item123"] = "base64string"
и рендерить через canvas
Дополнительные условия
У каждого из 2300 изображений есть три версии: маленькая, средняя и большая. На странице одновременно показываются только маленькие версии (37x40).
Какой подход будет наиболее эффективным для решения данной задачи?