How to optimize images in PHP? - php

Question

I've a website where users can save their profile image (avatar).
I'd like to make some optimization to the image when they load it.
I mean, it's an avatar image, doesn't need full resolution, nor great size.
What can i do? I've been thinking:
Resize it
Low the quality
Possible:
convert it to GIF
Color fill to transparent PNGs
There are some library better (simpler) than GD to do this?
Thanks a lot!

Answer 1

GD is how this is done. It sounds like a simple operation, but there are a number of factors that you really want to get right if you're going to do this. All in all, this winds up being several hundred lines of code to take care of everything.
My recommendation is that although you may wish to resize an image (which requires a lossy recompression if using JPEG), converting it to a GIF is a bad idea. You don't know what the source type is, so doing that is problematic.
Here's my recommended flow:
1) Resize the image to your output format. You can force a cropping aspect ratio here as well, if you want.
2) Determine original source mode:
8 bit indexed (GIF/PNG8): Save as PNG8 (format tends to be smaller than GIF).
16-24 bit: Save as JPG. Quality is up to you, but 70% is a good baseline.
32 bit (PNG24): Save as PNG24, taking care to maintain the transparency.
Note, this solution pretty much destroys any 'animated' gifs, but... that's what happens when you try to resize an animated gif.
Although... I also highly recommend to NOT do this as a single stage process and removing the original files. This is the kind of thing that will only come back to bite you later.
Disk space is cheap these days... far better to store the original in a high quality format (even at 2K x 2K resolution), then create an image service which will serve the resolution/quality you need and cache the result.

Answer 2

You could use the Asido imaging library for PHP to resize your images. This library makes use of GD though. Here is some example usage code.
The resizing and other imaging operations are preferably done after the uploading of new images (except if you want to save the higher resolution for some other purpose).

Answer 3

<p>
//This function will proportionally resize image
function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)
{
//Check Image size is not 0
if($CurWidth <= 0 || $CurHeight <= 0)
{
return false;
}
//Construct a proportional size of new image
$ImageScale = min($MaxSize/$CurWidth, $MaxSize/$CurHeight);
$NewWidth = ceil($ImageScale*$CurWidth);
$NewHeight = ceil($ImageScale*$CurHeight);
$NewCanves = imagecreatetruecolor($NewWidth, $NewHeight);
// Resize Image
if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))
{
switch(strtolower($ImageType))
{
case 'image/png':
imagepng($NewCanves,$DestFolder);
break;
case 'image/gif':
imagegif($NewCanves,$DestFolder);
break;
case 'image/jpeg':
case 'image/pjpeg':
imagejpeg($NewCanves,$DestFolder,$Quality);
break;
default:
return false;
}
//Destroy image, frees memory
if(is_resource($NewCanves)) {imagedestroy($NewCanves);}
return true;
}
}
</p>

Answer 4

I'd pick some standard avatar image sizes you'll need for your page, like
medium size for a profile page, if you have one and
small size which appears next to the user's post
you get the idea, just what you need
And when the user uploads a new avatar, you convert it to the formats you'll need with a reasonable quality setting. I'm assuming you're going for JPEGs, because this is a good catch-all format for this use case. PNGs do poor with photographic content, JPEGs are not so great for drawings, but then most avatars you see are photos. I wouldn't use GIFs any more these days, they limit to 256 colors and have only a 1-bit alpha channel.