skip to content
IX Web Hosting

EM images compared



text

[1] px image 240px x 80% (18KB)

text

[2] em image 19.8em wide
using image 240px x 80% (18KB).

text

[3] em image 19.8em wide
using image 240px x 100% (49KB).

text

[4] em image 19.8em wide
using image 360px x 80% (49KB).

text

[5] em image 19.8em wide
resized, using Adobe Photo Deluxe, from 240px to 480px wide (43KB)

text

[6] em image 19.8em wide
using image 480px x 50% (37KB).

text

[7] em image 19.8em wide
using image 480px x 80% (58KB).

Support CSS play


If every visitor made a £5 GBP donation each year then I could offer all my demos for FREE.

www.wix.com

CSS play recommend

PSD to HTMLSitegrinderFree, practical CSS menus, layouts, and examples

CSS play Recommend


Information

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




Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.



Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth