Upload an image and downsize it (in KB`s) using PHP and GD

Before resizing

24.80KB

And After Resizing

3.52KB

The original image was a very big image (larger than 3000px and around 3MB) and I`we resized it with Photoshop to 100px x 75px to a high quality JPG image. After resizing it with Photoshop it was 24.80KB in size and after upload and resizing with this script now it`s only 3.52KB in size

The upload form

upload-form.php:

<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Select image: <input name="theimage" type="file" /><br />
<input type="submit" value="Upload image" />
</form>

enctype="multipart/form-data" - this line tells the server that you want to send a file
MAX_FILE_SIZE - limits the maximum file size in bytes
type="file" - this is the file selecting input

Checking the image

First we need to check the file for 3 different problems:
- it was submitted or not ?
- it was uploaded ?
- it is too big ?

upload.php:

<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
}
else {
echo 'There is no image!';
}
?>

Check image type

Now we will check the type of the file, because we will accept only .jpg .gif and .png. At this step we will use some GD, too, because we will put our image in a variable:

<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
}
}
else {
echo 'There is no image!';
}
?>

Working with transparent images

We will downsize the images by converting it to .jpg. The jpg images can not be transparent and when the user uploads a transparent image, the transparent part will be painted in black. To make the transparent part white we need to create a white image with the same size as our uploaded image and then copy the uploaded image over the white image:

<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
}
}
}
else {
echo 'There is no image!';
}
?>

Downsize the image

This is the final step, when we save the image in .jpg format:

<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
$image = $background;
$filename = explode(".",$_FILES['theimage']['name']);
$filename = $filename[0];
imagejpeg($image,$_SERVER['DOCUMENT_ROOT'] . '/thumbnails/' . $filename . '.jpg',90);
imagedestroy($image);
echo 'Your image: <img src="/thumbnails/' . $filename . '.jpg" />';
}
}
}
else {
echo 'There is no image!';
}
?>

Thanks for reading!

Thanks for reading my tutorial! I hope it will help! You could use this script for any website that accepts image uploads from users and it can be easily customized to fit any website that supports GD

Web Development / PHP