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

Comments are closed.