Image Optimizer for Magento 2

What you get

Panth Image Optimizer for Magento 2 — Lazy Loading, WebP Detection & Core Web Vitals Booster

Frontend image performance for Magento 2 — lazy loading (Native / IntersectionObserver / Hybrid), WebP browser detection with PNG/JPG fallback, <link rel="preload"> hints for critical images, async decoding, and fetchpriority="high" for LCP candidates. Compatible with Magento 2.4.4 – 2.4.8, PHP 8.1 – 8.4, Hyva and Luma themes.

Panth Image Optimizer is a lightweight, frontend-focused Magento 2 extension that improves image delivery performance and directly targets Core Web Vitals (LCP, CLS, INP). It ships three complementary lazy-loading strategies — Native (loading="lazy" attribute injected via PHP plugin), IntersectionObserver (JS-based with fade-in, configurable threshold, and above-the-fold exclusion), and Hybrid (both together for maximum coverage). It also includes client-side WebP detection: when the visitor's browser cannot render WebP, <source type="image/webp"> elements are stripped from <picture> tags so the browser falls back to PNG/JPG automatically. On top of that, the module injects <link rel="preload" as="image"> for critical above-the-fold images, sets decoding="async" on all images so the browser decodes them off the main thread, and applies fetchpriority="high" to LCP candidates (Chrome 101+).

This module does not perform server-side WebP conversion, CDN rewriting, or srcset/sizes generation — it is purely a frontend performance layer that works on top of whatever image pipeline you already have. Perfect for merchants who want measurable Core Web Vitals improvements without changing their storage, CDN, or image-generation setup.

Key Features

Lazy Loading (Three Strategies)

• Native lazy loading — loading="lazy" attribute injected via PHP plugin on product images (zero JS required, best compatibility)
• IntersectionObserver — JavaScript-based lazy loading with fade-in effect, configurable pixel threshold, and placeholder support
• Hybrid mode — combine both strategies for maximum browser coverage
• Above-the-fold exclusion — skip lazy loading for the first N images to protect LCP
• Configurable threshold — start loading images N pixels before they enter the viewport
• Placeholder types — blur, solid color, or SVG placeholder while images load
• Fade-in effect — smooth opacity transition when images finish loading

WebP Browser Detection (Frontend Only)

• Client-side WebP support check — detects whether the visitor's browser can render WebP
• Automatic fallback — when WebP is unsupported, strips <source type="image/webp"> from <picture> elements so the browser loads PNG/JPG fallbacks
• No server-side conversion — works on top of any existing image pipeline (use a CDN or dedicated module for conversion)
• Zero layout shift — fallback logic runs before image decode

Core Web Vitals Boosters

• Preload critical images — dynamically injects <link rel="preload" as="image"> for the first N images on the page (LCP booster)
• Async decoding — adds decoding="async" to all images so decode work happens off the main thread (improves INP)
• fetchpriority="high" — hints Chrome 101+ to prioritize LCP candidates in the network queue
• Configurable preload count — recommended 1–2 images for product and category pages

Admin & Developer Experience

• Unified admin config — lives under Stores → Configuration → Panth Extensions → Image Optimizer
• Debug mode — logs optimization activity to the browser console for troubleshooting
• Store-scope aware — all settings respect default → website → store view hierarchy
• MEQP compliant — passes Adobe's Magento Extension Quality Program checks
• Hyva + Luma ready — works on both storefronts out of the box

How It Works

Panth Image Optimizer operates purely on the frontend layer:

1. A PHP plugin on Magento's image factory/renderer adds loading="lazy", decoding="async", and fetchpriority attributes to product image markup during HTML generation.
2. A small JavaScript bundle is injected on every storefront page. It:

• Runs a WebP feature test (canvas.toDataURL('image/webp')) and caches the result
• Strips unsupported <source> tags when WebP is not available
• Sets up an IntersectionObserver that swaps data-src → src when images near the viewport
• Injects <link rel="preload" as="image"> for the first N critical images

3. All behavior is gated by admin settings — disable any piece to fall back to Magento's default rendering.

What this module does NOT do:

• No server-side WebP generation (use a dedicated image CDN or conversion module)
• No responsive image (srcset / sizes) rewriting
• No CDN URL rewriting

