Displaying Images Correctly on Your Website

The average website has an image in it, the image on a website is closely related to the benchmark performance, which can be seen from Core Web Vitals, Google or search engines use this benchmark to determine the ranking of a website. So in conclusion images are very influential to the user experience, page ranking, and also the business that we have.

1. Lazy Loading

Lazy loading (also called on-demand loading) is an optimization technique for online content, be it a website or a web app. Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.

In the case of an e-commerce website, for sure we will see lots of pictures on each product list that is displayed. Of course, the products displayed are not few. There are users who scroll to the bottom and some who don't. From this case, there is something we can optimize by displaying images that the user sees first in the viewport, images outside the viewport are loaded when we need them.

Here is an example of how to implement lazy loading on HTML:

<img
  src="images/image.jpg"
  loading="lazy" 
  width="300" 
  height="300" 
/>

Approach: To use Lazy Loading, use the loading attribute of the image tag in HTML. Here are the supported values for the loading attribute:

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it's located on the page.

Here is the browser that supports lazy loading:

2. Preload

Preload lets you tell the browser about critical resources that you want to load as soon as possible before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.

Example usage :

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

Before

After

As we can see the image loaded first than any other assets.

3.Use the optimal image format

Using the optimal image also helps us to deliver good-quality content, for example, If we want to display an image vector most optimal format is svg cause

SVG stands for scalable vector graphics, and it is a file format that allows you to display vector images on your website. This means that you can scale an SVG image up and down as needed without losing any quality, making it a great choice for responsive web design.

And when you want to display a rasther image most optimal format is webp or avif.

According to Google's own data, WebP lossless compression is 26% smaller than PNGs and its lossy compression is 25–34% smaller than JPEGs. For sites that use a lot of images, switching over could make a significant impact and shave valuable milliseconds of loading time, especially on mobile.

The comparison :

Here's a tool to format images to WebP that I use https://squoosh.app

4. Define explicitly the image size

Imagine you've started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news.

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. That will help us to avoid Cumulative Layout Shift (Core Web Vitals)

5. Use Alternative Attribute

Defining alternative attribute helps us to improve the accessibility website, when one day an image on a website cannot be loaded alternative text can help the user to find out what image is being displayed, And also give the alternative text to optimize website SEO. When users search for an image on Google, Google would give our image and the user probably visit our website.

Example :

<img 
    src="images/persia_cat.jpg"
    alt="A Persia Cat" 
    width="300" 
    height="300" 
/>

Thanks for reading!