Image Uploads & Processing 🖼️

Handle user image uploads securely, resize and crop with GD and Imagick, and optimize for the web with WebP conversion.

What You'll Learn in This Lesson

• Securely validate and handle file uploads
• Prevent malicious file upload attacks
• Resize, crop, and create thumbnails with GD
• Convert images to WebP for 30-50% smaller files
• Generate responsive image sizes automatically

Note: PHP runs on a server. Our examples simulate PHP logic using JavaScript. To run real PHP, install PHP.

🎯 Real-World Analogy: Image processing is like a photo lab. When a customer drops off a photo (upload), the lab first checks it's a real photo and not something dangerous (validation). Then they create prints in different sizes (resizing), crop to fit frames (thumbnails), and convert to the best format for the customer's needs (WebP optimization).

Secure File Uploads

File uploads are one of the most dangerous features in web apps. Never trust the file extension — attackers rename shell.php to shell.php.jpg. Always validate the actual MIME type using finfo, enforce size limits, and generate random filenames to prevent path traversal attacks.

Try It: Secure Upload Validation

Validate file type, size, and extension; generate safe filenames

Try it Yourself »

JavaScript

// Secure Image Upload Handling in PHP
console.log("=== File Upload Security Checklist ===");
console.log();

class ImageUploader {
  constructor(config) {
    this.maxSize = config.maxSize || 5 * 1024 * 1024; // 5MB
    this.allowedTypes = config.allowedTypes || ["image/jpeg", "image/png", "image/webp", "image/gif"];
    this.uploadDir = config.uploadDir || "/uploads/images/";
    this.errors = [];
  }

  validate(file) {
    this.errors = [];
    
    // Check file exists
    if (!file || !fil
...

Resizing & Optimization

Serving a 4000×3000 original to mobile users wastes bandwidth. Generate multiple sizes (thumbnail, small, medium, large) and convert to WebP format for 30-50% smaller files with the same visual quality. GD is built into PHP; Imagick offers higher quality for professional use.

Try It: Image Resizing Pipeline

Generate responsive image sizes and convert to WebP

Try it Yourself »

JavaScript

// Image Resizing & Optimization with GD and Imagick
console.log("=== PHP Image Libraries: GD vs Imagick ===");
console.log();
console.log("  Feature          | GD Library      | Imagick");
console.log("  ─────────────────┼─────────────────┼──────────────────");
console.log("  Built-in         | Yes (usually)   | Requires extension");
console.log("  Format support   | JPEG, PNG, GIF  | 200+ formats");
console.log("  Quality          | Good            | Excellent");
console.log("  Memory usage   
...

⚠️ Common Mistakes

⚠️

Trusting $_FILES['type'] — This comes from the browser and can be spoofed. Always use finfo_file() to check actual MIME type from file bytes.

⚠️

Using original filenames — Attackers can craft names with ../ to escape your upload directory. Always generate random names.

💡

Pro Tip: Store uploads outside the web root and serve them through a PHP script — this prevents direct execution of any uploaded PHP files.

📋 Quick Reference — Image Processing

Function	Purpose
imagecreatefromjpeg()	Load JPEG into GD resource
imagecopyresampled()	Resize with high-quality resampling
imagewebp()	Save image as WebP format
finfo_file()	Detect real MIME type from file bytes
getimagesize()	Get image dimensions and type

🎉 Lesson Complete!

You can now handle image uploads securely and optimize images for the web! Next, learn to generate PDFs and export files.