Large image upload size (using timthumb.php

Question

I seem to be having this issue with all of the images on my site.

First I optimise a .jpg in Photoshop to approx 100k (it's a large header image), then I upload through Wordpress' media uploader as a Featured Image. Here's the code I use to output the image in my template file:

<?php if (has_post_thumbnail( $post->ID )): ?>
            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
            <img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo $image[0]; ?>&w=660&h=246&zc=1" alt="<?php the_title(); ?>" />
        <?php endif; ?>

Problem:

When I view the image in the browser, it seems to have a file size of approx 900k. 9 times the size of the original file!

What is causing this increase in file size after uploading through Wordpress? Is it WP's media uploader or the timthumb.php script?

Answer 1

Instead of using timthumb, use the internal image API.

Firstly, specify the custom size you're wanting to use by using add_image_size:

Usage:

<?php add_image_size( $name, $width, $height, $crop ); ?>

So you would put this in your themes functions.php:

add_image_size( 'large_post_image_header', 660,246,true);

Then, instead of:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo $image[0]; ?>&w=660&h=246&zc=1" alt="<?php the_title(); ?>" />

You can specify instead this:

<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'large_post_image_header' );
} else {
    // show a default image or something
}
?>

For posts that already have an existing featured image, you will need to regenerate the thumbnails and extra image sizes using a plugin ( only needs to be done once ) before the new image size will work properly.

You may even wish to install the WP-Thumb plugin to make the API even more powerful, letting you add image filters, control the cropping positions, rotate, it even has a timthumb style standalone usage too for theme files

http://hmn.md/introducing-wp-thumb/

Final step would be to take timthumb.php and burn it with the fire of a thousand suns. Afterwards pat yourself on the back, you're now using best practices and you've future proofed yourself against a whole myriad of potential security and maintenance issues ( and slimmed down your codebase too =p ).