WP Manifestindependent plugin directory
manifest / media / pti-public

Press That Image

Press That Image - Intelligent WordPress image optimization plugin

by Designer Pros · github.com/designerpros/pti-public · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/designerpros/pti-public/archive/refs/heads/main.zip
Readme github.com/designerpros/pti-public ↗

Intelligent server-side image compression and device-optimized serving for WordPress.

Overview

Press That Image is a WordPress plugin that generates 20 optimized image sizes in multiple formats (WebP, AVIF, original) at upload time, then crawls your published pages to measure actual rendered widths. It serves the perfect image size for each visitor's device with zero client-side overhead.

Key Features

🖼️ Smart Image Processing

  • 20 size variants: From 25px to 8000px width (logarithmic distribution)
  • 3 formats: WebP, AVIF, and original (JPEG/PNG)
  • One-time processing: Generate once, serve forever
  • Background queue: Never blocks uploads, respects server load

📐 Builder-Agnostic Layout Detection

  • Server-side crawling: Measures actual rendered widths at configurable breakpoints
  • Works with any page builder: Gutenberg, Elementor, Bricks, Oxygen, Divi, etc.
  • Multiple instances: Handles same image at different sizes on one page (serves largest needed)
  • Auto-crawl: Triggers on publish/update, or manual control

⚡ Zero Client Overhead

  • Pre-computed serving rules: Database lookup, not browser calculation
  • Simple <img> tags: One perfect URL, no srcset complexity
  • DPR aware: Automatic Retina/HiDPI support
  • Format negotiation: Serves WebP/AVIF based on browser support

🛡️ Server Load Protection

  • CPU throttling: Configurable max load percentage (default 15%)
  • Adaptive processing: Pauses when server is busy
  • Background workers: WP-Cron based, runs every 60 seconds
  • Manual controls: Process now, pause/resume, priority queue

Architecture

On Upload

  1. Image is uploaded to WordPress
  2. Queued for background processing
  3. Admin sees "Queued for processing" notification

Background Processing (Every 60s)

  1. Check server load (CPU < 15%?)
  2. If OK, process next queued image:
    • Generate 20 sizes (capped at source width)
    • Create WebP + AVIF + original for each size
    • Store in organized directory structure
    • Save metadata to database
  3. Mark as completed

On Publish/Update

  1. Headless browser crawls page at each breakpoint (375, 768, 1024, 1440, 1920)
  2. Measures actual rendered width of every image instance
  3. Stores [image_id, viewport, rendered_widths[]] in database

On Page View

  1. Detect visitor's viewport + DPR (Client Hints or cookie)
  2. Lookup rendered widths from database
  3. Calculate: max(rendered_widths) × DPR
  4. Find closest pre-generated size ≥ needed
  5. Serve single <img src="image-800w.webp">

Installation

  1. Upload press-that-image folder to /wp-content/plugins/
  2. Activate the plugin through WordPress admin
  3. Go to Press That Image → Settings to configure
  4. Done! New uploads are automatically queued

Configuration

Processing Settings

  • Compression Quality: 1-100 (recommended: 80-85)
  • Enable WebP: Generate WebP versions (requires GD with WebP support)
  • Enable AVIF: Generate AVIF versions (requires ImageMagick)
  • Preserve Original: Keep uploaded files untouched

Crawler Settings

  • Breakpoints: Comma-separated viewport widths (e.g., 375, 768, 1024, 1440, 1920)
  • Crawler Service:
    • Internal (PHP-based, limited accuracy)
    • Browserless.io (recommended, requires API key)
    • Self-hosted Puppeteer (requires custom endpoint)
  • Auto-Crawl: Automatically crawl on publish/update

Performance Settings

  • Max CPU Load: Processing pauses when load exceeds this % (default: 15%)
  • Images Per Cycle: How many images to process per 60s cycle (default: 1)

Crawler Services

