As I was previewing my previous entry, I noticed that the thumbnails that WordPress had created for the attached [jpeg] images were of rather poor quality—they exhibited significant compression artifacts—and they were a little smaller than I would have liked.

The latter problem was a simple fix. The Shift This WordPress Thumbnail Size Plugin creates a new configuration page that allows WordPress admins to specify the max dimensions for thumbnails. (I use 192px.)

The problem of poor jpeg thumbnail quality isn’t as clean to fix. The only solution I could find requires changing a line in the source code. As explained here in the WordPress support forums, the fix requires editing the wp_create_thumbnail function in wp-admin/admin-functions.php.

The following code takes the resampled image data and saves it as a file on the server.

// move the thumbnail to its final destination
if ( $type[2] == 1 ) {
	if (!imagegif( $thumbnail, $thumbpath ) ) {
		$error = __( "Thumbnail path invalid" );
	}
}
elseif ( $type[2] == 2 ) {
	if (!imagejpeg( $thumbnail, $thumbpath ) ) {
		$error = __( "Thumbnail path invalid" );
	}
}
elseif ( $type[2] == 3 ) {
	if (!imagepng( $thumbnail, $thumbpath ) ) {
		$error = __( "Thumbnail path invalid" );
	}
}

The following line from the above code handles jpeg images:

if (!imagejpeg( $thumbnail, $thumbpath ) ) {

The imagejpeg function can take a third argument that specifies the quality (0–100) of the resulting file. If that argument is not provided, it defaults to a value of “about 75″ (according to the PHP manual). I think a value of 90 is more appropriate, so therefore I edited the above line to:

if (!imagejpeg( $thumbnail, $thumbpath, 90 ) ) {

The result is greatly improved; however, as the comparison below demonstrates, it’s still not quite as nice as what I can get using the application that I’ve been using for years to do thumbnails manually—ThumbsUp. The reason is that ThumbsUp provides options for antialiasing and sharpening the thumbnails that it generates.

Example ThumbnailGuitar Hero Cover
Left: WordPress-generated thumbnail (after applying the above hack)—clean, but kinda fuzzy.
Right: thumbnail generated using ThumbsUp—nice & sharp.

Incidentally, the thumbnails on the previous post were all generated using ThumbsUp (to replace the ones that WordPress had originally generated with all the compression artifacts). I had hoped the above hack would keep me from having to do that again; however, it looks like I may have to continue using ThumbsUp as my source for thumbnails.

8 Responses to “WordPress Thumbnails”
  1. Milorad says:

    Thanks for this, it really came in handy. I’m making “thumbnails” 418 pixels wide, so any quality improvement helps.

    I find though that if the source image is pretty big, the result isn’t near as muddy as your example here, which is just as well, as I’m doing this all to avoid having to generate my own feature images.

    Cheers and thanks again.

  2. I have been a frequent visitor of this blog for some time now, so I thought it would be a good idea to leave you with my thanks.

    Regards,
    Jim Mirkalami

  3. That was pretty interesting. Thanks for sharing!

    -Dre

  4. Dave says:

    Thanks, you exactly answered the question I was googling! I use the multifile-upload plugin which allows you to upload multiple files at once and specify the thumbnail size for each, but the image quality of the thumbnails is still pretty garbage. It uses wp_create_thumbnail() so I might try your hack, otherwise it’s back to Adobe…

  5. dodo says:

    now ,the code of version 2.65 (or higher) had lots of updata and changes, this method for v2.3 is no longer work.

    do you know to change the code in wordpress 2.6.5 or higher version ?

    thankyou~!!

  6. The thumbnail creation code has been changed considerably and has been moved since I first published this entry. Looking at version 2.7, the code now resides in wp-admin/includes/image.php. Look for the line (at or around line 71):

    if ( imagejpeg( $dst, $dst_file ) )

    As before, it just needs the third argument that specifies the image quality. I haven’t tested it, but that should work.

  7. danna says:

    I just tried this after searching for a solution for hours and it worked! Thank you thank you thank you.

  8. george says:

    Hi Steve,

    Have you seen by any chance the latest version 2.8.4 – do we still have the same image quality or is it improved?
    I’m getting quite low-quality thumbnails with the default settings so I’m wondering what should I tweak in order to improve the quality.

    Thanks
    George

  9.  
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>