PHP code refactoring to provide image with specific size

Question

The code below aims to provide an image with specific measures to minimize its size and thus optimize the web-site loading.

Problem

The image takes more than 1 second to be provided, making it a considerable weight in the initial web-site loading:

The size collected is 76.5KB but the waiting time for the server is scary being between 800ms and 900ms:

Original image
If you pull the original image, it takes about 430ms to 160.7KB.

PHP code

The code below receives the width and height of the screen.
Prepares the image for incoming measurements and returns it to the browser:

ob_start("ob_gzhandler");

$file = "bg_body.jpg";

if (is_file($file)) {    
    $source_image = imagecreatefromjpeg($file);
    $source_imagex = $dest_imagex = imagesx($source_image);
    $source_imagey = $dest_imagey = imagesy($source_image);

    if (isset($_GET["w"]) && ctype_digit($_GET["w"])) {
        $dest_imagex = $_GET["w"];
    }

    if (isset($_GET["h"]) && ctype_digit($_GET["h"])) {
        $dest_imagey = $_GET["h"];
    }

    $dest_image = imagecreatetruecolor($dest_imagex, $dest_imagey);
    imagecopyresampled($dest_image, $source_image, 0, 0, 0, 0, $dest_imagex, $dest_imagey, $source_imagex, $source_imagey);
    header("Content-Type: image/jpeg");
    imagejpeg($dest_image,NULL,70);

} else {
    echo "Image file not found!";
}

ob_end_flush();

Question

How can I optimize this code with the ultimate aim of reducing the time it takes to generate the image to send to the browser?

Answer 1

Although there may be some specific optimization that can be done in the image resizing algorithm, I believe that the correct output for your problem is to cache images of different sizes at the time of upload and not at the time of viewing or download of the image.

I’ve been reading about the way how Facebook provides billions of photos. Basically they store the image in 4 different sizes and seek to ensure that the reading is done quickly.

In your case, one possibility is to create some size variations and then send the one that comes closest to the size requested by the user, being the final resizing, a fine adjustment, made via width and height in HTML or CSS.

Another technique would be to store the resized images after generating them and, if they already exist, to directly read the file. This will slow down the first access, since in addition to resizing the image it will be necessary to write it on disk, however this is good if the amount of views is large, since only the first access will be impacted and the rest will be served without further processing.

In this second scenario, it is still possible to use ranges of values to avoid incurring in generating images of similar sizes. For example, the 1000-point wide image is used if the user requests images in the range 801 to 1000, while the 800-pixel version is used if the request is 601 to 600 pixels.

Finally, the two proposals consist of creating image caches (1) at the time of sending or (2) at the first request.

Obviously, the two have different effects on the performance and storage required. Create on-demand images delays first access but saves disk.