HTML/CSS: What should I use to define image height/width to make it resolution independent?

Question

I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.

However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)

UPDATE:

To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.

Dichloride

Anyone who gives you that advice doesn't know what an em is. – Panarabism

Unfortunately, images are likely to look pixelated if not displayed in their original dimensions. This is why images with relative dimensions are not in much use on the Internet in general. – Bobbitt

Answer 1

I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.

For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.

Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.

So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:

<img src="photo.jpg" style="width:300px; height:200px" />

Wagers

Answer 2

Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.

Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.

For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.

Luralurch

I'm not referring to page zoom ... I'm referring to scaling a web page because of display that have higher DPI. (In order to make my web page resolution independent). As such, can you please revise your answer. thanks – Dichloride

I'm not aware of any browser that will scale text based on DPI. (According to msdn.microsoft.com/en-us/library/cc849094%28VS.85%29.aspx IE8 can set a default page zoom based on DPI). – Luralurch

...and most system concepts of DPI are hopelessly incorrect if they are provided at all. – Executor

Answer 3

Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).

Urano

So, you're answer that on higher DPI - everyone in the world is S.O.L? – Dichloride

Well, not exactly. You have a choice, as you pointed out in your question. You can resize the images for these people (via em), and they will be pixelated, or you can leave them the same (via px) and they will not change with the text. If you really want to support the folks with high DPI, you can use high resolution images and they will not pixelate with em, but typically that bandwidth tradeoff and correlated higher page load time is not considered acceptable. – Urano

Answer 4

Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.

The solution that works in all browsers, is to set a default font-size in percent for the body element:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

http://w3schools.com/css/css_font.asp

You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.

Drifter

The article you posted is not specific to my question. Even if you use px for defining ALL size/height/width - web browsers are smart enough to scale appropriate. What I'm referring to is how to scale on higher DPI resolution displays – Dichloride

Answer 5

see the solution of this page

http://nickcowie.com/2005/elastic-images/

HTML

<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>

CSS

.widecolumn .imageholder {
width:51.5em;}

.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}

Superpower

I don't think you quite understand my question. The article you linked to discusses how to keep your web page "proportional". I'm searching for a way to make my web site "resolution-independent", which is not the same thing as proportional. With monitor/display coming out at 300+ DPI, web pages will looked extremely small unless the web-page is resolution-independent such that, the physical size of an image/font/etc on a 96 DPI display can be the same physical size as on a 300 DPI display. To accomplish such a feat, the web design needs to be resolution-independent, not just proporationl – Dichloride

@Dichloride - i only read your question title "What should I use to define image height/width to make it resolution independent?" – Superpower

Answer 6

It's not really possible to make a page resolution-independent when it comes to images.

You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.

You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.

This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.

Cleome

Answer 7

For retina devices you can also have a second image twice the size and add @2x to the file name... so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it [email protected] and retina devices will display that instead.

Gony