Smart Image Resizer by Joe Lencioni

March 3, 2008 by Joe Lencioni

Similar posts

A ridiculously easy-to-use PHP script for resizing images the smart way.

One of the challenges that comes with maintaining a graphic-intensive website like Shifting Pixel is finding a way to get high quality images throughout the site with as little effort as possible. To tackle this, I developed the Smart Image Resizer and have been using it around the site for the past few months. I couldn’t be happier.

The major advantage of this script is that it allows me to resize and crop any image on my website without touching the actual image or writing any code. I upload each image once at a high enough resolution and can then reuse it at any size I want, anywhere I want. It doesn’t matter if the images are in a post, on a page, or in a template file–it just works. All of the magic is done through the query string part of the URL in the src attribute of the img tag.

And, if this wasn’t a big enough time-saver for me right now, it’ll be a huge time-saver the next time I decide to redesign my site. It’s a relief that I won’t have to go through to resize and re-upload a thousand photos to make sure they look right–I’ll just have to change the links to them and I’ll be all set.

Features

  • Resizes JPEGs, GIFs, and PNGs
  • Intelligently sharpens for crisp photos at any size
  • Can crop based on width:height ratios
  • Can color-fill transparent GIFs and PNGs
  • Built-in caching keeps image variations for optimal performance

Requirements

PHP 5.1.0+ compiled with GD. (You need a version of GD that supports imageconvolution(), such as the bundled version. Note that on some distributions, the default php-gd package may not be adequate.)

Download

Download SLIR 2.0

Download Smart Image Resizer v1.4.1 (Released August 6, 2008)

Tip jar

[flattr /]

To Install

  1. Unzip on your web server
  2. In the same directory, create a directory called “imagecache”
  3. Make your imagecache directory is writable by the web server (usually chmod 775)

Troubleshooting

  • Turn on “display_errors = on” in your php.ini file. Restart Apache and verify with a phpinfo().
  • Try visiting the URL that you are using as the src attribute of your img tag directly in the browser. For example, for example, stick this in your browser’s address bar: http://example.com/image.php?width=180&height=180&image=/path/to/image.jpg. If there is an error message here, it should be quite helpful.
  • If that doesn’t give you any information, turn on error reporting (add error_reporting(E_ALL); to the top of image.php) and see if that gives you any information. It is possible that the script is trying to use a function that doesn’t exist in your installation and configuration of PHP.
  • If you can’t get the script to give you any information, try peaking into your error logs.
  • Finally, if you can’t get any information out of any of these things, run a phpinfo() and send me a link–if I have time I’ll take a look at it and tell you if anything looks out of the ordinary. As of this time, I am spending more time focusing on SLIR 2.

Common error messages

Fatal error: Call to undefined function imagecreatetruecolor()
This most likely means that you do not have GD installed. To fix this, install GD (make sure you are using a version that includes the imageconvolution() function).
Fatal error: Call to undefined function imageconvolution()
This means that you are using a version of GD that does not include the imageconvolution() function. To fix this, you will either need to find a repository that includes the version of GD that you need, or compile php-gd from source.

License

I love to hear when my work is being used, so if you decide to use it, feel encouraged to send me an email. Smart Image Resizer is released under a Creative Commons Attribution-Share Alike 3.0 United States license. All I ask is that you include a link back to Shifting Pixel (either this page or shiftingpixel.com), but don’t worry about including a big link on each page if you don’t want to–one will do just nicely. Feel free to contact me to discuss any specifics.

Examples

These examples use my photo of this coffee bean. For more fine photography, browse my “Must See” photos or subscribe.

Resizing a JPEG

<img src="/image.php?width=200&amp;height=200&amp;image=/wp-content/uploads/2008/03/coffee-bean.jpg" alt="Coffee Bean" />

Coffee Bean Coffee Bean Coffee Bean

Resizing and cropping a JPEG into a square

<img src="/image.php?width=150&amp;height=150&amp;cropratio=1:1&amp;image=/wp-content/uploads/2008/03/coffee-bean.jpg" alt="Coffee Bean" />

Coffee Bean Coffee Bean Coffee Bean