Internal Crawler (Default)

  • No external dependencies
  • Parses HTML and estimates widths
  • Limited accuracy (can't execute JavaScript)
  • Good for: Simple sites, testing

Browserless.io (Recommended)

  • Headless Chrome as a service
  • Perfect accuracy with real browser rendering
  • Easy setup: Just add API key
  • Get started: browserless.io

Self-hosted Puppeteer

  • Run your own Node.js service
  • Full control and privacy
  • Requires technical setup
  • Example endpoint code provided in docs

Database Schema

wp_pti_queue

Queue for background image processing.

wp_pti_metadata

Generated sizes and formats for each processed image.

wp_pti_image_renders

Crawled data: which images appear where, at what rendered widths.

File Structure

press-that-image/
├── press-that-image.php       # Main plugin file
├── uninstall.php              # Cleanup on deletion
├── includes/                  # Core classes
│   ├── class-pti-database.php
│   ├── class-pti-queue.php
│   ├── class-pti-image-processor.php
│   ├── class-pti-crawler.php
│   ├── class-pti-server.php
│   └── class-pti-load-monitor.php
├── admin/                     # Admin interface
│   ├── class-pti-admin.php
│   ├── class-pti-settings.php
│   └── class-pti-dashboard.php
└── assets/                    # CSS/JS
    ├── css/admin.css
    └── js/admin.js

Dashboard

Access via Press That Image → Dashboard

Shows:

  • Server Status: CPU load, memory usage, processing status
  • Queue Status: Pending, processing, completed, failed counts
  • Recent Queue Items: Last 10 with thumbnails and status
  • Statistics: Total processed images, crawled posts, avg processing time

Actions:

  • Clear completed items
  • Retry failed items
  • Pause/Resume processing
  • Auto-refresh every 30s

Media Library Integration

Each image shows PTI status:

  • ✓ Processed: Shows size count and processing time
  • ⏳ Queued: Currently in processing queue
  • ✗ Not Processed: With "Process Now" button

Generated Files Structure

uploads/2025/01/
├── image.jpg                           # Original upload
└── image/                              # PTI-generated directory
    ├── image-25w.jpg
    ├── image-25w.webp
    ├── image-25w.avif
    ├── image-50w.jpg
    ├── image-50w.webp
    ├── image-50w.avif
    ...
    └── image-1920w.avif

Server Requirements

  • PHP: 7.4 or higher
  • WordPress: 5.8 or higher
  • GD Library: With WebP support (for WebP generation)
  • ImageMagick (optional): For AVIF generation
  • WP-Cron: Must be enabled (or use system cron)

Performance Tips

  1. Start conservative: 1 image per cycle, 15% max load
  2. Use external crawler: Browserless.io for best accuracy
  3. Adjust based on server: More powerful servers can handle higher settings
  4. Monitor dashboard: Watch load and processing times
  5. Bulk uploads: Upload in batches, let queue process gradually

FAQ

Why 20 sizes?

Covers all common device widths from mobile icons (25px) to 8K displays (8000px) with optimal stepping.

Why not srcset?

We use it better! Server pre-computes what srcset would calculate, serves single perfect URL. Faster, simpler, less client work.

What if crawl can't access page?

Fallback: Estimates based on viewport (90% mobile, 65% desktop). Update to external crawler for accuracy.

Does it work with CDN?

Yes! Generated files have predictable URLs, perfect for CDN caching.

What about existing images?

Use "Process Now" button in media library, or bulk process via dashboard (coming soon).

Roadmap

  • [ ] Bulk processing UI for existing images
  • [ ] CDN integration (Cloudflare, BunnyCDN)
  • [ ] Art direction support (different crops for mobile/desktop)
  • [ ] WebP/AVIF quality per-format control
  • [ ] Image optimization reports
  • [ ] WP-CLI commands

Credits

Built by Designer Pros for the WordPress community.

License

GPL v2 or later

Press That Image - Because your images deserve better than default WordPress sizes.