PetaPixel

Why You Should Never Let Browsers Resize Your Photos

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:

threecolors620

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:

threecolors620

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.

threecolors2

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.


 
Get the hottest photo stories delivered to your inbox.
Get a daily digest of the latest headlines:
  • benjamiesonphotography

    Are you using Internet Explorer to view the 'browser-resized' image? In Safari and FF, the images above (browser resized vs. PS resized) are near enough identical to the human eye.

    IE has had a natural inability to resize images itself since time began. (Not surprising – IE pretty much has a natural inability to do anything you'd expect a modern browser to do)

    The good news? A single line in your CSS files can resolve the issue, allowing all browsers to display a pretty good rendition if resized:

    img { -ms-interpolation-mode: bicubic; }

    Not ideal, but compared to the IE without using it, it's infinitely a vast improvement.

    Enjoy!

  • Name

    No, there isn't a pretty big difference. In fact the colours on your Photoshop-resized one are washed out, while the browser-resized one is as good as the 620px. I suppose not all browsers (or operating systems) are created equal.

  • http://www.petapixel.com Michael Zhang

    There is a noticeable difference in both Firefox and Safari for me, though it's a lot less noticeable in Safari…

    Also, from prior experience while running Photoblog.com, many Firefox users noticed blurriness in the latest version of Firefox when the width was off by a single pixel, while IE and chrome users didn't notice any difference.

    Seems like the problem really does vary a lot across browsers and maybe even OSes (though I'm not sure why that would be the case).

  • Muu

    thought i was going mad until I read the last comment, yes PS resized image is washed on a Mac 10.6 with Safari here.

  • http://www.pandu.ch/ Claudio Rimann

    yap, i also guess you're using internet explorer. here on os 10.6 with safari, both images look similar!
    Cheers

  • Ohf

    I see no significant difference.

  • http://www.petapixel.com Michael Zhang

    Thanks for the feedback everyone. I've added a new link under the mouseover image for those of you who have more capable browsers.

    It's basically a screenshot of what I see in my own browser to show you what I'm talking about.

  • http://www.petapixel.com Michael Zhang

    Could you post a link to a screenshot showing what you mean by washed out? Is it significantly washed out? Is it maybe a color profile issue?

  • JazMinderr

    Im using Flock and the photoshopresized image is sharper and not blurry but I agree its not a major difference unless there was some specific detail on the photo you wanted to show. Still its a good tip

  • http://www.petapixel.com Michael Zhang

    I asked Muu for a screenshot a few comments later, but if you could post a screenshot of what you're see that'd be great :-)

  • hkoren

    “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”

    No, you didn't! The two resized images are the same 620px wide image. Practice what you preach man!

  • http://www.petapixel.com Michael Zhang

    If you're trying to right click the image and examine the source, it won't work. When your mouse hovers over that image, it turns the source of that image to the 620px version for the mouseover comparison. However, when your mouse isn't over the image, it displays the 500px comparison.

    You can examine the source code of the page to see this.

  • Muu

    Screen shots here – http://www.fcserver.co.uk/~tim/petapixel/

    RGB Values on the same pixel:
    90.2/54.1/11.8 Vs 90.2/51/5.9

  • hkoren

    Now I understand! But I think you could have used a much better example than this one, such as a line drawing of some sort which would expose the lack of proper anti-aliasing better.

  • http://www.petapixel.com Michael Zhang

    Interesting…

    So I'm seeing the same difference in other browsers as well. It's not a color profile issue, since both have the same color profile and I didn't change anything. Seems to have been introduced in Photoshop's resizing for some reason.

  • http://www.petapixel.com Michael Zhang

    Ah, good idea. Didn't think of using lines :-P

  • ssphillips

    If you look at the source code you'll see that he really did reference a different 500 px file. My browser (Chrome) makes it look like he's using the same file three times (which I assume is what you are also seeing in your browser, which means that either the source code for the mouseover effect is wrong, or that Chrome (and maybe other browsers) just doesn't know how to handle the code used….

  • Muu

    Could it be some kinda 'web sharpening' that PS employs (LR does have this on as standard when exporting), you can see from the zoom on the colo(u)r meter one has less contrast close up.

  • http://www.petapixel.com Michael Zhang

    =)

    I think every browser will make it seem as though the same file was used three times if you try to examine what file it is by right clicking. This just means it's working correctly, since for the mouseover comparisons, I'm using javascript to automatically change the source of the image from the 500px version to the 620px version. Thus, when you right click the image, you're seeing the image after javascript has changed the source file, so you would think the normal image (without your mouse over it) is also the same 620px file.

  • ssphillips

    That makes sense, but I don't actually see a change no matter what I do, so I'm not convinced. Regardless, it's a good article and your main point is absolutely correct…

  • joakimbergquist

    Michael: You should also concider what browser you are using, take a look at the difference from my blog (in swedish though) http://joakimbergquist.blogspot.com/2009/10/val

  • http://twitter.com/BecThomasPhoto BecThomas

    I use IE and see no difference between the photo's

  • joakimbergquist

    Not even if you enlarge them? I think there is a big difference in the firefox image…

  • commentor

    The two pics are identical in Firefox, and nothing happens when I mouseover the link :'(

  • http://www.petapixel.com Michael Zhang

    You might have to wait a second or two depending on your internet connection. Aside from that, make sure your Javascript is enabled.

  • joeholmes

    >> 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.

    I don't like Flickr's choices in sharpening. I prefer a 500 px image that I sharpened to my taste.

    That said, I have to admit I don't bother. I upload the larger image that I've prepared already for my photoblog…

  • http://www.petapixel.com Michael Zhang

    Yeah… Flickr does some pretty serious sharpening to your photos. Wrote about this in the past here: http://www.petapixel.com/2009/05/19/sharpening-

  • http://www.petapixel.com Michael Zhang

    Yeah… Flickr does some pretty serious sharpening to your photos. Wrote about this in the past here: http://www.petapixel.com/2009/05/19/sharpening-

  • Dom

    Hi! I just wanted to say that your CSS trick worked fantastically. I'm using images that resize to fit the width of the screen, so PS resizing was never an option. Where there's a will, there's a way…

  • Pingback: Free SEO Tip #165 – Make Your Site Faster With Optimized Images | Spork Marketing Blog

  • Oliver Foxley

    In dynamic projects you sometimes need resizing images (look at Facebook and the new Google images format for example). Yes it’s not ideal in terms of quality differences but that’s the web my friend. Find a browser or platform that renders everything perfectly the way I see it in Photoshop and you are worthy of a medal. Everything is a compromise between design, functionality, compatibility and usability. Nothing in life is any different. I certainly won’t be laying off elastic layouts just because some browsers, ahem…IE, are a bit retarded. And I agree with Ben Jamieson there is no difference on a webkit or gecko browser.

  • vectart

    I don’t see any difference at first image using Chrome 27 on Ubuntu.
    But when I’m using the hover link, I see it.

  • http://www.nickgilbert.com Nick Gilbert

    Presume this article is obsolete/incorrect now? I don’t see any any difference in any browser on my system and allowing the browser to resize large images down actually now seems to be the recommended method to support “Retina” display devices such as iPads and retina Macs.