371 Comments

 
1 2 3 … 8

  1. Elliot Swan said
    March 3rd, 2008 at 9:45 pm

    So is this running the PHP script and resizing the image every time the image is loaded, or is it doing it once and keeping a copy of the image on the server?

  2. Joe Lencioni said
    March 3rd, 2008 at 9:49 pm

    @Elliot: excellent question. If properly set up, it actually resizes the image once and keeps a copy of it on the server in a cache directory. If the source image is newer than the cached image or if any of the parameters change (width, height, cropratio, or color), it makes a new one and re-caches it.

  3. Lorenzo Dal Col said
    March 4th, 2008 at 2:54 am

    Great script! I have just started using it.


    Notice: your script sets “Last-modified” header, but doesn’t allow browsers to use their cache.

    I have added at line 177 into if($imageModified < $thumbModified) {

    these lines of code:


    // check browser cache
    $gmdate_mod = gmdate("D, d M Y H:i:s", $thumbModified) . " GMT";
    if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    $if_modified_since = preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if ($if_modified_since >= $gmdate_mod) {
    header("HTTP/1.1 304 Not Modified");
    exit;
    }
    }

    with this line the script checks the request header of browser about client cache and response "NOT MODIFIED" if the image cached into browser is updated.

  4.  

  5. Ben said
    March 4th, 2008 at 4:59 am

    Cool script – I’ve actually been working on something similar. You’ve given me some ideas for improving my own script as well :)

    One thing I would suggest is checking for the cached file before setting memory limits and doing all the cropping calculations. I think that may help speed things up.

  6. Joe Lencioni said
    March 4th, 2008 at 6:52 am

    @Lorenzo: aha! Silly mistake on my part. Thanks for posting this. I will make the change ASAP.

    @Ben: Thanks for the suggestions. I will try some things and include them in the next update for sure.

  7. Joe Lencioni said
    March 4th, 2008 at 7:00 am

    Okay, I made some changes and uploaded it. It does seem to run more smoothly (especially with the browser cache). Thanks for the suggestions, guys!

  8. andPHP.com said
    March 4th, 2008 at 10:55 am

    Resize images with this PHP script…

    Joe Lencioni over at Shifting Pixel, has written a post about the easy to use image resizing script. It’s a really simple script that you use by specifying the parameters in the src part of the img tag.
    The major advantage of this script is that…

  9. Billy said
    March 4th, 2008 at 5:46 pm

    Nice Joe, I’m going to have to try this one out. I’m always trying to figure out the right size and uploading too may sizes to the server… anyways, nice ; )

  10. Smart Image Resizer — Shifting Pixel | The Click said
    March 7th, 2008 at 10:21 pm

    [...] it out here. Via John [...]

  11. » Smart Image Resizer — Shifting Pixel Webcreatives said
    March 9th, 2008 at 7:46 am

    [...] Smart Image Resizer — Shifting Pixel Related Stuff10 Edit In-Place Ajax Scripts | WebTecker the latest tech, web resources and news.CSS Colors: Take Control Using PHP [...]

  12. David said
    March 9th, 2008 at 8:23 am

    Great script. This is the marquee feature behind an enterprise product by a company called Scene7 who was bought by Adobe a few months ago.

  13. Jaap van Wingerde said
    March 9th, 2008 at 9:28 am

    Licence?

  14. Joe Lencioni said
    March 9th, 2008 at 9:42 am

    @Jaap: Good question. Creative Commons Attribution-Share Alike 3.0 United States (my attribution requirements). I will try to make that more apparent.

  15. Ridurre la dimensione delle immagini con smart image resizer : sastgroup.com said
    March 9th, 2008 at 10:28 am

    [...] web: http://shiftingpixel.com/2008/03/03/smart-image-resizer/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

  16. Ekerete said
    March 9th, 2008 at 1:30 pm

    Thanks a lot!
    This saved me a lot of time (I had actually started to write something before I found this).

    I had to add a replication for the php5 only imageconvolution() to get it to work with php4 (using oscommerce which required too many mods to get it to work on php5).

    I know it’s a lot slower, but it works.

  17. Как изменять размер изображения прямо из адресной строки | Простые фокусы (focused.ru) said
    March 9th, 2008 at 12:40 pm

    [...] придумал довольно несложный скрипт PHP под названием Smart image resizer (хитрый ресайзер), который выдает пользователю [...]

  18. barry said
    March 9th, 2008 at 3:20 pm

    have you seen phpthumb? does pretty much the same as far as i can see…

  19. Denis au fil du web » Smart Image Resizer said
    March 9th, 2008 at 4:48 pm

    [...] Smart Image Resizer [...]

  20. PHP: Smart Image Resizer — Oivallisia juttuja said
    March 9th, 2008 at 6:07 pm

    [...] Shiftingpixel.com: smart image resizer. PHP-skripti, joka osaa muokata JPEG, GIF ja PNG -kuvien kokoa, sekä terävöittää ja kropata kuvia. Osaa ilmeisesti myös cachettaa tuloksensa. Keksin tälle ainakin muutaman käyttötarkoituksen heti, pitää siis kokeilla. [...]

  21. zach said
    March 9th, 2008 at 6:13 pm

    line 241 near:

    …
    // Set up the appropriate image handling functions based on the original image’s mime type
    switch ($size['mime'])
    …

    you may want to include:

    ‘image/pipeg’
    ‘image/jpeg’
    ‘image/pjpeg’
    ‘image/png’
    ‘image/x-png’
    ‘image/gif’

  22. The Abarentos Narrative » links for 2008-03-09 said
    March 9th, 2008 at 6:20 pm

    [...] PHP Smart Image Resizer (tags: php images resize image script photos tool programming webdev tools) [...]

  23. lukep said
    March 9th, 2008 at 6:21 pm

    nice, this is just what I’ve been looking for. thanks!

  24. Martyn Davies » Blog Archive » links for 2008-03-10 said
    March 9th, 2008 at 8:24 pm

    [...] Shifting Pixel: Smart Image Resizer (tags: php imagemanipulation development images graphics) [...]

  25. links for 2008-03-10 « Mandarine said
    March 9th, 2008 at 11:31 pm

    [...] Smart Image Resizer — Shifting Pixel A ridiculously easy-to-use PHP script for resizing images the smart way. (tags: webdev php images photo) [...]

  26. Klark said
    March 10th, 2008 at 12:16 pm

    How about allowing resizing of external images?

  27. Jean-Marie said
    March 10th, 2008 at 9:29 pm

    This is great, Joe. Question: can you briefly describe how one can go about manipulating the sharpening algorithm (PHP’s imageconvolution) to adjust it to one’s taste? I find your sharpening matrix to be a bit too aggressive for my taste (i.e. too much sharpening), but I don’t entirely get how to go about adjusting the variables to apply less sharpening.

  28. Тут Хумора.NET said
    March 11th, 2008 at 5:01 am

    [...] Smart Image Resizer. PHP-скрипт для ресайза картинок. Обещают качественный результат.One of the challenges that comes with maintaining a graphic-intensive website like Shifting Pixel is finding a way to get high quality images throughout the site with as little effort as possible. To tackle this, I developed the Smart Image Resizer and have been using it around the site for the past few months. I couldn’t be happier. [...]

  29. mark said
    March 14th, 2008 at 2:21 am

    Looks good. I bookmarked this for future use :)

  30. Marc Alagem said
    March 14th, 2008 at 3:36 am

    Hi Joe. I came across your little wonderful piece of code and I got so enthusiastic about it that I decided to feature it on our blog for the web community, at The Art Company — Feel free to add our link to your “Mentioned Elsewhere” list.

    Keep up the good work!

  31. decimus said
    March 14th, 2008 at 3:58 am

    Its great post! This script will make my life easier ;-)
    Thx a lot!

  32. qqrq said
    March 14th, 2008 at 5:18 am

    Great script – very simple and effective. I’ve used it (after some modifications) with my Symphony site. Works grear and looks great!

  33. Florent V. said
    March 14th, 2008 at 7:09 am

    This looks neat. I will have to test it for real, and I guess that larger websites will need to test it thoroughly for possible performance issues, but the principle is great.

    With such a tool, you can upload a large image once, and then just ask for the right format in your templates. Great for news/content sites who use one image in 2-4 different formats (small thumbnail, medium thumbnail, page display, full picture…).

    I don’t see a lot of CMSs that offer such image manipulation possibilities. And even when they do, the content producer needs to use the tool in the right way or some things might not work. With Smart Image Resizer, you can fix this at the webdesigner level (in the website’s templates, for instance).

    Great timing, by the way. I’ve been working on a project that just needs this. Woot!

  34. Smart Image Resizer: 智能图像缩放的PHP脚本 | 帕兰映像 said
    March 14th, 2008 at 9:49 am

    [...] 进入 Smart Image Resizer [...]

  35. Carmine Web #2 » Blog Archive » Ridimensionare immagini con PHP said
    March 14th, 2008 at 10:09 am

    [...] Smart Image Resizer è uno script basato su PHP per il ridimensionamento di immagini creato da Joe Lencioni e pubblicato recentemente sul suo blog. [...]

  36. Great Resources Elsewhere: March 07 to March 14 - CSSnewbie said
    March 14th, 2008 at 10:34 am

    [...] Smart Image Resizer — Shifting Pixel [...]

  37. Matt said
    March 15th, 2008 at 5:33 am

    doesnt appear to be working for me yet

    im running gd and php5
    on linux

    all i get is the alt tag

    dying to try it out!!!

  38. T’as le bonjour de Jean Rat ! » Blog Archive » Les liens sympas de Jean Rat du 14/03/08 au 15/03/08 said
    March 15th, 2008 at 7:12 am

    [...] Smart image resizer Smart Image Resizer — Shifting Pixel – A ridiculously easy-to-use PHP script for resizing images the smart way [...]

  39. Eddy Tilmant said
    March 16th, 2008 at 3:16 pm

    It’s a verry usefulls script, but If I am not mistaken someone can flood your filesystem by creating a lot of diferent images in the cache directory, just by making a script that change the height, width, ratio combineason

  40. xeRo Virtual Planet said
    March 16th, 2008 at 3:17 pm

    [...] Smart Image Resizer – satu script yang mengubah size sesuatu fail image tanpa mengubah size asal sesuatu image. mengunakan script php dan gd library. [...]

  41. Surf Raporu, 16 Mart 2008 | Taylan Aktepe said
    March 16th, 2008 at 3:27 pm

    [...] PHP için resim ölçülendirme aracı. Bağlantı… [...]

  42. zach said
    March 16th, 2008 at 5:12 pm

    @Eddy Tilmant

    .htaccess
    RewriteRule ^images/(.*).jpg$ image.php?src=$1 [L]

  43. crawlspace|media » Blog Archive » Daily Ma.gnolia Links for March 16 said
    March 17th, 2008 at 1:59 am

    [...] Smart Image Resizer — Shifting Pixel [...]

  44. Eddy Tilmant said
    March 17th, 2008 at 3:05 am

    @Zach
    It does not avoid to create thousands of files in the cache directory with a simple script

    I added it at the beginning of the script:

    
