https://github.com/imgeng/netlify-imagengine
https://github.com/imgeng/netlify-imagengine
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/imgeng/netlify-imagengine
- Owner: imgeng
- License: mit
- Created: 2024-05-14T06:17:38.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-30T05:49:37.000Z (7 months ago)
- Last Synced: 2024-10-30T07:28:04.816Z (7 months ago)
- Language: JavaScript
- Size: 2.81 MB
- Stars: 1
- Watchers: 5
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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.
[](https://app.netlify.com/integration/start/deploy?repository=https://github.com/imgeng/netlify-imagengine-demo-app)
## 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
### Image Optimization
- **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.
### Build Process Integration
- **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
### `updateHtmlImagesToImageEngine`
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.
### `processBundle`
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.
### `transformSrcURL`
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.