Do you make these image mistakes with your Web site design?

Yes! Ninety-five percent of Web design is typography. That’s why that other five percent — images and video — is so important. If your design goes screwy with images or video, it’s like a turd floating on the Web page. How can you read the text with that turd floating in the sidebar?!

Since I began working with the Thesis theme, one thing has bothered me: the scaling of images in an em-based design. Along with that, I have one other note about effectively displaying images in your Web designs.

Of course, Thesis isn’t the only theme scaling images in an em-based design, but I’m going to use this as an example. Actually, other than two minor issues, I’m a huge fan of Thesis. Hey, not everything is perfect.

normal size image, not scaled
normal size image, not scaled

Here’s the problem: if you’re working with an em-based design and you’ve got images that are supposed to 100% span a column or header, then you need to also scale those images with an em-based formula, otherwise the images won’t span 100%. There’s no way around it.

Let’s look at this example from the Copyblogger sidebar. The right hand sidebar includes some image links that are scaled to the width of the column using ems. The images are 260 pixels wide, as you can see with the image to the right.

as it appears with em-based scaling

But, look at the image to the left, which is from a screen grab of the site in default size on Safari for Mac OS X. (The same thing happens to a lesser degree using Firefox for Mac OS X.) See the difference? That’s what I see every time I go to Copyblogger. Notice the quality degradation of the image, how the edges are blurry? That’s what happens when images are scaled using ems (or any relative measure for that matter).

How did they scale those sidebar images? Using this rule in the CSS:

 

li.widget_premium a img {
display: block;
width: 26em;
height: 12.5em;
background: #d4d2c3;
}

 

Hey, it’s not my site. They can do what they want, but I think because most Web sites are typographically intense, images that are used should have pop.

What are some other options besides scaling images relationally? You can go with a fixed width layout, then using images that don’t need scaling isn’t a problem. You might also try creating images without scaling and centering them in the column. The only problem is that there might be a lot of space around the images because they aren’t filling the column. Other than that, do you know any other solutions that don’t require em-based image scaling?

Don’t scale images with HTML

I have one last similar note about using images in your Web designs.

Believe it or not, people still use HTML to scale images instead of using an image editing program. At least a half dozen times a week I see HTML scaling of images on Web sites, which then slows down entire pages from loading quickly. You’ve seen what I’m talking about: the page is completely loaded except for some images that seem to be churning away, loading slowly from top to bottom.

I did this on purpose with the image to the right, which is really 1024 pixels wide, though using HTML it’s scaled down to 206 pixels wide using width="206" in the <img> tag (right mouse click and “view image” to see what I mean). The image might look fine, but it’s slowing down this page when it loads. Also, sometimes the image might not look so fine if you haven’t figured out the correct height/width ratio before doing your HTML scaling.

Those are just two issues I see with using images in Web design. Do you have any others? Please leave them in the comments for everybody to learn from.

Photo by thebudman84 and republished here under a Creative Commons license.

8 thoughts on “Do you make these image mistakes with your Web site design?

  1. EM based formula? Eh?

    You changed your browsers font sizes. With the defaults they look like this:

    Safari Mac: http://1serpent.com/tmp/copyblogger-safari-20100503-162750.png
    Firefox Mac: http://1serpent.com/tmp/copyblogger-firefox-20100503-163100.png

    They’re the same. Also, the source image is 260×125 which is what the size is set to in EMs in the CSS. There is no scaling going on here.

    Scaling is bad regardless of EMs or pixels so there’s no real problem with EMs.

    I don’t get the point of your post, sorry. :)

    1. Thanks for your comment, Danny.

      Em to pixel conversion: http://jontangerine.com/silo/css/pixels-to-ems/

      I don’t believe the default font sizes were changed (I know the zoom was set to default), web designers can’t depend on everyone running the same set up.

      So, for me there was scaling going on, sorry. In both Firefox and Safari for the Mac. I checked on my PC netbook, but the screen is so small I wouldn’t want to make any judgements.

      The point? Defining image size by ems is not consistent enough for me. Too many variables come into play to depend on an em-based scaling of images.

      Again, thanks for the input.

      1. Danny is correct—the images will display the proper size (along with the rest of the layout) if you leave the browser’s default text set to 16px.

        It IS true that you cannot count on users running the same set of variables on each browser, but with that in mind, consider this:

        If you’re using pixel-based image sizing and the user has set their font to display larger or smaller than the default, then you’re going to get one of two undesirable results: [1] the image is going to overflow the area in which it’s supposed to sit, or [2] the image is not going to fill the area that it’s supposed to fill.

        Either way, there’s no clear-cut “winning” on image sizing of this nature. No matter which system you decide to go with, you’re going to make some sort of compromise.

        Be that as it may, Thesis will support both em- and px-based layouts before the year is out :D

        1. Thanks for the comment, Chris.

          I’m going to have to disagree with you on one point: if people change their default font size it will ONLY change the font size of text and do nothing to images (as long as images are defined with pixels). However, in all modern browsers EVERYTHING will change in size when Alt/Cmd + is used because resizing of web pages (not default font sizes in preferences) is done with the zoom method.

  2. The table you linked doesn’t apply to Thesis layouts. Thesis sets font sizes so 1em = 10px (for layout use).

    We have 5 Macs here and 3 PCs and the copyblogger site and our latest project (built completely through EMs) look 100% the same regardless of OS or browser (tested in IE7/IE8, Firefox 3.5/3.6, Safari 4, Chrome 4).

    The only variable that comes into play here is changing the default browser font size (resolution, DPI etc. are irrelevant).

    Open Safari preferences and check the Appearance tab, the default font should be Times 16.

    1. I made the change in Safari to your suggestion. Little change. Almost none.

      And that proves my point: em-based design (specifically defining images with ems) is not consistent. That is unless designers start running around the world making sure site visitors are using the default font sizes. What a site looks like in a design shop is almost besides the point; what does it look like in the wild, under all kinds of crazy conditions.

      I am always stopping into internet cafes, libraries, using friends computers … any time I find a computer with an internet connection, I’m reviewing my sites. And sometimes it ain’t pretty!

  3. For me, the site/image matches up to Danny’s screenshots – the only way I can get the “distorted” version of the image is by zooming in (i.e., hitting Command +) a couple times. Then I hit Command 0 (zero) to reset the zoom to Actual Size and it’s all good again.

Leave a Reply