Image Optimisation for Web Performance
Images typically account for 40–60% of a web page's total weight. Serving images at the wrong dimensions forces browsers to download far more data than needed, directly impacting your Largest Contentful Paint (LCP) score — one of Google's Core Web Vitals and a ranking factor.
The Right Size for Every Element
Match image dimensions to their CSS display size. A hero image displayed at 1920px wide should be exactly 1920px — not a 5000px camera original. For galleries and product grids, size thumbnails to their container width. This single optimisation can cut image file sizes by 70% or more.
Retina Displays and srcset
Modern screens have 2 or 3 pixel density. To look sharp on these displays, create images at 2 the CSS display size and use the HTML srcset attribute to serve the right version. Our resizer makes it easy — just double your display dimensions for the retina version.