RWD (Responsive Web Design) is increasingly popular over past few years. One important problem faced by RWD is lack of a standardised solution to deliver resized images into multiple devices. We have wide range of device categories, screen resolutions, pixel densities and lack of bandwidth/connection detection methods, all made this process difficult. There is no simple silver bullet to solve this issue.
I’m using google picasa as my image host. I can resize images dynamically by setting width/height in the url.
Setting s320 will create image with width/Height (resize proportionally) 320px. We can also pass width or height. Setting w320 will create an image with width 320px or passing h320 will constrain height of dynamically created image to 320px. Now we have our server, which can provide us different images sizes upon request.
You can use your own server methods or other resources like src.sencha.io to resize images on the fly.
Using css fluid image technique scale image to viewpot. Get the device size and insert image using script.
1 2 3 4 5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
Paste it in your page header. This will set width of the screen into ‘cwResImg’ variable. You can set image breakpoints in this variable
cwBpArry = [1382, 992, 768, 480];
Replace images in HTML with.
1 2 3 4 5 6 7 8 9 10
It has two parts
1) noscript tag contains a standard image for fallback. If js is not supported, this image will show.
2) Script part
1 2 3
When page loads url will be like the following, if its a desktop with resolution more than 1382px
Performance and Bandwidth
After including this there is a noticeable performance improvement in iPhone waterfall view.