// Check if the size is authorized
$authorizedWidth = array ('', '120', '124','150','318', '700');
$authorizedHeight = array ('','120', '83','150','180', '1000');
$authorizedRatio = array('', '1:1', '1.5:1');

if(!in_array($_GET['width'], $authorizedWidth)){
	echo 'Error: This size not autorized';
	exit();
}
if(!in_array($_GET['height'], $authorizedHeight)){
	echo 'Error: This size not autorized';
	exit();
}
if(!in_array($_GET['cropratio'], $authorizedRatio)){
	echo 'Error: This size not autorized';
	exit();
}

  45. Mike Tee said
    March 17th, 2008 at 3:06 am

    First of all, congratulations for creating a wonderful script! I encountered some difficulties at first but managed to solve them:

    1. Note that the image path must be ABSOLUTE. My development is done in a “beta” folder and as such, the image couldn’t display until I switched the path to something like “image.php/test.jpg?width=100&height=100&image=/beta/images/test.jpg”.

    2. If you still cannot see an image in the browser – try running the PHP script directly by copying & paste the image string into your browser’s address bar. This should provide some helpful error messages. Eg:

    http://www.example.com/beta/image.php/test.jpg?width=100&height=100&image=/beta/images/test.jpg

    Lastly – and here’s a suggestion to the developer for future versions – is it possible to specify the image quality? One of my thumbnails degraded very badly even in 100×100, despite its original JPG being saved at 95% quality.

  46. PHP Smart Image Resizer | David Bisset: Web Designer, Coder, Wordpress Guru said
    March 17th, 2008 at 8:33 am

    [...] Smart Image Resizer – Done in PHP. I’m usually not a fan of activating a script through an image tag: [...]

  47. zach said
    March 17th, 2008 at 11:52 am

    @Eddy Tilman

    with your script you could create a 120×1000 when you only want to allow matching dimensions.

    i would be even more specific:

    
