Over a million developers have joined DZone.

Resizeable Images (without losing quality!)

DZone's Guide to

Resizeable Images (without losing quality!)

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.


img.expand { width: 10em; }

Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it.

Here is the trick: make sure your starting image is larger than the default size. If the size your image is exactly the size as it is displayed on screen at the default text size, you are going to lose image quality as you size it up. But if your image is larger, it will be scaled down at the default size and have room to grow while maintaining resolution.


*Except, of course, IE <= v6 which will not resize font sizes set in pixels.
**Except, of course, really nice web browsers like the latest releases of Firefox and Opera.

Original article here.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}