Smart Image Resizer by Joe Lencioni

53 Comments

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. (post author) 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. (post author) 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. (post author) 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. 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.

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

    Licence?

12. (post author) 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.

13. 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.

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

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

15. 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’

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

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

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

    How about allowing resizing of external images?

18. 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.

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

    Looks good. I bookmarked this for future use :)

20. 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!

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

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

22. 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!

23. 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!

24. 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!!!

25. 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

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

    @Eddy Tilmant

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

27. 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();
    }
    

28. 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.

29. 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;
    }
    

30. 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.

31. 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!

32. 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.

33. Florent V. said
    March 25th, 2008 at 4:17 pm

    Hello,

    As Bill said, using HTML and CSS for displaying square or rectangular backgrounds is enough. I see no need to inflate this script with that feature. I think future enhancements could be security- or performance-related (but I’m no expert so I won’t suggest anything for this).

    I finally tried this script and I have some remarks:

    1. It seems that the “/coffee-bean.jpg” part of your example (just after “image.php”) is totally useless. Well, at least omitting it altogether didn’t seem to hinder the script. This is good news, because then I can write “/images/sir/image.php?some_parameters&image={path_to_picture}” in my templates, with the bracketed part being replaced by the image path by the template engine. If this “/coffee-bean.jpg” or “/image-name.jpg” you put just after image.php in your examples is just something like eye-candy, I think you should remove it altogether.

    2. Documentation in the php file itself is ok, but a simple readme.txt or howto.txt in your zip file would help many a clueless user. ;)

    3. You write: “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.” I found that changing the “quality” parameter doesn’t make a new image. Moreover, if I first generate and image with quality=10, and then use quality=95, the first generated image has 10 (utterly poor) quality and then the script doesn’t make a new image. I guess a typical real-life scenario would go like this: user asks for a generated image, then wants to try the “quality” parameter because the weight of generated images is a little too high, but nothing changes when he uses that parameter.

    4. Thank you for this script. :)

34. (post author) Joe Lencioni said
    March 25th, 2008 at 4:33 pm

    @Florent V: Thanks for bringing up those points.

    1. I add the “/coffee-bean.jpg” to my example for two reasons. First, if you try to save the file it will save it as this part of the URL instead of as “image.php”. In this respect, it’s just a nice little thing to do for the user. Secondly, (and I don’t have any research to back this up–it’s just my own theory) I think that search engines like Google Image Search might like images that have interesting names more than images called “image.php”.

    2. I agree. :)

    3. Bingo! This is a bug. Apparently, when I added the quality feature, I forgot to add some code to make the caching behave properly. I will try to update this ASAP (probably sometime tonight). Thanks for pointing this out.

    4. You are very welcome. I’m glad you like it.

35. retomi said
    March 25th, 2008 at 7:04 pm

    imageconvolution() does not appear in PHP with non-bundled GD libraries, so i added this after line 63:

    
    //Made by Chao Xu(Mgccl) 2/28/07
    //www.webdevlogs.com
    if(!function_exists('imageconvolution')){
    	function ImageConvolution($src, $filter, $filter_div, $offset){
    	    if ($src==NULL) {
    	        return 0;
    	    }
    
    	    $sx = imagesx($src);
    	    $sy = imagesy($src);
    	    $srcback = ImageCreateTrueColor ($sx, $sy);
    	    ImageAlphaBlending($srcback, false);
    	    ImageAlphaBlending($src, false);
    	    ImageCopy($srcback, $src,0,0,0,0,$sx,$sy);
    
    	    if($srcback==NULL){
    	        return 0;
    	    }
    
    	    for ($y=0; $y<$sy; ++$y){
    	        for($x=0; $x> 24);
    
    	            for ($j=0; $j<3; ++$j) {
    	                $yv = min(max($y - 1 + $j, 0), $sy - 1);
    	                for ($i=0; $i> 16) & 0xFF) * $filter[$j][$i];
    	                    $new_g += (($rgb >> 8) & 0xFF) * $filter[$j][$i];
    	                    $new_b += ($rgb & 0xFF) * $filter[$j][$i];
    	                    $new_a += ((0×7F000000 & $rgb) >> 24) * $filter[$j][$i];
    	                }
    	            }
    
    	            $new_r = ($new_r/$filter_div)+$offset;
    	            $new_g = ($new_g/$filter_div)+$offset;
    	            $new_b = ($new_b/$filter_div)+$offset;
    	            $new_a = ($new_a/$filter_div)+$offset;
    
    	            $new_r = ($new_r > 255)? 255 : (($new_r  255)? 255 : (($new_g  255)? 255 : (($new_b  127)? 127 : (($new_a = 0) && ($y < $sy)) {
    	                imagesetpixel($src, $x, $y, $new_pxl);
    	            }
    	        }
    	    }
    	    imagedestroy($srcback);
    	    return 1;
    	}
    }
    

