Timthumb, MaxCDN, W3 Total Cache, wp_get_attachment_image_src

Timthumb is a great piece of software used by many theme designers for thumbnail generation and manipulation. It does an excellent job resizing images, but it is also likely the biggest performance bottleneck to your site speed. The little script gets called into action whenever a page with thumbnails, such as index, home page, is viewed. Imaging how many PHP executions may be called on a busy site!

Once timthumb has generated the thumbnails and images stored in the cache directory, there is really no need to call it any more.

Ideally, there really should a plugin that integrates timthumb directly with WordPress posting function, so whenever a post is generated, so will the thumbnails required by the theme be generated at the same time. Then the theme can source them directly with calling the script again.

If you are starting anew, avoid themes that use timthumb.

If you are stuck with a timthumb theme, what do you? If you, like me, have done a through web search, you may ended up with several solutions. We will go through some of the solutions here.

IMPORTANT: keep timthumb.php up to date Be sure to check the source regularly. http://timthumb.googlecode.com/svn/trunk/timthumb.php
If you are NOT pulling image from external sources, turn it off: ‘ALLOW_EXTERNAL’, false

Ajith: http://www.dollarshower.com/timthumb-and-wordpress-blog-performance/

Basic optimization of timthumb usage is a must read to optimize your timthumb script.

Get rid of RUNTIME use of Timthumb is a great idea. But before Ajith releases his work-in-progress plugin, if he indeed does release in the future, you would have to run timthumb offline either manually or by a cron job. It is kind of impractical.

Cache the timthumb script with a CDN http://www.binarymoon.co.uk/2010/11/timthumb-cdn-amazon-s3-good/

It does not work with MaxCDN. Interesting part is the tip site does not use a CDN as it suggested.

The third tip from Yoav Aner at http://blog.gingerlime.com/thumbs-up/

It is a simple rewrite rule.”The idea in principle was very simple: Change timthumb.php?src=… url to a “cdn-friendly” url.”

It is working and we recommend this tip but with our suggestions. We assume you are using MaxCDN (see our TIP why MaxDN) in conjunction with W3 Total Cache.

Add a slash before cdn-thumb/ to take care of categories index pages, so the rewrite rule becomes
RewriteRule ^/cdn-thumb/(.*)$ /relative/path/to/timthumb.php?$1 [L]

The followings may or may not apply to your situation.

My themes use wp_get_attachment_image_src to retrieve image location. I have to remove http://yoursite from the full source location to get the rewrite working. If this is case for you, then you need to add the following line after the wp_get_attachment_image_src call.

$thumbnail=str_replace(get_bloginfo(‘url’), ”, $thumbnail);

Now we have successfully got the rewrite working and the timthumb script cacheable. But it is still not CDN friendly.

If you have read through Aner’s tip, there is an issue with pending &w=&h= (for generating the right dimension of thumbnails) after image src. The dimension calls are integral and cannot be removed. CDN will not pull the images and they will continue to be served locally.

The solution is to move the dimension calls to before src=/ by modifying your theme function or templates, so

src=/…&w=&h=
becomes
&w=&h=&src=/wp-content/…/image.gif (image.jpg)

Now we have a CDN friendly image. To force CDN to upload thumbnail images, add

cdn-thumb/*

to the custom file list under W3-Total-Cache’s CDN advanced settings.

Once you have done all the steps, double check to see if indeed the CDN is serving the images by checking page source.

If you see image src as something like cdn.yoursite/&w&h&src=/… then you are all done and enjoy your faster website.