How To Optimize Images in Vite Projects?

Optimizing images is an important step in improving the performance of your web projects, and Vite, being a modern front-end build tool, makes it easy to simplify this process.

Image optimization reduces file sizes, resulting in faster load times, better user experience, and improved SEO rankings. This article will guide you through the steps and best practices for optimizing images in Vite projects.

Why Optimize Images?

Optimizing images brings several benefits to web projects:

• Faster Load Times: Reducing image file sizes decreases the amount of data transferred, leading to faster page loads.
• Improved Performance: Optimized images consume less bandwidth, which is especially beneficial for mobile users or those on slower networks.
• Better SEO: Search engines favour faster-loading pages, improving your site's SEO rankings.
• Enhanced User Experience: Users prefer fast, responsive websites. Image optimization contributes to a smoother experience.

Steps To Optimize Images in Vite Projects

Before optimizing images, you need to set up a Vite project. Here’s a quick guide:

Step 1: Create a New Vite Project

npm create vite@latest my-vite-project --template react
cd my-vite-project
npm install

Folder Structure

Dependencies

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
"devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "sharp": "^0.33.5",
    "svgo": "^3.3.2",
    "vite": "^5.4.1",
    "vite-plugin-image-optimizer": "^1.1.8"
  }

Step 2: Start the Development Server

npm run dev

With your Vite project set up, you’re ready to start optimizing images.

Optimize Image Using vite-plugin-image-optimizer

vite-plugin-image-optimizer uses Sharp and SVGO libraries to compress and optimize image assets, supporting formats such as PNG, JPEG, SVG, GIF, WebP, and AVIF. This plugin provides configurable options for quality, speed, and more.

Step 1: Install the plugin

npm install vite-plugin-image-optimizer --save-dev
npm install sharp svgo --save-dev
npm install @vitejs/plugin-react --save-dev

Step 2: Configuration the Plugin

// vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
    plugins: [
        react(),
        ViteImageOptimizer({
            png: { quality: 80 },
            jpeg: { quality: 75 },
            webp: { quality: 80 },
            avif: { quality: 70 },
            svg: {
                plugins: [
                    { name: 'removeViewBox', active: false },
                    { name: 'sortAttrs' },
                ],
            },
        }),
    ],
});

//App.jsx

import ExternalImageComponent from './components/ImageComponent'

function App() {

    return (
        <>
            <ExternalImageComponent />
        </>
    )
}

export default App

// src/components/ImageComponent.js

const ExternalImageComponent = () => {
    return (
        <div>
            <img
                src="https://media.geeksforgeeks.org/wp-content/uploads/20240906123329/laptop.jpg"
                alt="Optimized External Image"
                width="800"
                height="600"
                loading="lazy"
            />
        </div>
    );
};

export default ExternalImageComponent;

This configuration will compress images using different optimization levels and quality settings based on file types.

Output

Best Practices for Image Optimization in Vite

• Optimize Before Uploading: Use tools like ImageOptim or TinyPNG to optimize images before adding them to your project.
• Automate Optimization: Use plugins in your build process to ensure consistent optimization.
• Use Appropriate Formats: Choose the right image format (WebP, JPEG, PNG) based on the content and required quality.
• Enable Lazy Loading: To improve loading times and performance, especially on pages with many images.
• Test and Monitor Performance: Regularly test your site’s performance using tools like Google PageSpeed Insights or Lighthouse.