"On demand image resizing" means resizing and caching your images as they're requested. Have you ever seen an image tag like this?
<img src="image_url" width="400" />
This tag is resizing the image in the browser with HTML. Why is this bad? Well, it's slow. And in the modern web era attention spans are short. You can't afford to have slow page load times.
Resizing your images as they're requested and caching the transformed image is much faster.
Easy! Simply add query parameters for width(w) and height(h). Add ?w=20&h=20 to the end of your image URL to resize to 20 by 20.
Here is an image saved to simple file upload storage at full resolution:
(click to open in new tab)
If we want this image to be served at only 50px wide - we would add ?w=50 to the end of the URL.
<img src="https://simple-file-upload76ax.files-simplefileupload.com/static/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbkpQIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6ba0119b4c09f9cb873ad1319f678dd2bbdde7a8/tunafish-mayonnaise-Fe9hvuoXny0-unsplash.jpg?w=50"/>
