AgilePress

Tag: AVIF

  • The 5MB Image Problem: Why Your Portfolio is Killing Your SEO

    It is a classic scenario. You hire a professional photographer. They send you a zip file with stunning, high-resolution photos. Each file is 8MB and 6000 pixels wide. You think: “The quality is amazing, I want my visitors to see this detail.” So you upload them directly to WordPress.

    Congratulations. You just killed your website.

    That 8MB background image takes 4 seconds to load on a 4G mobile connection. Google’s Core Web Vitals scanner sees this, flags your LCP (Largest Contentful Paint) as “Poor,” and pushes your ranking down.

    Quality on the web isn’t about megapixels. Quality is speed.

    At AgilePress, we treat images with a strict protocol. Here is why we ban standard plugins like Smush or ShortPixel, and how we optimize images the right way.

    The “Retina” Lie

    First, let’s talk about dimensions. Most Full HD screens are 1920 pixels wide. Even a generic 4K screen rarely displays a website full-width. Uploading a 6000px image is a waste of resources. The browser has to download the massive file and then use the device’s CPU to shrink it down to fit the screen.

    The AgilePress Rule: Never upload an image larger than the largest container on your site. For most websites, 2500px is the absolute limit. Anything above that is invisible data that slows you down.

    The Format War: JPG is Dead

    If you are still using PNGs for photos, stop.

    • PNG: Designed for simple graphics and transparency. Terrible for photographs (huge file size).
    • JPG: The old standard. Decent, but inefficient by modern standards.

    The New Standards:

    • WebP: The current king. Developed by Google. It offers the same quality as JPG but weighs 30% less. Supported by every modern browser.
    • AVIF: The future. It offers even better compression than WebP. While support is growing, WebP is still the safest, most compatible choice for most sites today.

    The “SaaS” Trap: Why We Discard ShortPixel, Imagify, and Smush

    When users realize they need to optimize images, they usually install the “popular” plugins. We avoid them. Why?

    Because they operate on a SaaS (Software as a Service) Model.

    • The “Credit” Trap: Plugins like ShortPixel or Imagify charge you per image. WordPress generates multiple thumbnails for every upload. You can burn through your monthly quota in minutes. Why pay “rent” to compress your own files?
    • The Privacy/Speed Issue: These plugins send your images to their cloud servers, process them, and send them back. This makes the upload process in your dashboard slow.
    • The “Freemium” Bloat (Smush): The free version of Smush is practically useless (it only offers “lossless” compression, which saves almost no space) and the interface is full of ads pushing you to upgrade.

    The AgilePress Philosophy: Your server has a CPU. Use it. You can optimize images locally for free, without limits, and without sending data to third-party clouds.

    The AgilePress Image Stack

    We use a “Guardrail” system. We assume the client will forget to resize images, so we automate the discipline.

    Step 1: The Gatekeeper (Imsanity)

    This is the most underrated plugin in the repository. Imsanity does one thing: it acts as a bouncer at the door.

    • Configuration: We set a max limit (e.g., 2048px or 2560px).
    • Action: If you try to upload a 6000px photo, Imsanity automatically scales it down to the limit during the upload and deletes the giant original.
    • Result: It saves disk space and prevents “4K bloat” forever.

    Step 2: The Converter (Converter for Media)

    Once the image is resized, we need to serve it in a modern format. We use Converter for Media (formerly WebP Converter for Media).

    • How it works: It uses your server’s internal libraries (GD or ImageMagick) to generate WebP versions of your images.
    • The “Passthrough” Method: It doesn’t touch the database URLs. It uses rewrite rules. If a browser supports WebP, it gets the light file.
    • Cost: 100% Free. No credits. No monthly fees.

    Alternative Step 2: The “All-in-One” (LiteSpeed & FlyingPress)

    If you are using a comprehensive performance suite, you might not need a separate converter plugin.

    • Scenario A: The LiteSpeed User (Free) If your host is LiteSpeed, use LiteSpeed Cache. It has a built-in image optimization feature that sends images to QUIC.cloud (free tier available) and returns efficient WebP versions.
    • Scenario B: The FlyingPress User (Premium) If you use FlyingPress, you can enable FlyingCDN. This serves your images from a global network and converts them to WebP/AVIF on the fly. It is the ultimate “hands-off” solution.

    (Note: Users of WP Rocket still need to use Converter for Media, as WP Rocket does not include native image compression unless you pay extra for Imagify).

    For the Perfectionist: Manual Optimization

    Sometimes, you have a “Hero Image” on the homepage that defines your brand. You want it to look crisp but load instantly. Automation might be too aggressive.

    For these specific images, we use Squoosh.app (by Google).

    • It is a browser-based tool.
    • You can visually compare the quality vs. file size.
    • You can manually tweak the palette and compression to get a 100KB image that looks like 1MB.

    Conclusion: Quality is Speed

    Nobody is going to admire the “Retina quality” of your portfolio if they closed the tab because it took 5 seconds to load.

    Stop paying monthly fees for image compression credits.

    1. Install Imsanity to stop huge uploads.
    2. Use Converter for Media (or LiteSpeed/FlyingPress) to serve WebP.
    3. Keep your wallet closed and your site fast.