Image Optimization Tricks

1. Image Formats

a. WebP

<!-- 👇 Set image sources with different formats in the `srcSet` 
      the attribute in order of preference -->
<!-- 👇 Fallback image source for browsers that don't 
      support srcSet in `src` attribute  -->
<img
 srcset="car.webp, car.jpg"
 src="car.jpg"
 alt="Car"
/>

b. JPEG 2000

<img
 srcset="car.jp2, car.jpg"
 src="car.jpg"
 alt="Car"
/>

c. AVIF

<img
 srcset="car.avif, car.jpg"
 src="car.jpg"
 alt="Car"
/>

2. Responsive Images

<img src="small.jpg"
  srcset="medium.jpg 800w,
          large.jpg 1200w,
          xlarge.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Responsive Image">

3. Lazy Loading

<img src="image.jpg" alt="Image" loading="lazy">

4. Preloading and Caching

<link rel="preload" href="image.jpg" as="image">

// Service worker code (sw.js)
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('images-cache').then(cache => {
      return cache.addAll([
        'image.jpg',
        'other-image.jpg',
        // Add more images to the cache here
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

In a React app, you can use the package to add the preload link in the HTML head section for critical imagesreact-helmet

import React from 'react';
import { Helmet } from 'react-helmet';
import PreloadImage from './assets/preload-image.png';

const ImageComponent = () => {
  return (
    <>
      <Helmet>
        <link rel="preload" href={PreloadImage} as="image" />
      </Helmet>
      <img src={PreloadImage} alt="Preload image alt" />
    </>
  );
};

5. Image Sprites

An image sprite sheet is a single image that contains multiple smaller images or icons. It’s used to reduce the number of HTTP requests when rendering numerous small images on a web page. By loading a single sprite sheet, you can display specific images by adjusting the CSS background-position.

Suppose you are building a social media web application and want to display various icons for actions such as liking a post, commenting, and sharing. Each icon is a small image that is typically used in different parts of the application.

Without Image Sprites:

In a traditional approach, you would include each icon as a separate image file in your HTML or CSS, like this:

<!-- Separate images for each icon -->
<img src="like-icon.png" alt="Like">
<img src="comment-icon.png" alt="Comment">
<img src="share-icon.png" alt="Share">
<!-- and so on... -->

 Save

With Image Sprites:

Using image sprites, you can combine all these icons into a single sprite sheet, reducing the number of HTTP requests. Here’s an example of how it would look:

/* CSS using image sprites */
.icon {
  background-image: url("icons-sprite.png");
  background-repeat: no-repeat;
}

.like-icon {
  background-position: 0 0;
  width: 24px;
  height: 24px;
}

.comment-icon {
  background-position: -24px 0;
  width: 24px;
  height: 24px;
}

.share-icon {
  background-position: -48px 0;
  width: 24px;
  height: 24px;
}

/* and so on... */

<div class="icon like-icon"></div>
<div class="icon comment-icon"></div>
<div class="icon share-icon"></div>

In this example, all the icons (like, comment, share, etc.) are combined into a single sprite sheet. The CSS classes (e.g., , , ) use the property to display the correct part of the sprite sheet as the background for each icon.icons-sprite.png.like-icon.comment-icon.share-iconbackground-position

Benefits:

• Instead of loading multiple image files, the web application now loads just one image (), reducing the number of HTTP requests.icons-sprite.png
• The sprite sheet is loaded once and can be cached by the browser, improving subsequent page loads.
• CSS classes control the display of individual icons from the sprite sheet, allowing for seamless hover and rollover effects without additional loading delays.
• This leads to faster and more efficient user experiences with improved overall page loading times.

6. Use SVG for icons and logos

<!-- logo.svg -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<!-- index.html -->
<img src="logo.svg" alt="Logo">

7. Image Dimensions

Specifying the image’s dimensions in HTML or CSS is essential to prevent layout shifts and improve page rendering speed. By specifying the image’s dimensions in HTML or CSS, you provide the browser with the necessary information to allocate the correct space for the image during the initial rendering process.

Benefits

• Prevents Layout Shifts: Specifying the dimensions ensures that the browser knows the image’s exact size before loading it, preventing sudden layout shifts.
• Faster Page Rendering: With the image dimensions known in advance, the browser can render the layout more efficiently, leading to faster page loading times.
• Improved User Experience: By eliminating layout shifts, users have a more consistent and pleasant browsing experience.

To specify the image dimensions, you can directly include the and attributes within the tag or apply a specific style by adding a class attribute to the tag in CSS.widthheight<img><img>

<img src="logo.jpg" alt="logo" width="300" height="200" />

<!-- or -->

.logo {
  width: 300px;
  height: 200px;
}

<img src="logo.jpg" alt="logo" class="logo" />