36. shan said
    March 26th, 2008 at 2:40 am

    i am new to php so please any tell me how to i implement this with my pictures it is most useful for me to developed my skill :)

37. Torgils Vestad said
    March 29th, 2008 at 9:01 am

    Great script! I started making something similar, then i came over this and used yours instead.. thank you alot, saved me alot of work.

38. Taote said
    April 2nd, 2008 at 6:57 am

    Great script!
    Look I have a trouble with PNG files:

    Fatal error: imagepng() [function.imagepng]: gd-png: fatal libpng error: zlib error in C:\Proyectos\Webs\lt\www\image.php on line 321

    I found the solution here: http://www.jhuskisson.com/code-tidbits/from-php-4-to-php-5-php-fatal-error-imagepng

    It seems on PHP5 the quality for PNG is a value from 1 to 10. I changed the line 191 to make a try and it worked.

    Can you fix this?

    Thank you.

39. (post author) Joe Lencioni said
    April 2nd, 2008 at 7:05 am

    @Taote: Thanks for pointing this out! I made some adjustments and uploaded 1.3.2. Please let me know if you come across any other issues.

40. shan said
    April 2nd, 2008 at 8:41 am

    i use small image resize it is working perfect but when i try to use gif images it doesn’t display image how can i get this if any one help me it is very useful.

41. zach said
    April 4th, 2008 at 4:46 pm

    who wants to combine Smart Image Resizer and TimThumb? :)

    http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
    source:http://timthumb.googlecode.com/svn/trunk/timthumb.php

42. shan said
    April 4th, 2008 at 11:41 pm

    now i am implement small image re-sizer in my project it is very helpful to me but how can i fix the small image re-sizer for different dimensions please its urgent if any one knows its very use full to me…

43. James said
    April 14th, 2008 at 9:48 am

    This looks good, but I can’t get it to work. If I use it like this:

    
/images/image.php/the-image.jpg?width=100&height=100&image=/images/the-image.jpg


    I get an error:

    
The requested URL /images/image.php/the-image.jpg was not found on this server.


    which seems quite reasonable to me - Apache is assuming image.php is a directory and it has a trailing slash.

    Is this an issue with my Apache setup? Or am I doing something wrong?

44. Schmappel said
    April 15th, 2008 at 10:20 am

    Very promising script indeed, thanks! However, I noticed you use $_SERVER['DOCUMENT_ROOT'] which currently seems to break the script in my ‘userdir’ server environment…

45. Matt said
    April 27th, 2008 at 4:31 pm

    Can someone write a tutorial on how to integrate Smart Image Resizer with a content management system like wordpress or textpattern?

    It would really help out those who need need to crop and resize images dynamically but don’t understand php well.

46. Marsh said
    April 28th, 2008 at 11:38 am

    Nice idea for a script, but a quick security question—would you recommend restricting/denying any external requests for imgs via the referrer? I bet you could bring the server to its knees by automating requests for a gazillion different sizes… It could be done with another .htaccess rule. (FWIW, I haven’t looked through the code, just wondering aloud.)

