Image Optimisation and Thumbnails

Image processing significantly impacts storage costs, bandwidth usage, and user experience. This guide covers optimisation strategies from upload through delivery.

Understanding Image Processing

When a user uploads an image, several processing steps may occur:

1. Validation - Verify the file is a valid image
2. Metadata handling - Extract, strip, or preserve EXIF data
3. Resizing - Scale to maximum dimensions if oversized
4. Thumbnail generation - Create display-size variants
5. Format conversion - Optimise format for delivery
6. Quality adjustment - Balance size against visual quality
7. Storage - Write processed files to appropriate locations

Configuring each step affects the balance between storage efficiency, processing load, and output quality.

Image Libraries

Multi Host supports multiple image processing libraries:

GD Library

PHP's built-in image library, available on most hosting:

$config['image_driver'] = 'gd';

Pros: Widely available, no additional installation
Cons: Higher memory usage, fewer format options, lower quality for some operations

ImageMagick

More capable library requiring separate installation:

$config['image_driver'] = 'imagick';

Pros: Better quality, more formats, streaming processing for large files
Cons: Requires installation, more complex configuration

For production deployments handling large images, ImageMagick generally provides better results and lower memory consumption.

Thumbnail Configuration

Thumbnails enable fast page loads by serving appropriately-sized images rather than full originals.

Size Definitions

Configure thumbnail dimensions for different use cases:

$config['thumbnail_sizes'] = [
    'icon' => [
        'width' => 100,
        'height' => 100,
        'crop' => true
    ],
    'small' => [
        'width' => 200,
        'height' => 200,
        'crop' => false
    ],
    'medium' => [
        'width' => 500,
        'height' => 500,
        'crop' => false
    ],
    'large' => [
        'width' => 1200,
        'height' => 1200,
        'crop' => false
    ]
];

Cropping vs Scaling

Crop mode (crop: true) produces exact dimensions by trimming edges:

• Perfect for grid layouts requiring uniform sizes
• May remove important image content
• Best for icons, avatars, and strict grid displays

Scale mode (crop: false) fits within dimensions while preserving aspect ratio:

• Maintains complete image content
• Results in varied dimensions
• Better for galleries and content display

Crop Positioning

When cropping, choose which portion to keep:

$config['crop_position'] = 'center';  // center, top, bottom, left, right

Center cropping works for most content. Face detection algorithms can improve cropping for photos, though this adds processing complexity.

Quality Settings

Compression quality dramatically affects file size. Image compression involves trade-offs between file size and visual quality:

JPEG Quality

$config['jpeg_quality'] = 85;  // 1-100

Quality guidelines:

• 90-100: Near-lossless, large files, for archival
• 80-89: High quality, moderate compression, good default
• 70-79: Visible compression, significant size reduction
• Below 70: Noticeable artifacts, use carefully

For web display, quality 80-85 typically provides the best balance.

PNG Compression

PNG uses lossless compression. The compression level affects encoding time more than file size:

$config['png_compression'] = 6;  // 0-9

Higher values take longer to encode but may produce slightly smaller files. Level 6 provides a good default.

WebP Settings

WebP offers better compression than JPEG with quality:

$config['webp_quality'] = 80;
$config['webp_method'] = 4;  // 0-6, higher = slower + smaller

WebP at quality 80 often matches JPEG at quality 90 while being significantly smaller.

Format Conversion

Converting uploads to optimal formats can reduce storage significantly.

Automatic Format Selection

$config['auto_format'] = true;
$config['preferred_format'] = 'webp';
$config['preserve_transparency'] = true;

With automatic formatting:

• JPEG images stay as JPEG (already optimised for photos)
• PNG with transparency stays as PNG or converts to WebP
• PNG without transparency may convert to JPEG or WebP
• GIF static images may convert; animations preserve format

WebP Conversion

WebP provides 25-34% smaller files than JPEG at equivalent quality:

$config['convert_to_webp'] = true;
$config['webp_only_if_smaller'] = true;

