[wp-hackers] Twenty Ten theme issue?

Otto otto at ottodestruct.com
Tue Aug 17 15:43:14 UTC 2010

Actually, WordPress does this pretty effectively.

For the main resizing, it creates the several different sizes of
images on upload.

When you insert the image, it uses the content-width setting in the
theme to put an upper limit on the width of the image inserted. This
is to keep the image from overrunning your page's content area. When
it's choosing an image in this manner, it picks the image closest in
size without being smaller. So yes, in browser resizing is used, but
it's picking the closest match.

In-browser resizing isn't all that bad anymore, actually. Modern
browsers don't suck at resizing like Netscape used to, and while you
can come up with a system to generate the image on the fly and serve
it up, this is a lot of work in terms of CPU time on your server. Time
that is probably not necessary for you to bother with. It's a
diminishing returns problem. You can use caching techniques as well,
but then you're just using lots of disk space.

On the whole, WP is doing it right. The only problem is the use of the
width and height attributes to attempt to do browser resizing.
Hopefully this is an easy fix.

BTW, if anybody is interested, I've seen implementations of on-the-fly
resizing for WP and it's actually really trivially easy to do. You can
make a PHP program that will take an input filename and load/resize
it, then save the file out into a cache directory, and return it to
the browser. This takes like 20 lines of PHP code, tops. You can use
an .htaccess rule to redirect all, say, JPG requests there like this:

RewriteRule ^(.*).jpg$    /resize.php?file=$1 [L]

This gives you free automatic caching, because you can have your
caching directory be the directory where you normally store uploaded
images, and the first condition there will only redirect to the
resizer if the file isn't found. Now, note that WordPress stores
filenames like image-100x300.jpg and make your code do the same thing.

Making WordPress use this resizing instead of the internal closest
match scheme turns out to be pretty easy too. The image_downsize
filter lets you intercept calls to image_downsize, which is called
when WordPress is trying to find the closest match. If you then have
it return the filename with the image dimensions in it, then that will
get used in the call, making it redirect to your image resize code as
above, and voila, on-the-fly resizing of images, with caching.


More information about the wp-hackers mailing list