Image Optimisation with next/image
`next/image` explained with responsive sizing, lazy loading, layout shift reduction, and why image optimisation matters in real Next.js applications.
Articles
Images
Images are often the largest, most visible assets on a website, which makes them both a design concern and a performance concern. This category covers responsive image markup, sizing, compression, art direction, loading behaviour, and the trade‑offs involved in keeping media sharp without making pages slower than they need to be.
Below you will find a subset of articles from my blog specifically about Images. This is a topic I have worked with for many years, although it has not been one I have written about often. There are three articles collected here so far, which you can see and read below.
Image Optimisation with next/image. Image Optimisation with
Responsive Images for Faster Front‑End Pages. Responsive Images for Faster Front‑End Pages
How responsive images make front‑end pages faster by serving suitable sizes, preserving quality, reducing wasted bytes, and avoiding layout shifts.
Optimising gatsby‑image Even Further. Optimising
gatsby‑imageEven FurtherOptimise gatsby‑image further with sensible maxWidth, quality settings, native lazy loading, GraphQL image data, and avoiding oversized assets in Gatsby.