Doing it with style
[1] px image 240px x 80% (18KB)
[2] em image 19.8em wide
using image 240px x 80% (18KB).
[3] em image 19.8em wide
using image 240px x 100% (49KB).
[4] em image 19.8em wide
using image 360px x 80% (49KB).
[5] em image 19.8em wide
resized, using Adobe Photo Deluxe, from 240px to 480px wide (43KB)
[6] em image 19.8em wide
using image 480px x 50% (37KB).
[7] em image 19.8em wide
using image 480px x 80% (58KB).
There has been some talk recently about the best method of retaining image quality when using em sizes, some favour having the best quality image at the default size and letting it go 'chunky' as it gets bigger, whereas others favour using a larger image that will improve in quality as it's size increases.
The series of images above show the enlarging effects on different sizes and percentage quality images.
This web site has been designed using em sizes so will stay in shape at larger text sizes. Just select the size you want and see how each image performs.
Image [5] could be useful when you do not have a larger image available. Paint programs make a better job of enlarging images than browsers and this one resizes to a smaller image without too much reduction in quality.
My take on this is that if you have taken the trouble to design your web site with accessibility in mind then you are expecting visitors to resize your pages, so why not give them a decent quality image.
I would go for option [5] or [7] both of which do not look too bad at the default size (most browsers shrink images better than they enlarge them) and will enlarge to at least twice linear size without loss of quality. I would accept the extra download time as being a necessary requirement of an accessible web site. But this is only my opinion and I would not argue against anyone who has an alternative choice.
For a more colorful example see here another example
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.