The webp_only_if_smaller option keeps the original format if WebP doesn't achieve size reduction—uncommon but possible with some images.

Browser Compatibility

WebP has broad but not universal support. Strategies for serving:

1. Content negotiation: Check Accept header and serve appropriate format
2. Multiple versions: Store both formats, serve based on capability
3. WebP with fallback: Use <picture> element in HTML

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="...">
</picture>

Processing Pipeline

Synchronous Processing

Process images during the upload request:

$config['processing_mode'] = 'sync';

Pros: Images available immediately
Cons: Slow uploads for large images, ties up web workers

Asynchronous Processing

Queue processing for background workers:

$config['processing_mode'] = 'async';
$config['processing_queue'] = 'redis';

Pros: Fast upload response, better resource utilisation
Cons: Delay before thumbnails available, more infrastructure

For sites with significant upload volume, asynchronous processing provides better user experience and server stability.

Progressive Processing

Generate thumbnails on demand rather than at upload:

$config['processing_mode'] = 'lazy';
$config['cache_generated'] = true;

Pros: No upfront processing cost, storage only for accessed sizes
Cons: First access slower, requires caching layer

Lazy processing works well when many uploads are never viewed or when thumbnail sizes change frequently.

Memory Management

Large images require significant memory during processing:

// 10,000 x 10,000 pixels = 100 megapixels
// At 4 bytes per pixel (RGBA) = 400 MB just for pixel data

Memory Limits

Set PHP memory limits appropriately:

ini_set('memory_limit', '512M');

Or configure in php.ini:

memory_limit = 512M

Dimension Limits

Reject images that would consume excessive memory:

$config['max_image_dimensions'] = 10000;  // pixels per side
$config['max_megapixels'] = 100;

Streaming Processing

ImageMagick can process large images without loading entirely into memory:

$config['imagick_memory_limit'] = '256MB';
$config['imagick_map_limit'] = '512MB';

Delivery Optimisation

Processing is only half the equation—delivery affects user experience directly.

Serve Correct Sizes

Deliver appropriately-sized images rather than relying on browser scaling:

<!-- Don't do this -->
<img src="full-4000x3000.jpg" style="width: 300px">

<!-- Do this -->
<img src="thumbnail-300x225.jpg">

Use srcset for responsive images:

<img srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 300px, 600px"
     src="medium.jpg" alt="...">

Caching Headers

Configure long cache times for immutable content:

Cache-Control: public, max-age=31536000, immutable

Use content-based URLs that change when images change, enabling permanent caching:

/images/abc123.v2.jpg
/images/abc123-1609459200.jpg

CDN Integration

CDNs cache images at edge locations worldwide:

$config['cdn_url'] = 'https://cdn.example.com';
$config['cdn_enabled'] = true;

See the reverse proxy guide for detailed CDN configuration.

Frequently Asked Questions

Should I generate all thumbnail sizes at upload time?

For most sites, yes—the processing cost happens once and thumbnails are ready immediately. For sites with many uploads but few views, lazy generation may save storage and processing.

What's the ideal JPEG quality setting?

Quality 80-85 provides a good balance for web display. Lower quality saves storage and bandwidth but may show visible compression artifacts. Test with representative images to find your acceptable threshold.

Should I convert all images to WebP?

WebP offers meaningful size reductions for most images. Convert when possible, but maintain fallbacks for older browsers and preserve original formats for users who download images for other uses.

How do I handle animated GIFs?

Animated GIFs require frame-by-frame processing, significantly increasing complexity and processing time. Consider limiting animation frame counts or durations, or converting to video formats for long animations.

Why are my thumbnails blurry?

Common causes include aggressive JPEG compression, resampling algorithms that over-smooth, and serving thumbnails scaled up by the browser. Check quality settings and ensure correct thumbnail sizes for display contexts.

How much storage do thumbnails add?

Typically 20-50% additional storage beyond originals, depending on sizes and formats. More thumbnail sizes mean more storage. WebP thumbnails are smaller than JPEG equivalents.