@datarose/vite-plugin-media-optimize

Vite Media Optimize

Plugin for image optimization using Sharp.js and SVGO at build time.

 

After creating product webpages, the size of media files becomes significant. There are numerous packages available for optimizing images, mostly utilizing external libraries. My solution also relies on external, well-established libraries. During product generation, the plugin examines which JPG and PNG images can be converted to WebP format (though it's a rare case, sometimes the original file size might be more optimized than WebP). It converts those whose size decreases accordingly.

The plugin attempts to find references to converted images in all designated files of the product code and replaces the extension with the new WebP format. In the case of dynamic image references, the plugin cannot assist, manual consideration is required.

The aim of the plugin is not to destroy the original images or manipulate the original code. Only the product code undergoes modification, the source code remains untouched.

Installation

Supports

• Vite >=5
• Node >=21

npm install @datarose/vite-plugin-media-optimize --save-dev

Warning

sharp and svgo don't come installed as part of the package. You will have to install them manually and add it as a dev dependency. This is a design decision so you can choose to skip installing sharp if you only want to optimize svg assets using svgo and vice versa.

npm install sharp --save-dev

npm install svgo --save-dev

Startup

vite.config.js

import { ImageOptimize } from '@datarose/vite-plugin-media-optimize';

export default defineConfig({
  plugins: [
    ImageOptimize(),
  ],
});

Configuration

Name	Type	Default	Description
code	Object		For replace image references in the source code.
- enabled	bool	true	Allow extension replace
- formats	RegExp	/\.(vue|ts|js|pcss|css)$/	In which files should the image references be replaced?
png	Object
- enabled	bool	true	Allow PNG extension conversion
jpg	Object
- enabled	bool	true	Allow JP(e)G extension conversion
webp	Object
- enabled	bool	true	Allow WebP extension conversion
target	png | jpg | webp	webp	Defining the target extension. We are currently moving towards the web, but we will be able to change this later for any reason.

How to work?

As a first step, it performs the conversion on every photo found in vite.publicDir (if it reduces the file size). You will also receive a command line output regarding this, indicating how much storage space the plugin has saved.

example_first.png (205 kb) --> example_first.webp (8 kb)
example_second.jpg (324 kb) --> example_second.webp (12 kb)

Afterwards, in the source files designated by the code.formats regex, we attempt to locate these images with their original extensions. If found, we replace the extension accordingly.

// Before
const image_href = './images/example_first.png';

// After (in only production code, not in source code)
const image_href = './images/example_first.webp';

<!-- Before -->
<img src="./images/example_second.jpg" />

<!-- After (in only production code, not in source code) -->
<img src="./images/example_second.webp" />

/* Before */
.hero {
  background-image: url('./images/example_first.png');
}

/* After (in only production code, not in source code) */
.hero {
  background-image: url('./images/example_first.webp');
}

What should I do if I reference multiple images dynamically?

• Option A. You have the option to use the converted files already during the creation of each product instead of converting them each time.

• Option B. When using the tag, we have the option to provide a so-called fallback reference. What should the browser load if there is no image at the URL specified in the original src attribute?

<img
  :src="`./products/${product.slug}.webp`"
  :onerror="`this.onerror=null; this.src='./products/${product.slug}.png'`"
/>

This tool serves rapid post-development conversion for optimal performance. By striving for 100% performance optimization, we can enhance our SEO ranking. To achieve this, we must seize every tool available to work efficiently and swiftly.

Early Access

The package is still very primitive, and we have many more plans for the future. We aim to influence the quality of images, provide various cropping options (for PC, tablet, mobile), timestamping, and more.

Open Source Repository

While we haven't opened the plugin's repository to the public yet, we are actively working towards doing so and fostering an active community to improve the package's quality.

License

All rights reserved as specified in the LICENSE file! This project can be considered reusable, copyable, and/or distributable, provided that the original public repository link is included in the source code and made visible to those who use the product that incorporates this source code/package.