Mobile Friendly Website


Doing it with style

CSS DEMOSEM images compared

Date : Pre 2006

For all modern browsers


[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.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at} and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


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.


Facebook Twitter rss feed Facebook Fan Page