Reduce Image Size While Uploading in PHP

The image upload functionality is common in web projects that allow users to upload images to set profile picture or maintain their image gallery. Mostly large image files are upload and that takes too much time load and effects website ranking. So the uploaded images is very important and it should be reduced as much as possible. So in this tutorial, you will learn how to reduce or compress image size without loosing quality while uploading using PHP. The tutorial is explained in very easy steps with live demo and link to download source code.



So let’s start the coding. We will have following file structure to reduce or compress image size without loosing quality while uploading using PHP.

• index.php


• upload.js


• upload.php

Steps1: Create Image Upload Form
First we will create image upload form HTML in index.php. We will handle image upload in upload.php when form submitted.
<div class="container">
<h2>Reduce or Compress Image Size While Uploading in PHP</h2>
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php">
<label>Choose Images to Upload</label>
<input type="file" name="upload_images" id="image_file">
<div class="file_uploading hidden">
<label> </label>
<img src="uploading.gif" alt="Uploading......"/>
</div>
</form>
<div id="uploaded_images_preview"></div>
</div>



Steps2: Handle Image Upload Form Submit using jQuery
As we will handle form submit using jQuery Form plugin, so we need to include plugin files.
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/upload.js"></script>



Steps3: Handle Image Upload Form Submit using jQuery
We will handle image upload form submit using jQuery change event.
$(document).ready(function(){
$('#image_file').on('change',function(){
$('#upload_form').ajaxForm({
target:'#uploaded_images_preview',
beforeSubmit:function(e){
$('.file_uploading').show();
},
success:function(e){
$('.file_uploading').hide();
},
error:function(e){
}
}).submit();
});
});


Steps4: Handle Image Upload and Image Compress
Now finally we will handle image upload and compress functionality in upload.php. We have created compressImage() function to compress "JPG, GIF or PNG" image files. We have passed default image quality value in image compress PHP functions. The default image quality value can be change according to image quality requirement. Below is complete PHP code with function to upload and compress image. In this example code, we are uploading original image file and and then compress that image file and renamed with "min-" in same directory.

<?php
$file_type_error = '';
if($_FILES['upload_images']['name']) {
$upload_dir = "uploads/";
if (($_FILES["upload_images"]["type"] == "image/gif") ||
($_FILES["upload_images"]["type"] == "image/jpeg") ||
($_FILES["upload_images"]["type"] == "image/png") ||
($_FILES["upload_images"]["type"] == "image/pjpeg")) {
$file_name = $_FILES["upload_images"]["name"];
$extension = end((explode(".", $file_name)));
$upload_file = $upload_dir.$file_name;
if(move_uploaded_file($_FILES['upload_images']['tmp_name'],$upload_file)){
$source_image = $upload_file;
$image_destination = $upload_dir."min-".$file_name;
$compress_images = compressImage($source_image, $image_destination);
}
} else {
$file_type_error = "Upload only jpg or gif or png file type";
}
}
// created compressed JPEG file from source file
function compressImage($source_image, $compress_image) {
$image_info = getimagesize($source_image);
if ($image_info['mime'] == 'image/jpeg') {
$source_image = imagecreatefromjpeg($source_image);
imagejpeg($source_image, $compress_image, 75);
} elseif ($image_info['mime'] == 'image/gif') {
$source_image = imagecreatefromgif($source_image);
imagegif($source_image, $compress_image, 75);
} elseif ($image_info['mime'] == 'image/png') {
$source_image = imagecreatefrompng($source_image);
imagepng($source_image, $compress_image, 6);
}
return $compress_image;
}
?>


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]