$image['type']=$_GET['type'];

$image['thumb']['width']='100';
$image['thumb']['height']='100';
$image['full']['width']='800';
$image['full']['height']='600';
$image['tiny']['width']='16';
$image['tiny']['height']='16';

if(!is_array($image[$image['type']])){
	exit;
}

  48. myquealer said
    March 18th, 2008 at 1:22 pm

    Nice looking script!

    It might be nice if errors generated an image with the error text, since this script will almost always be used in an img tag and the cause of the error is not clear when you just see a broken image or the alt text.

    Also a scale option would be nice, so you can scale the image by a percentage, rather than needing to know the exact proportions of the image and do math to figure out the new width and height.

  49. Joe Harman said
    March 19th, 2008 at 11:33 am

    Great script… I would love to see the following feature added to this script.

    Make an image (75 x 100) insert into the center of a square image of (100 x 100 white background)… this is just a fine detail issue for my usages, but I am sure alot of people would find that it would be useful.

    Great Job on this script!!!! I love it!

  50. Bill said
    March 21st, 2008 at 6:52 pm

    Great Script. I have to appose the idea by Joe Harman though. You can do this with CSS / html. We don’t all have white backgrounds on our sites.

  51. efrees. » Smart Image Resizer said
    March 23rd, 2008 at 1:48 am

    [...] A ridiculously easy-to-use PHP script for resizing images the smart way，使用形如@jpg?width=150&height=150&cropratio=1:1&image=/wp-content/uploads/2008/03/coffee-bean.jpg@这样的地址来调用图片。这种方法我曾经用过，坦白说，适用范围很窄。如果同一页面上有多个图片且均通过这种方式处理的话…… [...]

 
1 2 3 … 8