Compress Image Before Upload using PHP

Image manipulation is always one of the most typical tasks for a software developer. It is very common to upload images to the server. Large images are upload and that takes too much time load and effects web application ranking. So the uploaded images are very important and it should be reduced as much as possible. Users mostly upload their images for setting their profile image or to submit files and more.

In this tutorial, we will learn you how to reduce or compress image size while uploading using PHP. We will cover this tutorial in easy steps with live demo to Compress Image Before Upload using PHP.

Also Read : CCAvenue Payment Gateway Integration using PHP

Before started to implement the Compress Image Before Upload using PHP, look files structure:

compress-image-before-upload-using-php
- assets
  - css
    - style.css
  - uploads
  - images
- templates
  - header.php
  - footer.php
- index.php
- upload.php

Step 1: Create File Upload HTML Form

Create an HTML form with a input file type field and a submit button. Make sure the

method='post'
enctype='multipart/form-data'

<?php 
include('templates/header.php');?>  
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>Compress Image Before Upload using PHP</h2>
    </div>
    <form action="upload.php" id="upload-form" class="upload-form" method="post" enctype="multipart/form-data">
         <div class="row">  
          <div class="form-group col-md-12">
            <label for="inputEmail4">Choose a file:</label>
            <input type="file" class="form-control" id="upl-file" name="upl_image">  
            <span id="chk-error"></span>
          </div>
          <div class="col-md-12">
                <button type="submit" class="btn btn-primary mt-3 float-right" id="upload-file"><i class="fa fa-upload" aria-hidden="true"></i> Upload</button>
            </div>
        </div>
    </form>
</div>
</section>
<?php include('templates/footer.php');?>

<?php

include('templates/header.php');?>

<h2>Compress Image Before Upload using PHP</h2>

</div>

<label for="inputEmail4">Choose a file:</label>

</div>

<button type="submit" class="btn btn-primary mt-3 float-right" id="upload-file"><i class="fa fa-upload" aria-hidden="true"></i> Upload</button>

</div>

</form>

</div>

</section>

<?php include('templates/footer.php');?>

Step 2: Compress and Upload Image with PHP

Create action file named upload.php handles the image compression and upload

<?php 
// File uploading path 
$uploadPath = "assets/uploads/"; 

$imageUploadPath = '';
$status = $msgStatus = ''; 
if(!empty($_FILES["upl_image"]["name"])){ 
    $status = 'error'; 
    if(!empty($_FILES["upl_image"]["name"])) { 
        // File info 
        $fileName = basename($_FILES["upl_image"]["name"]);
        $imageUploadPath = $uploadPath . $fileName; 
        $fileType = pathinfo($imageUploadPath, PATHINFO_EXTENSION); 
         
        // Allow certain file formats 
        $allowTypes = array('png', 'jpg','jpeg','gif'); 
        if(in_array($fileType, $allowTypes)){ 
            // Image tmp source 
            $imgTmp = $_FILES["upl_image"]["tmp_name"]; 
             
            // reduce image size and upload image 
            $compressedImg = compressImg($imgTmp, $imageUploadPath, 80); 
            
            if($compressedImg){ 
                $status = 'ok'; 
                $msgStatus = "Image compressed successfully."; 
            }else{ 
                $msgStatus = "Image compress failed."; 
            } 
        }else{ 
            $msgStatus = 'Allowed only extension: PNG, JPG, JPEG, & GIF.'; 
        } 
    }else{ 
        $msgStatus = 'Please select an image.'; 
    } 
    echo $msgStatus;
} 

// custom function reduce file size and uploaf
function compressImg($imageSource, $imageDestination, $quality) { 
    // Get image information
    $imageInfo = getimagesize($imageSource); 
    // mime
    $mime = $imageInfo['mime'];  
    switch($mime){ 

        case 'image/jpeg': 
            $image = imagecreatefromjpeg($imageSource); 
            break; 

        case 'image/png': 
            $image = imagecreatefrompng($imageSource); 
            break; 

        case 'image/gif': 
            $image = imagecreatefromgif($imageSource); 
            break; 

        default: 
            $image = imagecreatefromjpeg($imageSource); 
    } 
     
    // Save image 
    imagejpeg($image, $imageDestination, $quality); 
    // Return reduce image 
    return $imageDestination; 
}
?>

<?php

// File uploading path

$uploadPath = "assets/uploads/";

$imageUploadPath = '';

$status = $msgStatus = '';

if(!empty($_FILES["upl_image"]["name"])){

$status = 'error';

if(!empty($_FILES["upl_image"]["name"])) {

// File info

$fileName = basename($_FILES["upl_image"]["name"]);

$imageUploadPath = $uploadPath . $fileName;

$fileType = pathinfo($imageUploadPath, PATHINFO_EXTENSION);

// Allow certain file formats

$allowTypes = array('png', 'jpg','jpeg','gif');

if(in_array($fileType, $allowTypes)){

// Image tmp source

$imgTmp = $_FILES["upl_image"]["tmp_name"];

// reduce image size and upload image

$compressedImg = compressImg($imgTmp, $imageUploadPath, 80);

if($compressedImg){

$status = 'ok';

$msgStatus = "Image compressed successfully.";

}else{

$msgStatus = "Image compress failed.";

}

}else{

$msgStatus = 'Allowed only extension: PNG, JPG, JPEG, & GIF.';

}

}else{

$msgStatus = 'Please select an image.';

}

echo $msgStatus;

}

// custom function reduce file size and uploaf

function compressImg($imageSource, $imageDestination, $quality) {

// Get image information

$imageInfo = getimagesize($imageSource);

// mime

$mime = $imageInfo['mime'];

switch($mime){

case 'image/jpeg':

$image = imagecreatefromjpeg($imageSource);

break;

case 'image/png':

$image = imagecreatefrompng($imageSource);

break;

case 'image/gif':

$image = imagecreatefromgif($imageSource);

break;

default:

$image = imagecreatefromjpeg($imageSource);

}

// Save image

imagejpeg($image, $imageDestination, $quality);

// Return reduce image

return $imageDestination;

}

Also Read : Razorpay Payment Gateway Integration using PHP with cURL

Demo Download