Netlify Build plugin - Imageengine optimize your images by up to 80% on autopilot for improved SEO, lower bounce rates, better mobile experience, and increased sales
npm install netlify-plugin-imageengineThe Netlify ImageEngine plugin optimizes your images by up to 80% on autopilot,
enhancing SEO, reducing bounce rates, improving mobile experiences, and boosting
sales.
Install this plugin from Netlify.
NPM : npm i netlify-plugin-imageengine
``
[[plugins]]
package = "netlify-plugin-imageengine"
[plugins.inputs]
deliveryAddress = "blazing-fast-pics.cdn.imgeng.in"
[plugins.inputs.directives]
height = 600
width = 700
rotate = 90
`
The following inputs options are available:
- deliveryAddress: The ImageEngine delivery address.directives
- : Optional image transformation directives.
- Automatic URL Replacement: The plugin scans HTML files and replaces image
URLs with optimized ImageEngine URLs using the updateHtmlImagesToImageEngine
function.
- 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.
- 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.
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.
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.
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.