— Pixels Commander

[ In English, На русском ]

Оптимизация памяти с помощью HTML5 Canvas при использовании отзывчивых картинок

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

Например у вас универсальное приложение которое работает на настольных компьютерах и телефонах.

Images difference explanation

Проблема в том что телефон грузит ту же картинку что и настольный компьютер тратя на это огромное количество памяти.

Решение

Самым очевидным решением было бы создание нескольких вариантов картинок и CSS, однако это потребует от вас дополнительной работы над каждой картинкой, а так же увеличение размера приложения. К тому же это абсолютно невозможно если картинки приходят от некоего удаленного API и вам неподвластны. CanvasImage оптимизирует на лету, освобождая память от больших, бесполезных изображений.

Как это работает?

  • Вы вызываете
    CanvasImage.all()
  • Библиотека находит все изображения на странице
  • Заменяет их тегами canvas того же размера
  • Рисует изображения на канвасах отбрасывая данные не актуальные для текущего размера
  • Удаляет большие изображения из памяти

Диаграмма использования памяти

CanvasImage на GitHub