- PHPGraphLib Graphing Library
- SkinnyTip Tooltip Library
- Web Development Blog
PHP has the built in ability to optimize images which can be very useful in web development. Take a social networking site for example - if you let users upload an unlimited amount of unoptimized images, you could find both your server hard drives and your bandwidth allotment quickly overrun. The solution is to optimize and possibly resize user images when they are uploaded. How does this work? The below example shows how images can be optimized in PHP.
For more information on why image optimization is needed and how to do it in Photoshop without PHP, click here: Image Optimization.
In order to optimize an image in PHP, you need to have an image saved to a known location. You can then call the following bit of php code to load the image into PHP's memory, and the output it to a destination with a given quality. The function that does all the work is imagejpeg(). This function takes the destination of the output image and a quality specification (1-100) in addition to passing it the image object you created.
<?php $filename="myimage.jpg"; $img = imagecreatefromjpeg($filename); header("Content-Type: image/jpeg"); imagejpeg($img, $filename, 100); ?>
One thing to keep in mind is that you can never optimize an image to higher quality than the quality of the original image. So, if an image was saved in PhotoShop as a low quality image, and then you try to optimize it in PHP, you will never be able to increase the image past the quality of the original low quality image. To save headaches always start with the highest quality image possible.
Pretty simple right? Note that this script does not display an image on the screen. Instead it outputs the image to a file, shown above as the $filename variable. Because we created the image and output the image using the same $filename variable, the image will overwrite itself. If you wanted to output the image somewhere else, you could change the destination variable to something else. For example: imagejpeg($img, "optimized_images/my_new_image.jpg", 75); If you wanted to display an image on the screen you could give the destination operator as an empty string, and this would send the image to the browser.
So what does this numeric quality value mean? There is no exact science to picking the best quality number. The higher the number, the better the quality, but the larger the filesize. Sometimes, the 100 value will actually have a larger filesize than the original image. Below is a test case where i experimented with the quality of an optimized image.
I tested the optimization of the below image at various quality levels. The goal of this test is to find the best quality for an everyday use web image at the size shown below. The original image was saved in an unknown program years ago at a high quality setting. Your own results may differ depending on original image quality.
Results: Original Image has good image quality
Optimized Image - 90 Quality
Results: Still mostly indistinguishable from original image
Optimized Image - 80 Quality
Results: Very close to original image.
Optimized Image - 70 Quality
Results: Image is starting to show signs of being optimized. You can see "static" around some of the straight lines of the church.
Optimized Image - 60 Quality
Results: Image quality is noticeably less than original, but still not unacceptable for some applications.
Optimized Image - 50 Quality
Results: Image quality has deteriorated, and the saving of 1kb versus 60 quality is not worth it.
Optimized Image - 40 Quality
Results: Poor quality - unacceptable
Taking both quality and size into consideration, I would choose 70 quality for ordinary images needing to be optimized, and I would choose 80 quality for cases where the image is going to scrutinized closer (photography websites, e-commerce). Images with quality higher than 80 have a greatly increased filesize (see graph below) without much increased quality.
So now that you have determined the ideal image quality, what do you do next? As mentioned in the opening paragraph, you could also resize the image at the same time you optimize it. Pictures from today's digital cameras are far too large for webpages and need to be resized substantially before display. PHP's imagecopyresampled() and imagecopyresized() functions can do this for you.
Need to resize and optimize multiple images at once? If you have PHP 5+ you can use the scandir() function to get an array of all the files in a specific folder. You could then loop through them one by one and resize them all. If you're still using PHP 4, then the readdir() function will let you loop through all the files in a directory.