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 it sounds simple, images are one of the largest causes of slow loading, so this is a category that includes various techniques and best practices for optimising images for faster load times and better quality. This includes lazy loading, compression, and the use of modern image formats.
Below you will find a subset of articles from my blog specifically about Image Rendering. Although this is a topic I've been working with for many years, it's fair to say that I've not written about it often. I've only managed to publish three articles about it, 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.
