Optimising gatsby‑image Even Further
Optimise gatsby‑image further with sensible maxWidth, quality settings, native lazy loading, GraphQL image data, and avoiding oversized assets in Gatsby.
Articles
Image Rendering
In web development, image rendering is the process of displaying images on web pages. Although that sounds simple, images are one of the most common causes of slow loading and poor user experience. This category covers the techniques used to optimise image delivery, including lazy loading, compression, responsive sizing, and modern image formats.
Below you will find a subset of articles from my blog specifically about Image Rendering, performance optimisation and Core Web Vitals. 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.
Optimising gatsby‑image Even Further. Optimising
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Setting CSS Blur Filter to Zero on a Retina Screen. Setting CSS Blur Filter to Zero on a Retina Screen
A bug in the WebKit engine that only affects website Retina screen devices means that setting a zero‑blur filter in CSS isn't as easy as it should be.
