Responsive images memory consumption optimization with HTML5 Canvas
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
