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 5 6 7 8
  1. Scott Alexander said

    Thank you for this script. It was very useful for a project I’m working on, and it is going to be a lifesaver in a project I have coming down the pipeline. Is there a mailing list so I can be updated if you update the script?

  2. hi joe,
    we are using a mod_thumbsup mod based on your image resizer 1.4.1
    on our joomla based site. it was working great until we transferrred servers to godaddy. now, none of the thumb images are showing, just the text, ie dont.jpeg. i read through & the dev tried the fixes above but to no avail.
    any suggestions?
    thanks!

  3. Sometimes, the output image is one pixel larger than the specified.

    This is caused by ceil() function. If you change all ceil() functions to floor() it will be solved.

    shr3kull

  4.  
  5. Thanks for the script:)

    I was using phpthumb but found it slow and unreliable in caching images. Your script seems a lot more robust.

    I’ll definately check out V2 when it’s stable.

    Thanks again.

  6. Timon Bergen said

    This script looks great, and I started enthusiastically to include above code into my website. Unfortunately it is not working!

    When I enter following URL, it returns a error.

    http://www.websitename.nl/image.php/1.jpg?image=/images/1.jpg&width=100&height=100


    Parse error: syntax error, unexpected T_IF in /home/abc/domains/websitename.nl/public_html/image.php on line 17

    I really want to use this code, because I intend to use 3 different thumbnail sizes.

    Can anyone please help me?

  7. Can somone please let me know why this wont work for me?

    test url is http://caseykluver.com/reclaimed/

    Everything is the same as the examples except the image.

  8. Oh yeah, the error is PHP Warning: Cannot modify header information – headers already sent by (output started at /home/mkadesi/public_html/caseykluver.com/reclaimed/image.php:2)

  9. Hello there,

    This is indeed a wanderful script, very close to what I was looking for. I’m currently working on a site that has a gallery of photos under each chapter, and would really like to use your script for generating thumbs. Unfortuantely, since there are sometimes up to a hundred photos in each gallery I find it very tiresome to change image size for each image (it kind of defeats the purpose of having a script for it). Is there a simple way you could define size of thumbnails as a constant for each gallery, so that you only have to change size once for each page and all the images would resize to the same width/height? Might be a silly question, but PHP is still new to me..

    thanks a lot and keep up the good work.

  10. Thanks for a great script.

    The only thing is that the sharpening is to high.
    Thumbnails looks way to sharp, so I turned that feauter off.

    Perhaps you can adjust the sharpening setting in feature versions?

  11. Hi Joe,

    Thanks a lot for this script. It works beautifully on Apache on Windows but for some reason when I transfer my application to Ubuntu Linux it does not.
    I’ve tried following all of the troubleshooting steps suggested above without success and now have to ask you. I get the following error when I try to browse to the url directly:

    Error: no image was specified: 1

    I added the the ’1′ to my script to differentiate between the two places where this error is returned. In my case this occurs on the first instance, right at the beginning of the script, indicating that the ‘image’ parameter has not been set in the GET request. Here is my url:

    http://www.honeydoilookfat.com/resize_image.php/image-name.jpg?width=358&height=370&image=/upload/butt_5.jpg

    Clearly it has been set. My phpinfo information can be accessed here:

    http://www.honeydoilookfat.com/phpinfo.php

  12. Hello,

    The script is working great, but with some (large) images I get the following error:

    Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 12000 bytes)

    How can I fix this? The image I used is 1.6 MB, is it to large?

  13. Is there a limit to the filesize?

  14. Looks like a really good script. Thank you for publishing this.

    I just read all the comments, and it seems like quite a few people would like to add a watermark. Did anybody figure out how to do this? Thanks.

  15. It’s possible to customize the v1 script for watermarks. I paid a student $60 to do it and he said it was really simple – but he didn’t do exactly the way I wanted it, that would’ve cost additional and I couldn’t afford it for my non-profit site.

    His script merged the original image and the watermark _before_ the resizing, so the watermark size depended on the original image resolution. Higher res picture -> smaller watermark. Ideally, watermark should be added after resizing so it’s consistent.

    For my usage, it doesn’t matter, because all my original images are the same resolution at the time being. I’m just saying it’s possible and not that difficult.

    Please don’t ask me to share the modified script, I will also not sell it because it is still Joe’s property. I suggest that Joe finishes v2 and charges for the advanced features. I’d gladly pay $20+ for a good script.

  16. I have been trying for days to get TimThumb to work, and I gave up. I found your script. 15 minutes later, it is working on my site (http://simplecomplexity.net/visualization-gallery/). Thank you sooooooo much!!!!

  17. Hello everyone.

    I read a lot of comments along the lines of “How do I add a watermark automatically to the image?”

    I’m here to provide a solution for you! (Because I’m awesome). This solution will apply the watermark AFTER the image is resized. The cached image will contain the watermark.

    I ask only one thing: if you use my solution, please send me a quick message with your website link to email: ( hello — at — scottalex.me )

    Solution:
    First, goto line 308:
    ImageCopyResampled($dst, $src, 0, 0, $offsetX, $offsetY, $tnWidth, $tnHeight, $width, $height);

    Add this code under that line:

    // ** WATERMARK IMAGE MODIFICATION ** //
    // By: Scott Alexander
    // http:///www.scottalex.me

    // ** CONFIGURATION **
    $watermarkPNGFile = “WATERMARK_PNG.png”; // Must be PNG
    $watermarkMargin = 5; // The distance from the edge of the bottom right corner
    $watermarkOpacity = 75; // The opacity of the watermark
    // ** END CONFIGURATION ** //

    // Load watermark image into memory
    $watermark = imagecreatefrompng($watermarkPNGFile);

    // Get watermark image dimensions
    $watermarkWidth = imagesx($watermark);
    $watermarkHeight = imagesy($watermark);

    // Get image dimensions
    $imageWidth = imagesx($dst);
    $imageHeight = imagesy($dst);

    // Calcuate where we need to place the watermark
    $placeWatermarkX = $imageWidth – $watermarkWidth – $watermarkMargin;
    $placeWatermarkY = $imageHeight – $watermarkHeight – $watermarkMargin;

    // Merge image and watermark
    imagecopymerge($dst, $watermark, $placeWatermarkX, $placeWatermarkY, 0, 0, $watermarkWidth, $watermarkHeight, $watermarkOpacity);

    // ** END WATERMARK IMAGE MODIFICATION ** //

  18. Hello all,

    Scott of http://www.scottalex.me here again~

    If you wish to disable direct access to your images, simply put this in your image folder(s)

    Filename: .htaccess

    Contents:

    RewriteEngine on
    RewriteRule ^.*$ http://www.mywebsite.com/ [R]

  19. Why dose one HAVE to use a absolut path to the file? This dosn’t work at all with my project. Is there a way around that? Thy for your help in advance!

    Clay

  20. This script would be absolutely amazing if it used relative file paths instead of absolute file paths.

  21. So if/until this script is updated to use relative file locations, just append $_SERVER['REQUEST_URI'] to the beginning of your images.

    For example:
    $curdir = $_SERVER['REQUEST_URI'];
    echo ”;

    Obviously this only works on php enabled pages.

  22. How to add cache header to this images?
    I have tired in few places ,but i couldn’t .
    Please advice me.

  23. This is amazing thank you. I am concerned about access and people knowing I use this or how to access it directly, I like the idea above about authorized sizes and I will probably add that at some point.

    To hide the script itself I am using mode rewrite to set fake image locations to specific sizes with a mod_rewrite rule. Also along with that I am sending a unique security key string that I have added a check for at the top of the script.

    #example path /images/story/100/thumb/10.jpg
    RewriteRule images/story/(.*)/thumb/(.*)$ image.php/$2?width=130&height=130&cropratio=1:1&image=/images/story/$1/$2&cachekey=complicatedkeystring

    // custom access handling
    $cachekey = ‘complicatedkeystring’;
    if ($_GET['cachekey'] != $cachekey)
    {
    header(‘HTTP/1.1 400 Bad Request’);
    echo ‘Error: unauthorized image access’;
    exit();
    }

  24. Kerry Usry, it’s a very good idea indeed to add the security measures.
    Without the security, some bad guys can drain out our bandwidth resources.
    And I found out also that big size thumbnails (say 400 x 400 px) sometimes have bigger filesize than the original picture. An original picture of 200KB filesize might have a 300KB thumbnail.
    Now if some bad guys access our script directly like Kerry Usry said, our imagecache folder will get amazingly huge thanks to tons of big image cache files generated by them. It can eventually reach the disk space quota of our website hosting.

  25. @Joe Lencioni

    First off, thank you so much for this script! Before the launch of our site we were using your original SIR script locally without incident, but once we pushed live we could no longer get the script to work. However, we were able to get things working on the web server with the new SLIR (slir-2.0b2.zip) you posted.

    While the resizer seems to work great, at times things can be really slow, even after cached images already exist. Here you can see our latest build of InternetGentleman.com. Things can be really snappy for a time, but then randomly the page will take a while to load, especially on our archives page.

    We’re resizing images on our own to keep the original image size down, but we’re relying on the script to generate the various sizes for us. We obviously have a lot of variables at play here, but we’ve eliminated just about all of them and the issue still exists. Do you know of a way we could improve the speed of the resizing/scaling in the script? If not, can you recommend a way to troubleshoot this problem so we can determine if it can in fact be fixed?

    Any help/advice would be much appreciated! Feel free to email me directly!

  26. Joe Lencioni said

    @Adam

    While the resizer seems to work great, at times things can be really slow, even after cached images already exist.

    I believe there may be some bugs in the latest beta release I have up on Google Code. Try grabbing the latest from SVN and let me know if you notice any issues. The latest SVN will use more system resources to crop photos the first time around, but caching should work better I think. I need to get a new beta release out, maybe I’ll be able to find some time in the next couple of months.

  27. @Joe Lencioni

    Thanks! I’ll pull down the working copy, test it, and let you know if we notice an improvement.

  28. Problem faced everytime used image resizer, every times it shows the error:

    Fatal error: Call to undefined function imagecreatetruecolor() in E:\wamp\www\nasir\Real Estate Zameen Clone\Online_\image.php on line 249

    I unable to find this function defined anywhere in the script, Is this a ready function means defined in php.ini ???

    Please solve my problem!!

  29. How do I make the rewrite thing you have ?

    I saw earlier in the comments one made it like /path/200/300/1:2/image.jpg

    but the down side is that I’d have to use them all.
    On this website its like

    /path/w200-h200/image.jpg
    or just /path/w200/image.jpg works aswell.

    Mind sharing that htaccess for us :)

    thanks in advance,
    Tem

  30. [...] You should download Smart Image Resizer from http://shiftingpixel.com/2008/03/03/smart-image-resizer/ [...]

  31. Michael Drogan said

    Hey i am completely new to all of this, and im am wondering where to start. Do i put this code somewhere in another page that has images? or do i put inmages in the same folder? or do i put images on this page? i have no idea where i am at.

  32. I cant seem to run the script with relative paths, however when using absolute paths all is fine.

    BTW Thanks for the awesome script

  33. Many thanks for this great and really useful script.

    It would be great if it would be mentioned in the documentation somewhere that it needs the FULL path to work and does not seem to work from a subdirectory path.

    Thanks a lot
    tobias

  34. Thanks for the great script!
    I’m testing the latest version from the repository. It worked great the past weeks in my test environment. But now it’s giving me an error when a resolution of the image is called for the first time by the script. The script does cache the image to it’s appropriate size, so the 2nd+ time the image is called no error occurs. The error is (displayed in an image):

    2048 Declaration of PelEntryUserComment::SetValue() should be compatible with that of PelEntryUndefined::SetValue()

    File: [path]/pel-0.9.1/PelEntryUndefined.php Line 285

    Quite weird since it didn’t give any errors before. I tried numerous images and also images which worked before.

    Any ideas what might cause this problem? Thanks

  35. Hi,

    what rewrite script are you using on shiftingpixel.com to make the imgurl’s look like this:
    shiftingpixel.com/slir/w200-h200/wp-content/uploads/2008/03/coffee-bean.jpg

    I tried the one above, but that one required all paramters to be filled. The one SP.com is using also works with only “h300″, or only “w150″.

    Greetings and thanks in advance,
    TeMc

  36. Hi,

    Thanks for this awesome script! I’ve used it in a couple of projects without any problems at all. It’s brilliant!

    But on this one project I keep getting an error:
    Fatal error: Call to undefined function imageconvolution() in /var/www/web0/html/slir/slir.class.php on line 494

    The webserver is running PHP 5.2.6-1+lenny3 with GD enabled.
    In phpinfo() it says “GD Version: 2.0 or higher”.
    It doesn’t say “bundled” or anything like that, though.
    Could this be the problem?

  37. Hi,

    I have two questions:

    1. Why the images when are cropped and selected them, presents a “margin” of 5px in bottom of the image?

    2. One image was cropped wrong. All images cropped with 180X180px and it in 181X180, what´s happening?

    Thanks

  38. A comment on your example code:

    is the “…/coffee-bean.jpg?width=…” part necessary? I’ve dropped it from my URLs and the script still works fine.

    Also, I had to replace “&” with “&” to make it work.

    Thanks for the useful script.

  39. WilderBeastFiascoFantasticFunTimeSpiritJourneyAllAroundGoodTimeHats said

    Will it resize to proper proportions if you only specify width or height?

  40. @ WilderBeastFiascoFantasticFunTimeSpiritJourneyAllAroundGoodTimeHats:

    Yes…

  41. i’m using the version that we can download on this page.
    I wonder if there is any possibility to make this work on css url to, like:

    background:#2770B9 url(../images/image.png) repeat scroll 0 0;

    and if it is, how to do it.

  42. @Tom,

    I was having the same error. BTW @Joe not only a very nice script but very handy having the errors returned as an image. This allowed me to trace the error to the lib which was trying to copy the EXIF data to the smaller image. I don’t know why the error occurs but I don’t need the EXIF data copied so I set this to FALSE in the slir-config and the error went away. You may want to change your img alt tag to say image loading cause it takes a sec for it to come across.

    Once again very nice Joe, thanks!

  43. [...] References: class.upload.php Smart Image Resizer [...]

  44. Daniel Rauch said

    A quick fix for people getting reaching the memory limit with big images:

    find the following line

    ImageDestroy($src);

    and move it up so it comes directly after the following line

    ImageCopyResampled($dst, $src, 0, 0, $offsetX, $offsetY, $tnWidth, $tnHeight, $width, $height);</code

    that frees some unneeded memory a little earlier than in the original php script and we get it to process bigger images.

  45. Hi again,

    My questions is in air yet. Someone hs the same problem and how resolved it?

    1. Why the images when are cropped, they have a “margin” or “padding” of 5px in bottom of the image?
    When I have a border of image this border become bigger than I put in CSS border.

    2. One image was cropped wrong. All images cropped with 180X180px and it in 181X180, what´s happening?
    This isn´t important for now, but I would like to solve this to.

    Thanks in regard.

  46. After not being able to get TimThumb to work for my project (and no idea why), I was able to get this plugin working beautifully. Thanks much!

  47. Just for all who want a little less sharpening:

    just play a little bit around with the integer value of $a in the function findSharp(). It´s default of 52 is relatively sharp, whereby 55 is far less sharp and 48 is extra super sharp.

  48. Been using SIR for a while now, it’s great.

    Any chance of allowing the source image file to be pulled from another server, for example flickr?

  49. I too am getting this error with larger images:

    Fatal error: Allowed memory size of 104857600 bytes exhausted (tried to allocate 26536 bytes)

    This happens for images greater than about 5MB.

    I’ve confirmed using phpinfo that my memory_limit is set to 64M. So this script should be able to handle a 7MB file, right?

    BTW, the error message is credited to this line in your code:

    $src = $creationFunction($docRoot . $image);

    Otherwise though this script is awesome.

  50. @Dan
    Did you try the fix i posted a few comments above?
    (it will allow using a bit larger images bevor reaching the memory limit)

    The filesize doesnt really matter. Its the number of pixels in the image and at some point the memory needed to store and manipulate (resize and sharpen image) them is larger than the memory limit (however high it may be).

  51. @Daniel: I just made the change you recommended, to avoid out of memory errors. But previously I increased the memory allocation in the script from 100M to 200M and that worked. Hadn’t realized that your script was re-setting the memory allocation setting for php.

 
1 5 6 7 8