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 a fallback for older browsers.
CLS: How to Maintain Element Heights (Images, JS Components, Iframes…)
Learn why and how to ensure dimensions for elements like <img>, <iframe>, or JavaScript components that are asynchronously inserted into the page, at the HTML or CSS level.
Image Optimization: When Milliseconds Decide Between Kilobytes and Pixels
Even you, mere mortals, can tame your images and make them work for you, not against you. Just use WebP or AVIF, compress well, and don’t forget about lazy loading.
Lazy Loading Images: A Detailed Guide to Improving LCP
We recommend lazy loading images and other elements as one of the fundamental and highly effective methods for optimizing page load speed. Conservatively defer loading all images outside the first viewport. Be cautious when applying lazy loading to images that are the LCP element, as this can actually worsen speed.
WebP Images: Saving Precious Kilobytes
Website loading speed often hinges on seconds. The WebP image format might be your secret weapon for saving kilobytes and edging closer to perfect performance.