Image Uploads & Processing 🖼️

<?php
// Which image library do you actually have? Find out before you build anything.
// PHP has two: GD (built into most installs) and Imagick (a separate extension
// wrapping ImageMagick - handles 200+ formats and gives sharper results).

// gd_info() throws if GD is missing, so guard with extension_loaded() first.
if (extension_loaded('gd')) {
    $gd = gd_info();
    echo "GD is installed (version {$gd['GD Version']})\n";
    echo "WebP support: " . ($gd['WebP Support'] ? "yes" : "no") . "\n";
} else {
    echo "GD is NOT installed\n";
}

// Imagick is a class, so check the class exists rather than an extension flag.
echo "Imagick: " . (class_exists('Imagick') ? "installed" : "not installed") . "\n";
?>

GD is installed (version bundled (2.1.0 compatible))
WebP support: yes
Imagick: not installed

<?php
// Two ways to get an image "resource" you can draw on or save.

// 1) LOAD an existing file. getimagesize() reads the header first so you know
//    the real type and dimensions BEFORE loading the whole thing into memory.
[$w, $h, $type] = getimagesize('photo.jpg');   // e.g. [4000, 3000, 2]
echo "Source is {$w} x {$h}, type code {$type}\n";   // type 2 = IMAGETYPE_JPEG

$img = imagecreatefromjpeg('photo.jpg');   // a GD image resource in memory

// 2) CREATE a blank true-colour canvas from scratch (great for charts/badges).
$canvas = imagecreatetruecolor(200, 80);                 // 200 x 80 pixels
$blue   = imagecolorallocate($canvas, 30, 90, 220);      // pick an RGB colour
imagefill($canvas, 0, 0, $blue);                         // flood-fill it blue

imagejpeg($img, 'copy.jpg');     // save the loaded photo back out
imagepng($canvas, 'badge.png');  // save the blank canvas as PNG

// ALWAYS free the memory - GD images are not garbage-collected promptly.
imagedestroy($img);
imagedestroy($canvas);

echo "Saved copy.jpg and badge.png\n";
?>

Source is 4000 x 3000, type code 2
Saved copy.jpg and badge.png

<?php
// Resize while PRESERVING ASPECT RATIO. The trick is one scale ratio applied to
// BOTH width and height - never two different ratios, or the image squashes.

function resizeFit(string $src, string $dest, int $maxW, int $maxH, int $quality = 80): void
{
    [$w, $h] = getimagesize($src);                 // original size, e.g. 4000 x 3000

    // Scale to FIT inside the box. min() keeps both sides within bounds.
    // The 1.0 cap means we shrink but never blow a small image up (which blurs it).
    $ratio = min($maxW / $w, $maxH / $h, 1.0);     // e.g. min(0.2, 0.2, 1) = 0.2
    $newW  = (int) round($w * $ratio);             // 800
    $newH  = (int) round($h * $ratio);             // 600

    $source = imagecreatefromjpeg($src);
    $canvas = imagecreatetruecolor($newW, $newH);

    // imagecopyresampled does smooth bilinear resampling - far better quality
    // than imagecopyresized, which just drops pixels and looks jagged.
    imagecopyresampled($canvas, $source, 0, 0, 0, 0, $newW, $newH, $w, $h);

    imagejpeg($canvas, $dest, $quality);
    imagedestroy($source);
    imagedestroy($canvas);
}

resizeFit('photo.jpg', 'photo-800.jpg', 800, 600);
echo "Resized 4000x3000 -> 800x600 (aspect ratio kept)\n";
?>

Resized 4000x3000 -> 800x600 (aspect ratio kept)

<?php
// A square thumbnail needs CROP-TO-FILL: scale so the image COVERS the box
// (use max(), not min()), then chop the overflow off centre.

function thumbnail(string $src, string $dest, int $size, int $quality = 80): void
{
    [$w, $h] = getimagesize($src);                 // e.g. 4000 x 3000

    $ratio   = max($size / $w, $size / $h);        // cover, so the box is filled
    $scaledW = (int) round($w * $ratio);
    $scaledH = (int) round($h * $ratio);

    // Centre the crop: half the overflow on each side.
    $cropX = (int) round(($scaledW - $size) / 2);
    $cropY = (int) round(($scaledH - $size) / 2);

    $source = imagecreatefromjpeg($src);
    $scaled = imagecreatetruecolor($scaledW, $scaledH);
    imagecopyresampled($scaled, $source, 0, 0, 0, 0, $scaledW, $scaledH, $w, $h);

    $thumb = imagecreatetruecolor($size, $size);
    // imagecopy lifts the centred $size x $size square out of the scaled image.
    imagecopy($thumb, $scaled, 0, 0, $cropX, $cropY, $size, $size);

    imagejpeg($thumb, $dest, $quality);
    imagedestroy($source);
    imagedestroy($scaled);
    imagedestroy($thumb);
}

thumbnail('photo.jpg', 'thumb-150.jpg', 150);
echo "Created a 150x150 centre-cropped thumbnail\n";
?>

Created a 150x150 centre-cropped thumbnail

<?php
// Stamp a semi-transparent text watermark onto the bottom-right corner.

$img = imagecreatefromjpeg('photo.jpg');
$w   = imagesx($img);   // width  of the loaded image
$h   = imagesy($img);   // height of the loaded image

