How to Upload Image and Create Thumbnail in PHP

6 mins0
How to Upload Image and Create Thumbnail in PHP

Optimization of high-resolution images is a problem that web developers face on a regular basis while creating dynamic websites. If you allow users to upload raw images directly to your server, you may end up slowing down your website. Hence, it is a necessary skill that you should acquire. Create Thumbnail in PHP is a necessary skill that you should acquire.

We face this problem while creating user profile pages or e-commerce product pages. You want the high-resolution image to be available when someone clicks on it, but you want a smaller version of the image to be available in the preview grid. This tutorial will teach you exactly how to do this.

Why Creating Thumbnail is Essential?

  • Drastically reduces page loading times for image-heavy galleries.
  • Saves significant storage space on your hosting server.
  • Ensures consistent layout dimensions across your web application.
  • Conserves bandwidth for both the server and the mobile user.
  • Improves overall User Experience (UX) and SEO rankings.

PHP Example for Image Upload and Thumbnail Creation

Let’s look at a real-life example of a profile picture uploader. When a user updates their avatar, we want to save the original file but also generate a small 150×150 pixel version to display next to their comments or on the dashboard.

We will use a standard HTML form to select the file and a PHP script using the GD library to handle the resizing logic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Image and Create Thumbnail</title>
</head>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <label>Select Image File:</label>
        <input type="file" name="image" required>
        <input type="submit" name="submit" value="Upload">
    </form>
</body>
</html>

upload.php

<?php
if(isset($_POST["submit"])){
    $targetDir = "uploads/";
    $fileName = basename($_FILES["image"]["name"]);
    $targetFilePath = $targetDir . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
    
    $allowTypes = array('jpg', 'png', 'jpeg');
    
    if(in_array($fileType, $allowTypes)){
        if(move_uploaded_file($_FILES["image"]["tmp_name"], $targetFilePath)){
            
            $sourceImage = $targetFilePath;
            $thumbWidth = 150;
            
            list($width, $height) = getimagesize($sourceImage);
            $thumbHeight = floor($height * ($thumbWidth / $width));
            
            $virtualImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
            
            if($fileType == 'jpg' || $fileType == 'jpeg'){
                $source = imagecreatefromjpeg($sourceImage);
            } elseif($fileType == 'png'){
                $source = imagecreatefrompng($sourceImage);
            }
            
            imagecopyresampled($virtualImage, $source, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height);
            
            $thumbPath = "uploads/thumb_" . $fileName;
            
            if($fileType == 'jpg' || $fileType == 'jpeg'){
                imagejpeg($virtualImage, $thumbPath);
            } elseif($fileType == 'png'){
                imagepng($virtualImage, $thumbPath);
            }
            
            echo "Success! Image uploaded and thumbnail generated.";
            
        } else {
            echo "Sorry, there was an error uploading your file.";
        }
    } else {
        echo "Sorry, only JPG, JPEG, and PNG files are allowed.";
    }
}
?>

Once user select file and upload it. The process begins when the script moves the uploaded file to a specific folder on your server. Once the original file is safe, the script measures its dimensions. We calculate the new height mathematically to maintain the aspect ratio, ensuring the image does not look stretched or squashed.

Conclusion

Optimizing media is a cornerstone of good web development. You can address the issue of slow page loads before they even begin by putting this logic into practice. Now that you have a working script that does the heavy lifting, you can automatically create a thumbnail in PHP each time a user interacts with your upload forms. This straightforward addition gives your web projects a polished, quick, and responsive environment.