Lazy Loading Strategies

Native (loading="lazy")

The simplest and most compatible approach. A PHP plugin injects the loading="lazy" attribute on product images during HTML rendering. No JavaScript required, supported in all modern browsers.

Best for: stores with minimal JS overhead, Hyva storefronts, or sites that prioritize server-rendered HTML.

IntersectionObserver (JS-based)

A JavaScript loop watches images and swaps data-src → src when they near the viewport. Supports fade-in effects, placeholders, and configurable thresholds.

Best for: stores that want a smooth fade-in UX, older browsers, or granular control over when images load.

Hybrid (Both)

Applies native loading="lazy" as the baseline and layers IntersectionObserver on top for enhanced UX (fade-in, blur placeholder). Maximum compatibility and UX.

Best for: most production stores — recommended default.

WebP Detection & Fallback

On page load, a short JavaScript snippet tests WebP support:

const webp = new Image();
webp.onload = webp.onerror = () => {
 document.documentElement.classList.toggle('webp', webp.height === 2);
};
webp.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';

When WebP is not supported, the module walks the DOM and removes <source type="image/webp"> elements from <picture> tags. The browser then loads the <img> fallback (PNG/JPG) automatically.

Note: this module does not generate WebP files on the server. Use a dedicated WebP-generation module or a CDN (Cloudflare Polish, Fastly IO, Bunny Optimizer) to produce WebP sources. Panth Image Optimizer handles the client-side fallback layer.

Performance Hints

Preload Critical Images

On every page, the module injects <link rel="preload" as="image"> tags into the <head> for the first N images (configurable). This tells the browser to fetch LCP candidates in parallel with the HTML, dramatically reducing LCP on product and category pages.

Async Decoding

All images receive decoding="async", which tells the browser to decode images off the main thread. This reduces blocking time and improves INP (Interaction to Next Paint).

fetchpriority

LCP candidates receive fetchpriority="high", hinting the browser (Chrome 101+) to prioritize them in the network queue ahead of lower-priority assets. Combined with preload, this is the single biggest LCP win available today.

Quick Links

• Website: kishansavaliya.com
• Get a Quote: kishansavaliya.com/get-quote
• Upwork (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
• Upwork Agency: upwork.com/agencies/1881421506131960778
• Packagist: packagist.org/packages/mage2kishan/module-imageoptimizer
• GitHub: github.com/mage2sk/module-imageoptimizer
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

Ready to make your Magento 2 store faster?

SEO Keywords: magento 2 image optimization, magento 2 lazy loading, webp magento, magento 2 webp fallback, magento 2 webp detection, image performance magento, core web vitals images, magento 2 LCP optimization, magento 2 fetchpriority, magento 2 preload images, magento 2 async decoding, magento 2 intersectionobserver lazy loading, magento 2 native lazy loading, hyva image optimizer, luma image optimizer, magento 2 picture element, magento 2 image performance extension, magento 2 core web vitals module, magento 2.4.8 image optimization, php 8.4 magento image, magento 2 page speed, magento 2 LCP booster, panth image optimizer, panth infotech, mage2kishan, mage2sk, hire magento performance developer, top rated plus magento freelancer, kishan savaliya magento, magento 2 image lazy load plugin, magento 2 WebP browser detection, magento 2 image fade-in, magento 2 image placeholder, magento 2 above the fold images, magento 2 image preload link

Compatibility

Tested on:

• Magento 2.4.8-p4 with PHP 8.4 + Hyva 1.3
• Magento 2.4.7 with PHP 8.3 + Luma
• Magento 2.4.6 with PHP 8.2 + Hyva

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-imageoptimizer
bin/magento module:enable Panth_Core Panth_ImageOptimizer
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace.
2. Extract to app/code/Panth/ImageOptimizer/ in your Magento installation.
3. Ensure Panth_Core is installed (free dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_ImageOptimizer
# Expected output: Module is enabled

Then navigate to:

Admin → Stores → Configuration → Panth Extensions → Image Optimizer

Configuration

All settings are at Stores → Configuration → Panth Extensions → Image Optimizer.

General Settings

WebP Detection (Frontend Only)

Lazy Loading

Performance Settings