// The 4th argument (127) of imagecolorallocatealpha is the alpha: 0 = solid,
// 127 = fully transparent. 75 gives a soft, see-through white.
$white = imagecolorallocatealpha($img, 255, 255, 255, 75);

$text = '(c) My Site';
$font = 5;                                   // built-in GD font (1-5)
$tx   = $w - imagefontwidth($font) * strlen($text) - 12;   // 12px from the right
$ty   = $h - imagefontheight($font) - 10;                  // 10px from the bottom

imagestring($img, $font, $tx, $ty, $text, $white);   // draw the watermark

imagejpeg($img, 'watermarked.jpg', 90);
imagedestroy($img);

echo "Watermarked photo saved\n";
?>

Watermarked photo saved

<?php
// Convert any supported image to WebP - typically 25-35% smaller than JPEG and
// 80%+ smaller than PNG, with the same visual quality. Huge for page speed.

// getimagesize() returns the type code so you can pick the right loader.
$type = getimagesize('photo.png')[2];   // e.g. IMAGETYPE_PNG (3)

$img = match ($type) {
    IMAGETYPE_JPEG => imagecreatefromjpeg('photo.png'),
    IMAGETYPE_PNG  => imagecreatefrompng('photo.png'),
    IMAGETYPE_GIF  => imagecreatefromgif('photo.png'),
    default        => throw new RuntimeException("Unsupported type: {$type}"),
};

// The 3rd argument is quality, 0-100. 80 is a great default - near-lossless
// to the eye but a fraction of the file size.
imagewebp($img, 'photo.webp', 80);
imagedestroy($img);

$before = filesize('photo.png');
$after  = filesize('photo.webp');
$saved  = round((1 - $after / $before) * 100);
echo "PNG {$before} bytes -> WebP {$after} bytes ({$saved}% smaller)\n";
?>

PNG 412840 bytes -> WebP 98214 bytes (76% smaller)

<?php
// Phone photos carry EXIF data: an "Orientation" flag, plus GPS coordinates and
// the camera model. Two jobs: ROTATE so the photo looks right, and STRIP the
// metadata so you do not leak where the user was standing.

$img = imagecreatefromjpeg('phone.jpg');

// exif_read_data needs the EXIF extension; @ silences the notice if there's none.
$exif = @exif_read_data('phone.jpg');
$orientation = $exif['Orientation'] ?? 1;   // 1 = already upright

// The orientation flag tells you how the camera was held. Rotate to compensate.
$img = match ($orientation) {
    3       => imagerotate($img, 180, 0),   // upside down
    6       => imagerotate($img, -90, 0),   // rotated 90 clockwise
    8       => imagerotate($img, 90, 0),    // rotated 90 anticlockwise
    default => $img,                        // 1, or unknown: leave it
};

// Re-saving through GD writes a CLEAN file with NO EXIF - the GPS/metadata is
// gone automatically, and the pixels are already rotated correctly.
imagejpeg($img, 'phone-fixed.jpg', 85);
imagedestroy($img);

echo "Rotated for orientation {$orientation} and stripped EXIF\n";
?>

Rotated for orientation 6 and stripped EXIF

<?php
// 🎯 YOUR TURN — finish the aspect-ratio maths, then run it.
// A 1600x900 source must fit inside a 400x400 box without distortion.

$w = 1600;
$h = 900;
$maxW = 400;
$maxH = 400;

// 1) Pick the SMALLER scale so both sides fit, and never upscale.
$ratio = ___;            // 👉 use min($maxW / $w, $maxH / $h, 1.0)

// 2) Multiply both sides by the SAME ratio and round to whole pixels.
$newW = (int) round($w * ___);   // 👉 multiply by $ratio
$newH = (int) round($h * ___);   // 👉 multiply by $ratio  (same ratio!)

echo "New size: {$newW} x {$newH}\n";

// ✅ Expected output:
//    New size: 400 x 225
?>

New size: 400 x 225

<?php
// 🎯 YOUR TURN — convert a JPEG to WebP at quality 80.
// The loader and the save call each need ONE function name filled in.

$img = ___('photo.jpg');     // 👉 load a JPEG: imagecreatefromjpeg

___($img, 'photo.webp', 80); // 👉 save as WebP: imagewebp  (3rd arg = quality)

imagedestroy($img);          // free the memory
echo "Converted photo.jpg to photo.webp\n";

// ✅ Expected output:
//    Converted photo.jpg to photo.webp
?>

Converted photo.jpg to photo.webp

<?php
// Doing all of the above by hand is verbose. The Intervention Image library
// wraps GD/Imagick in one fluent API: install with  composer require intervention/image
require 'vendor/autoload.php';

use Intervention\Image\ImageManager;
use Intervention\Image\Drivers\Gd\Driver;

$manager = new ImageManager(new Driver());   // or Imagick\Driver for sharper output

$image = $manager->read('photo.jpg');        // reads EXIF orientation for you

// Chain operations - each returns the image so you can keep going.
$image->cover(300, 300)                       // crop-to-fill a 300x300 square
      ->toWebp(80)                            // encode as WebP, quality 80
      ->save('avatar.webp');                  // write it to disk

// scaleDown() is the safe resize: fits inside the box and NEVER upscales.
$manager->read('photo.jpg')
        ->scaleDown(width: 800)
        ->save('photo-800.jpg');

echo "Intervention Image: avatar + 800px copy written\n";
?>

Intervention Image: avatar + 800px copy written