47. (post author) Joe Lencioni said
    April 28th, 2008 at 12:01 pm

    @Marsh: That would probably be a good idea, but if you knew what you were doing you could forge referrers in your requests so it won’t offer total security.

48. Zinth said
    April 29th, 2008 at 6:12 am

    m getting an error saying

    “Invalid src mime type: unknown”

    what does this mean????

49. (post author) Joe Lencioni said
    April 29th, 2008 at 6:48 am

    @Zinth: when the script tries to resize an image, it first performs a number of checks. One of these is the source image’s mime type to make sure it is an image (all of the mime types for images begin with “image/”). If it is not an image, it will display that error message.

    This is done to protect you against people who would try to use the script to snoop around your web server by outputting the contents of files that shouldn’t be seen by anybody (like PHP scripts and password files).

    Hopefully that helps explain things a bit. :)

50. snowgirl said
    May 4th, 2008 at 8:36 pm

    thanks for the script

51. Jeff Byrnes said
    May 4th, 2008 at 9:32 pm

    Too cool. Definitely going to use it from now on, with a mention on my blog. Cheers!

52. Jakub Hejda said
    May 5th, 2008 at 2:28 pm

    It resizes GIFs? It is posible?

53. Sj Creation said
    May 7th, 2008 at 11:43 pm

    Hi guys…
    i am a new for tha PHP. but i fell thatz cool.
    can any ones teach me how to work (how to install it) it. i mean, from first step. (step by step)
    if u can itz better. i will hope you alls help. plz…..
    any ones can mail me [sjcreation@gmail.com].
    –
    Thnx.

54. Mike said
    May 8th, 2008 at 3:42 pm

    can somebody leave a step by step instructions…?

Mentioned Elsewhere 24 Times

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

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

2. » Smart Image Resizer — Shifting Pixel Webcreatives
   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 [...]

3. Ridurre la dimensione delle immagini con smart image resizer : sastgroup.com
   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 [...]

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

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

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

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

6. PHP: Smart Image Resizer — Oivallisia juttuja
   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. [...]

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

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

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

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

9. links for 2008-03-10 « Mandarine
   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) [...]

10. Тут Хумора.NET
    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. [...]

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

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

12. Carmine Web #2 » Blog Archive » Ridimensionare immagini con PHP
    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. [...]

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

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

14. T’as le bonjour de Jean Rat ! » Blog Archive » Les liens sympas de Jean Rat du 14/03/08 au 15/03/08
    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 [...]

15. xeRo Virtual Planet
    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. [...]

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

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

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

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

18. PHP Smart Image Resizer | David Bisset: Web Designer, Coder, Wordpress Guru
    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: [...]

19. efrees. » Smart Image Resizer
    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@这样的地址来调用图片。这种方法我曾经用过，坦白说，适用范围很窄。如果同一页面上有多个图片且均通过这种方式处理的话…… [...]

20. Links 3-08-08 to 3-25-08 | effectivedesign.org
    March 26th, 2008 at 6:46 am

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

21. links for 2008-04-08
    April 7th, 2008 at 8:32 pm

    [...] Smart Image Resizer (PHP): a simple way to create thumbnails and more on the fly — Shifting Pixel Un script php pour redimensionner des images (tags: php script image) [...]

22. Paulan korusivut — Oivallisia juttuja
    April 12th, 2008 at 6:14 pm

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

23. Resizing images via php … hawt | [ berkleebassist ]
    May 4th, 2008 at 10:33 pm

    [...] Lightbox, a fanastic GreaseMonkey script (for all you Firefox users out there.) It’s called Smart Image Resizer, and it’s a great piece of PHP that can resize images on the fly without modifying the [...]

24. Rayed’s Real Life » Blog Archive » Alriyadh.com image quality improvements
    May 8th, 2008 at 3:22 am

    [...] Influenced by: Smart Image Resizer [...]

Leave a Comment