Everyone wants sharp images when they post their photographs online. After all, who wants to look at a blurry photograph? (Unless it’s intentional, of course). What many people don’t realize, however, is that displaying your images incorrectly in HTML can have a big negative impact on image quality.
Here is the main rule of thumb you should always remember: never, ever do image resizing using HTML.
For example, lets say I have the following 620px photograph:
The image is pretty sharp right? Now, lets say I want to display the same image as a 500px wide photo. The wrong way to do this would be to change the width=”620″ attribute in HTML to width=”500″. Here’s what would result if I did the resizing this way through HTML:
That’s the exact same image file. I simply copy-and-pasted the HTML, and changed the width from 620 to 500. This means the browser actually loaded the same 620px image, and then reprocessed it to display a 500px image to the viewer. Notice how the photograph instantly loses much of the sharpness it had when displayed in its actual dimensions.
To further illustrate my point, here is the same photo displayed at 500px. However, instead of telling HTML to shrink the large version, I used Photoshop to resize it down to 500px.
You can hover your mouse over this last image to compare it to the browser-resized version. If you’re using a browser that renders it correctly, try hovering over this link to see how other less-capable browsers render the same image (you might have to wait a couple seconds for the image to load). That’s a pretty big difference, huh?
The lesson to be learned is that you should always display your images in their exact dimensions. Even a single pixel difference can cause the photograph to become noticeably more blurry in most browsers.
Finally, another reason why you shouldn’t leave resizing to your browser is that the original, full-sized image is loaded anyway, regardless of what size you’re displaying the image at. This means that if you have a large, 1 megabyte, 1024×682 photograph that you’re displaying at 500px in width, the whole 1 megabyte image is downloaded by the visitor before the browser resizes it down to 500px.
Some of you might have thought that using larger, higher-resolution photographs and having them resized in HTML produces higher quality images, since there’s more information or detail in the file. It doesn’t. For best image quality and fastest loading time for your visitors, always resize your images to the desired size prior to uploading!
Update: I’ve added a second link under the mouse-hover comparison for those who are using more capable browsers. If you don’t see any difference in hovering over the image, try hovering over the new link to see how other browsers render the image.
Update 2: Just for your info: This doesn’t apply to uploading full-sized images to photo sharing services like Flickr or SmugMug. These services take your large resolution photograph, and reprocess it into multiple images of various sizes. Thus, when you’re viewing the 500px image on Flickr, it’s actually a 500px image that Flickr resized and sharpened using your original large image.