5 documents tagged with “Images”
Images are the most common cause of a slow LCP. A large, uncompressed image in the first viewport will tank the metric even if the rest of the site is impeccable. Fortunately, there is a lot to be done about them, often with minimal effort.
Under the images tag you will find articles on modern formats (WebP, AVIF), proper lazy loading, srcset for different resolutions, LCP image optimisation, and tools like Squoosh or Jpegli.
AVIF Images: Up to 40% Data Savings Compared to WebP
The AVIF format offers even better compression than WebP. Let’s explore when it makes sense to use it and how to implement fallback for older browsers.
CLS: How to Maintain Element Heights (Images, JS Components, iframes…)
Discover why and how to ensure dimensions for elements like <img>, <iframe>, or JavaScript components that are asynchronously inserted into a page, using HTML or CSS.
Image Optimization: When Milliseconds Make or Break Between Kilobytes and Pixels
Even mere mortals can tame their images and make them work for you, not against you. Just use WebP or AVIF, compress well, and remember lazy loading.
Lazy Loading Images: A Comprehensive Guide to Improving LCP
Lazy loading images and other elements is recommended as one of the fundamental yet highly effective methods for optimizing page load speed. We suggest conservatively deferring the loading of all images outside the first viewport. Be cautious when applying lazy loading to images that are LCP elements, as this can actually worsen speed.
WebP Images: How to Save Precious Kilobytes
Web loading speed is often a matter of seconds. The WebP image format could be your secret weapon to save kilobytes and achieve optimal performance.