Easy Image

Intro

The markup necessary for maximally optimized images is complex. You have to know a lot to get it right, and even when you do, propogating and enforcing this knowledge across a team, not to mention implementing it without stray mistakes, is a challenge. Just some of the things you need to know are

How do I use height and width to avoid layout shift while still allowing resizing via css?
Does the order of sources in srcset matter?
Does the order of source tags in the picture element matter?
How do I configure sources for art direction?
Should I be using width descriptors or 'x' descriptors?
How do I specify fallback image formats?
How do I let the browser know how wide my image will display, before it or the css is loaded?
What is the mime type for jpg's?
Does the order of media queries in the sizes attribute matter?
Which attributes go on the img tag, which go on source tags, and which go on both?
How do I generate and include blurry placeholders before images load?
How do I swap out the blurry placeholders for the real image (without js)?

But what if you didn't have to think about all that, and instead got correct markup just by specifying your asset, a transform set name, and whatever html attributes you want applied?

Most image optimization plugins require too much configuration or don't use the latest best practices. If your transform service supports avif, you shouldn't need to specify that for every transform. Usually you want 'cover' mode. The main thing that changes between transform sets is the resize dimensions, so that's all we'll make you configure (everything else is optional but still possible).

This plugin brings optimized (but configurable) transform defaults, and a twig function to output all the correct picture markup without you having to think about it.

We provide no-stress generation of markup that

defaults to next-gen image format (avif)
loads appropriate fallback format for older browsers (webp - yes, webp works even on "old" browser versions)
sets height and width to avoid CLS
loads scaled image based on viewport & resolution
handles art direction
handles lazy loading
generates, loads, and swaps a blurry placeholder image

all with

modern, sensible defaults
flexible, organized, and cascading configuration