Is it better to create separate preview images instead of resizing large images on the fly?

It is generally better to create separate preview images instead of resizing large images on the fly because resizing large images can consume a lot of server resources and slow down the loading time of the website. By creating separate preview images in different sizes, you can serve the appropriate size based on the device or screen resolution, resulting in faster loading times and better user experience. 

// Code snippet to create a separate preview image
$original_image = 'example.jpg';
$preview_image_large = 'preview_large.jpg';
$preview_image_medium = 'preview_medium.jpg';
$preview_image_small = 'preview_small.jpg';

// Create large preview image
create_preview_image($original_image, $preview_image_large, 800);

// Create medium preview image
create_preview_image($original_image, $preview_image_medium, 400);

// Create small preview image
create_preview_image($original_image, $preview_image_small, 200);

function create_preview_image($original_image, $preview_image, $new_width) {
    list($width, $height) = getimagesize($original_image);
    $aspect_ratio = $width / $height;
    $new_height = $new_width / $aspect_ratio;

    $original_image_resource = imagecreatefromjpeg($original_image);
    $preview_image_resource = imagecreatetruecolor($new_width, $new_height);

    imagecopyresampled($preview_image_resource, $original_image_resource, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

    imagejpeg($preview_image_resource, $preview_image);
}

Keywords

image resizing image manipulation performance GD library caching

Related Questions