Netlify ImageEngine Plugin

The Netlify ImageEngine plugin optimizes your images by up to 80% on autopilot,
enhancing SEO, reducing bounce rates, improving mobile experiences, and boosting
sales.


Installation

Install this plugin from Netlify.

NPM : pnpm i @imageengine/netlify

example netlify.toml

``
[[plugins]]
package = "@imageengine/netlify"

[plugins.inputs]
deliveryAddress = "blazing-fast-pics.cdn.imgeng.in"

[plugins.inputs.directives]
height = 600
width = 700
rotate = 90
`

Configuration

The following inputs options are available:

- deliveryAddress: The ImageEngine delivery address.
- directives: Optional image transformation directives.

Features

$3

- Automatic URL Replacement: The plugin scans HTML files and replaces image
URLs with optimized ImageEngine URLs using the updateHtmlImagesToImageEngine
function.
- srcset Handling: It updates srcset attributes to ensure all image
sources are optimized, improving loading times and image quality across
different devices.

- Error Handling: The plugin logs errors encountered during the URL
transformation process, ensuring smooth operation and easy debugging.

$3

- Netlify Build Plugin: The onPostBuild function integrates with Netlify's
build process, automatically optimizing images after the build completes.

- Environment Context Awareness: The plugin adapts to different Netlify
deployment contexts (e.g., branch deploys, deploy previews) by using the
appropriate host URL.

- Configuration Validation: It checks for necessary configurations like
deliveryAddress and PUBLISH_DIR, failing gracefully with informative error
messages if they are missing.

Code Overview

$3

This function takes HTML content and options, then updates image URLs to use
ImageEngine for optimization. It handles both src and srcset attributes,
ensuring all images are optimized.

$3

This function processes JavaScript bundle content, replacing image URLs with
optimized ImageEngine URLs. It uses regular expressions to identify image URLs
and applies the transformSrcURL and build_IE_url` functions to generate the
optimized URLs. This ensures that all images in the JavaScript bundles are
optimized for better performance and quality.

$3

This function transforms original image URLs to use the ImageEngine delivery
address. It handles different types of URLs:

- Remote URLs: Transforms fully-qualified URLs (e.g., starting with
"http://" or "https://") and protocol-relative URLs (e.g., starting with
"//").
- Local URLs: Transforms local paths to use the ImageEngine delivery
address, ensuring all images are served through ImageEngine for optimization.

It ensures that the final URL is correctly formatted and ready for ImageEngine
processing.