Table of contents
Tips for optimizing images on your website
Frontend
Frontend
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.
// 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.
// 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
[PART 1] Unlocking React Interview: Key Questions and In-Depth Answers
React.js is one of the most popular JavaScript libraries for building user interfaces. Whether you're a seasoned developer or just starting out, under...
Frontend
Frontend
2024-06-17 21:16:52 +0700
[PART 1] Unlocking JavaScript Interview: Promises and Timers
JavaScript interviews often include questions about asynchronous programming, as it's a fundamental concept in modern web development. One common chal...
Frontend
Frontend
2024-06-23 16:51:19 +0700