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.

Also, read:

• Upload Multiple Images using jQuery, PHP & MySQL
• Reduce or Compress Image Size While Uploading in PHP
• Image Upload without Page Refresh with PHP and jQuery
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

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 may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download