image resizing based upon the screen sizes

Question

I am using cfimage for image resizing and it is working well. my Question is i want to use the cfimage to resize the image based on screen size or i can use function where it should see if the screensize is smaller, use the smaller image else use larger image

some function which i can write once and do anywhere instead of doing it in all pages, i know one thing is server side and other is cf side but what if i send the viewport to the cfside , will it help or not

right now its working well but needed the update as to how can i build once and do in all

Answer 1

The " adaptive images " approach does exactly this. You can find a CFML (Lucee/ColdFusion) implementation at https://github.com/cfsimplicity/AdaptiveImages

Essentially it works as follows:

1. Javascript is used client-side to detect the screen resolution and store it in a cookie
2. URL rewriting is used server-side to pass image handling from the web server to the application server (ColdFusion/Lucee)
3. CF/Lucee uses AdaptiveImages to serve an optimally sized image according to the resolution detected in the cookie
4. AdaptiveImages automatically handles creating and caching the differently sized versions of each image depending on how its configured

Obviously there is a performance overhead but I've found it to be negligible and well worth the benefit in terms of reduced bandwidth.