Table of contents
    blog cover

    Tips for optimizing images on your website

    Web Development
    Web Development
    Images are a vital component of web design, adding visual appeal and context to your content. However, poorly optimized images can significantly impact website performance, leading to slower load times and frustrating user experiences.  In this blog, we'll explore some strategies to optimize images on your website.

    1. Add background color/small image as a placeholder

    To enhance perceived performance and reduce the perceived load time, consider using placeholders such as a background color or a small, low-quality image while the full-sized image loads. This technique gives users visual feedback that content is loading and prevents the page from appearing blank during the loading process.

    Image placeholder


    // language: markup
    <div class="img-thumbnail">      
      <img src="hero.jpg" /> 
    </div>

    // language: css
    .img-thumbnail {        
      position: relative;         
      height: 400px;
      width: 300px;      
      background-color: #cdcdcd; 
      /* background-image: url("placeholder.jpg"); */
    }
    
    .img-thumbnail img {
      width: 100%;     
      position: absolute;        
      inset: 0;
    }

    2. Avoid layout shifting by fixing size

    One common issue users encounter when loading web pages is layout shifting, where elements on the page move as images load, causing a disruptive experience. To mitigate this problem, always specify your images' dimensions (width and height) in the HTML or CSS. This allows browsers to allocate space for the images before fully loaded, preventing sudden layout shifts.

    Layout shifting


    // language: markup
    <img src="image.jpg" alt="description" width="300" height="200">

    3. Use proper size and utilize the picture tag for responsive design

    Optimizing images for different screen sizes is crucial for delivering an optimal user experience across various devices. Instead of serving a single large image to all users, utilize responsive images and the <picture> element to deliver appropriately sized images based on the user's device capabilities.

    // language: markup
    <picture>
      <source srcset="image-small.jpg" media="(max-width: 768px)">
      <source srcset="image-medium.jpg" media="(max-width: 1200px)">
      <img src="image-large.jpg" alt="description">
    </picture>

    4. Lazy loading

    Lazy loading is a technique that defers the loading of non-essential resources, such as images, until they are needed.

    // language: markup
    <img src="hero.jpg" alt="description" loading="lazy">

    By adding the loading="lazy" attribute to your image tags, you instruct the browser to lazily load the images, prioritizing content within the viewport. However, avoid lazy loading critical images or those located above the fold to ensure essential content is readily accessible to users.
    Created at 2024-02-18 16:51:39 +0700

    Related blogs