[:en]Responsive images memory consumption optimization with HTML5 Canvas[:ru]Оптимизация памяти с помощью HTML5 Canvas при использовании отзывчивых картинок[:]
[:en]Responsive images are common citizens of web applications and very often they are a bit larger than we need for particular screen size. This raises unnecessary memory usage for mobile devices and other low resolution screens.
For example you have universal web app which works on desktops as well as on iPhones.
Problem is that iPhone is still forced to keep large desktop image in memory.
Solution
Most obvious way to fix this is to create few sets of images for different screen sizes however this is not easy to do – you will need additional files to support, styles to develop and bunch of time to spend. But it is not even the worst case. Sometimes you can not edit files at all. For example when talking to some kind of remote API and getting photos from there. Here CanvasImage is a game changer.
How it works?
- Call
CanvasImage.all()
- Library finds all img tags on page
- Replaces them with canvas tags of same size
- Draws images content to canvases reducing size to needed one
- Removes big images from memory
Memory consumption diagram
CanvasImage on GitHub
[:ru]Отзывчивые изображения повсеместно используются при разработке веб — приложений и страниц. Очень часто они имеют больший размер, чем нужно для текущего разрешения экрана.
Например у вас универсальное приложение которое работает на настольных компьютерах и телефонах.
Проблема в том что телефон грузит ту же картинку что и настольный компьютер тратя на это огромное количество памяти.
Решение
Самым очевидным решением было бы создание нескольких вариантов картинок и CSS, однако это потребует от вас дополнительной работы над каждой картинкой, а так же увеличение размера приложения. К тому же это абсолютно невозможно если картинки приходят от некоего удаленного API и вам неподвластны. CanvasImage оптимизирует на лету, освобождая память от больших, бесполезных изображений.
Как это работает?
- Вы вызываете
CanvasImage.all()
- Библиотека находит все изображения на странице
- Заменяет их тегами canvas того же размера
- Рисует изображения на канвасах отбрасывая данные не актуальные для текущего размера
- Удаляет большие изображения из памяти
Диаграмма использования памяти
CanvasImage на GitHub
[:]