Image optimisation

Why image optimisation matters

Unoptimised images are the single most common cause of slow websites. A 5MB hero image might look identical to a 200KB optimised version, but takes 25x longer to download. Visitors on mobile connections wait seconds for content while massive files transfer.

Page speed directly impacts conversion rates and search rankings. Google's Largest Contentful Paint metric often hinges on hero image load time. Optimised images improve LCP, reduce bounce rates, and create better user experience.

Modern image formats

WebP delivers 25-35% smaller file sizes than JPEG with identical visual quality. AVIF pushes compression even further—up to 50% smaller—though browser support is newer. Both formats support transparency like PNG but at fraction of the file size.

SVGs work brilliantly for logos, icons, and simple illustrations. As vector formats, they scale to any size without quality loss and typically weigh under 5KB. For photographs and complex images, WebP or AVIF deliver the best results.

Responsive images

Serving a 2000px image to a 375px mobile screen wastes bandwidth. Responsive image techniques generate multiple sizes and let browsers choose appropriately. A visitor on a phone gets a 400px image; desktop users get 1200px versions.

The srcset and sizes attributes handle this automatically. Combined with lazy loading, responsive images ensure visitors download only what their device actually needs.

Automated optimisation in Astro

Astro's built-in image component handles optimisation automatically during build. Drop in source images, and Astro generates multiple sizes, converts to WebP/AVIF, and outputs optimal markup. This automation ensures consistent performance without manual compression work.

We configure image optimisation for every Fernside site. You upload images normally, and the build process ensures they're served optimised. Performance remains excellent without ongoing manual effort.