How good is WordPress at resizing and resampling your images?

By Richard

A comment by Tellyworth in the forums telling me that WordPress.com resamples large photos that you upload and insert using the new “add an image” instead of just resizing them, prompted me to do a little test to see just how good WordPress was.

[Edit: I've discovered through some additional testing, after a comment on this post from Matt Mulleweg, that WordPress only resamples images when you select "medium" or "thumbnail" when you insert them into your posts or pages. If you select "full size" when you insert your images, all WordPress does is proportionally scale your images down (resize) and then they rely on the browser to render the resized image. This makes it far more important that you resize and resample your images in an image editing program before uploading them if you care at all about image quality.]

As was explained in this previous post, WordPress will resample/resize your images if you select “full size” when you insert an image into a post or page based on the maximum image width for your particular theme [and then they rely on the browser to process and display the resized image].

My first step was to take a raw camera image shot on my digital SLR and save it full sized (3872px x 2592px) as a medium quality JPG. I then uploaded it and inserted it into this post allowing WordPress to resample/resize it.

Next working off of the same raw image, I created a 450px wide image (the width that WordPress uses for this theme when you choose to insert an image “full sized”) using my image editing program and again saved it as a medium quality JPG, and inserted it into this post below the first one using the procedure I outlined in this previous post.

Then working off of the same raw image, I created an 800px wide image with my image editing program and inserted it into the post allowing WordPress to resample and resize it on the fly down to 450px wide.

The disclaimer: Since I was working off of a raw camera image, I had to use Photoshop for these examples and although Photoshop is considered the premier image editing tool, with a price to match ($649 USD retail), there are many image editing tools out there that will produce very nearly the same results for you. Photoshop is certainly not an option for everyone, but you can get virtually the same quality images out of Adobe’s consumer version of Photoshop, Adobe Photoshop Elements (Mac, Windows), for $99 USD retail. You can find better deals online though. Adobe has also introduced an online version of Photoshop, Adobe Photoshop Express (beta at the moment) which again will give you great results.

The first thing you will notice when you come to this page is that the top image (which was not resized prior to uploading) took quite a bit longer to load than the other two. That is because with the WordPress (and the browser) on the fly resample/resizing, it have to read and process the entire 900KB file before it can be displayed. The middle image is 136KB and the bottom image is 192KB – both considerably smaller.

You can see for yourself by comparing different areas of the images below that the WordPress “on the fly” resampling/resizing of my very large image upload (top image) is not nearly as good as a that which you can achieved with a good dedicated image editing program (middle image) [this is because the browser is being called on to render the downsized image]. The top image has far less detail and is much flatter in appearance than the middle image. Some key places to compare are the rock in the lower left hand corner and the yellow leaf laying on the green stalk in the center, as well as the green leaf laying in the ground litter in the left upper quadrant. A slight reduction in quality is expected when WordPress resizes/resamples an image since they are working off of a JPG to begin with, making what they display a second generation JPG. The middle image is a first generation JPG with no resizing or resampling done by WordPress.

Above: 3872 x 2592 image resized by WordPress to 450px wide

Above: pre-sized and resampled in image editing program to 450px wide

Above: WordPress resizing of an 800px wide image

If you want the image in your post to be linked to a larger version so that your readers can see it in more detail, then WordPress, or you, manually in the editor, are going to be resizing and/or resampling your image regardless, but you can certainly limit the amount of clarity and detail that will be lost by pre-sizing your images to fit a typical monitor before uploading them. As I said in this post, with the majority of people using a monitor resolution of 1024 x 768, an image size of 800 x 600 should fit cleanly in a maximized browser window at 1024 x 768 without your readers having to scroll around to see all of the image.

As you can see when comparing the bottom to the middle image, there is far less loss of detail than when comparing the top and middle image. Why? Because WordPress the bottom image only had to be reduced the bottom image size to 56% of the uploaded image size (800 wide to 450 wide), while the top image had to be reduce to 12% of the uploaded image size (3872 wide to 450 wide).

If you are particular about your images, pre-size and resample your images with a dedicated image editing program before you upload them.

Related posts:
Image editing and preparation tips part 1
Image editing and preparation tips part 2
More on inserting images full-sized at WordPress.com
Inserting images full-sized in the new WordPress.com
Images: Optimizing, Pre-Sizing and Resizing (with references to image editing programs)

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl :: TailRank

32 thoughts on “How good is WordPress at resizing and resampling your images?

  1. Pingback: WordPress Automatic Image Resizing | one cool site

  2. Pingback: OMG! My images are gone | one cool site

  3. Pingback: Cropper or Proper Image Preparation? | one cool site

  4. Unfortunately I found that your statement is NOT true: the free WordPress hosting applies a pre-set compression to ALL images you upload!!
    I have published several posts about different image types and their use in web design; in my post about jpegs [ http://webbeetle.wordpress.com/2009/12/29/image-types-and-their-compression-1-the-jpeg/ ] I inserted several jpg-files side-by-side with the attempt to show what difference compression can make to particular colours.
    All jpg files were made to the correct size and uploaded ‘full size’, but I applied less than 10% compression to the high quality files. On my post they show with a much higher compression!!!
    Eg. one photo, showing red chillies, was 18.613 bytes when I uploaded it, yet when I save it again from my blog it only has 16.934 bytes = that’s ~10% more compression than I had applied to this photo!

    • Hello there. The author of this post is not available at this time. This posts was published on May 3rd, 2008 and several changes have been made by wordpress.com staff, not only to the version of wordpress.com we are on now, but also to the image uploader.

      Since that time this same author has published other posts which can be found listed under “Images and Media” on this page http://onecoolsitebloggingtips.com/popular-posts/

      When Richard is available again (he has just moved off the continent) I will ask him to update this post. In the meanwhile, you ought to contact Staff and give them your feedback directly. http://en.support.wordpress.com/contact/

  5. Pingback: Waiting « Blog Archive « Shutter Clutter

  6. @tt, That’s what I did in the end. The solution was to strip out the image height and width code from the post using the html editor.

  7. @Jennifer,
    Richard is away for this next week. He may pick this up before then but he may not. Perhaps you should be contacting support. I’ll leave that for you to decide. :)

  8. Richard, coming back to this post quite late and am glad to have reread the information and the comments.

    As I mentioned above, on my Monotone blog, the images are being uploaded at 1024pixels on the long side and inserted into the post at “full size” as instructed, but there are still display issues. I wrote support about one of my entries, “Cat Nap”, which displays in FF at the uploaded size and breaks out of the theme. After reading the comments here, I doubt there is much Support can do if wp.com is relying on the browser to resize the image. (Even stranger, I just looked in the code for that Post and the img src shows “w=840″ so I understand that to mean that the photo has been resized/resampled by wp.com.)

    Maybe it would be better to include in the wp.com image FAQ the maximum vertical and horizontal display sizes for Monotone and let us go from there. I realize this isn’t how Monotone is supposed to work, but image quality, especially in a photoblog, is rather important. The other issue is the amount of time it takes the browser to resize the image on the fly. I’m on a faster connection, but image loading time is sometimes achingly slow.

    Thanks again for an excellent and thought-provoking post.

  9. Roads,
    Thank you. Based on what tellyworth said, I was under the impression that WP resampled everything, but given what Matt said, and the fact that the “w=” is missing when you insert an image full sized, it does appear that they do not resample when you select full size in the image uploader. Given that they are now mucking with the size of an image when you insert it “full size” through the uploader, I would actually prefer that they resample that one as well. As can be seen by comparing the top and middle images, setting a size and then relying on the browser to figure out how to display the image produces poor quality when you upload very large images.

    I would actually like to see four choices for size in the image uploader:

    1. thumbnail (resized and resampled by WP)
    2. medium (resized and resampled by WP)
    3. max size for theme – what they call full size now (resized and resampled by WP)
    4. full size (WP inserts the image as is into the post – no resize or resample)

    You can get #4 by taking the URL and using the tree icon, but in my opinion that is poor interface design. You shouldn’t have to take those extra steps.

    I too wish that the image uploader would remember the last settings I used and not always return to “none” and “medium.” Alternately perhaps they could allow us to choose our own default settings. It’s just a few more entries in the database.

  10. Many thanks for another excellent and informative post, Richard. I had wondered whether the uploader resampled images on the fly, and it’s good to know it’s not supposed to do this for full-sized images (or does it, really…?).

    What’s slightly worrying here is that the uploader stubbornly keeps defaulting back to ‘medium’ sized for image uploading, unless you manually correct it each and every time. The default setting is therefore that images are automatically resampled unless this option is manually deselected.

  11. Cooper,
    I always knew there was a difference, but I had never done any side-by-side testing to see how much difference there really was, and I don’t think there were too many that did.

    We know now.

  12. Richard:

    As always you are great in your explanation. I am REALLY enjoying my stay at WordPress, and everyday finding new things to improve my blog.

    Thanks a lot…

  13. TT: In your summary of graphics apps you missed out the phenomenal GIMP. Tool of choice for Linux users, uber cool, and now available in Windows.

  14. @ Richard,
    Your welcome!!!

    Thank you for taking the time out
    of your busy schedule to check out my photo
    blog… :)

    P.s. I’m going to try and resize my images
    using gimp and then pick full size and see
    if the browser still resizes my images..
    I will up date here in the comment section
    when I get a final answer… :wink:

  15. Jennifer,
    That does seem to imply that the results will be better with a larger image. Still, I think 1024px wide should be more than enough. Again, the further WordPress has to shrink the image to put it in the post, the poorer the image quality is going to be, especially in light of the fact that I’ve discovered that WordPress does not resample “full sized” images, but simply scales them down and then they rely on the browser to figure out how to display the reduced size image. WordPress only resamples for medium and thumbnail sizes.

    See my edits in this post, and also Matt’s comment and my replies to him above.

  16. Matt,
    OK, I think I’ve figured out what is going on. If you insert an image as a WordPress “full-size” then WordPres does not resample the image. What is does is just proportionally scale them down to a size consistent with the maximum width for the theme being used and relies on the browser to display it.

    If you insert an image as “medium” or “thumbnail” then WordPress does resample the image and you see the “w=” that you mentioned in the HTML for the image.

    Again, with this being the case, it is even more important for people to not upload very large images if they want them to render well in their blogs when using the WordPress “full-sized” option for insertion.

    I’ll update this post with this new information.

  17. Matt,
    For that matter, neither does the top image have the w=. Both the top and bottom images were inserted through the image uploader. Both were selected as “none” for link and both were selected as “full-sized” in the image uploader and then I clicked “insert into post.” If the w= is missing, then WordPress did not put it in.

    I just tried this on my test blog with the same images and WordPress doesn’t insert the w= in that blog either.

    So, is the WordPress resample/resize thing broken or have you guys decided to let the browsers resize things?

    If you are now letting the browsers resize things, then this post (although I’ll have to edit it) is of even greater importance for those that want good image quality.

    [Edit: Matt, it would be more accurate to say that the browser is displaying the image based on the size parameters WordPress is giving it via the HTML inserted into the post.]

  18. Whoops! One more thing from the announcement page, “Monotone takes the first (and only the first) image from your post and does its magic. Just make sure to select “full size” when you insert it. (The images must be uploaded to WordPress so we can resize them and extract out the colors properly. It also does best with BIG images.)”

    So would that imply that the more there is to sample, the better the match?

  19. So far the only thing I found on the April announcement page about Monotone is, “The width of the page also changes based on the width of the photo.” Obviously am going to have to play with this more.

  20. This is flawed – your bottom image is not being resized by WP, but by your browser. Images resized by WP on the fly have a w= argument added to them, the last image does not have that.

  21. Jennifer,
    I haven’t yet played with Monotone, but it has some interesting features. I don’t know if you have seen it or not, but there is more information in the April wrap up about it that may shed some light on image sizes and such.

    It might be that with Monotone defaulting to 840, that it would enlarge an 800px wide image, which is not desireable. Enlarging photos always results in less quality. 1024 may actually be a very good choice with Monotone.

    Please do keep us informed on what you find.

  22. Richard, just to let you know that the horizontal image I uploaded at 1024 pixels on the long side is displayed at 840 pixels wide in Monotone. Haven’t yet tried uploading one at 800 pixels wide to see what happens.

    Oh and my Monotone blog is Shutter Clutter ;)

  23. Very good info Richard,
    I just started a second blog for photos
    since the new Monotone, theme was
    released here on wp.com I will
    definitely be using these nice tips
    you have provide for my new
    photo blog… :)

    my photo blog URL (NOT linked to my user name)
    http://photosharp.wordpress.com

  24. Jennifer,
    Thank you. Being the skeptical type, I couldn’t help but check out what Tellyworth said, and when I found there was a considerable difference in quality, I figured people should know. 800 x 600 seems to be a good upload size and limits the damage done by the WordPress re-sizing/resampling.

    [Edit: As always, the best way to make sure that your images show up in your blog as you wish them to is to size them to the finished size and then insert them into the post bypassing the normal insertion routine and using one of the procedures I outlined here or here.]

  25. Thanks for another great post on uploading images here at wp.com. I’ve started uploading to a new photoblog using the Monotone theme and I can really see a difference in the uploaded files, even if the “original” is one already resized to 50% of the original. Am going to go resize again to 800×600.

Comments are closed.