|||

Using the AVIF format for CSS background images

Today I learned that browser support for the AVIF image format has become excellent, with every major browser except Edge supporting it.

As I’m implementing a design with a big background image, this is great. At half the size of the JPEG, it offers way better quality. (WebP wasn’t noticeably better than JPEG in this case, btw)

So I also learned about the CSS function image-set, which allows us to give a browser multiple image formats (and/or resolutions) and let it choose the most appropriate format. It also has great support, and a fallback is easily added in the form of a regular background image.

PS: If you’re looking for a tool to convert images to AVIF, Squoosh is a nice option.

Up next Workaround for Email Validation Issue in Statamic Through a failed Horizon job I found out about the following: A user had entered an email address with an accidental space before the @ symbol. This Applying a Growth Mindset (Doodle)
Latest posts Back to MyMind Sending Articles from Feedbin to Readwise Reader In Praise of Sublime App Why I Ended Up Using Todoist Yet Again Pros and Cons of Reflect Notes App A Love Letter to Sublime Internet Lazy.so is an amazing tool. Here's why I don't keep it Carl Sagan has shown the absurdity of not acting against climate change back in 1990 A success message that communicates the opposite of success Epomaker TH80 Pro Polyamor, aber mit PKM apps 🫣 Ironie, die Fabi Rommel Helft der Natur Tiny Garden Paradise Schwiegerfuchs Same Vibe Tailwind and Web Craftsmanship Buttons with CSS Expand Basic Markdown Formatting in Apple Notes Cannot Divide by Zero in Peak Picture Partial Applying a Growth Mindset (Doodle) Using the AVIF format for CSS background images Workaround for Email Validation Issue in Statamic A First Quick Look at Cosmos.so – and Why I'll Stick with MyMind Install a Starter Kit from local repo to get the latest Peak working in Statamic 4 beta Set sensible validations for Statamic image uploads Render first heading inside Statamic Page Builder as `h1` My PKM App Stack for 2023 Favorite apps in recent weeks: mymind & Craft First List Item inside CSS Multi Column Layout is offset