Responsive JXL, AVIF, and WebP Images with Cloudinary

This template asks Cloudinary for three explicit image formats. The browser chooses the first format it supports, in this order: JXL → AVIF → WebP.

Format selection with picture

Each CloudinaryImage component renders a <picture> containing image/jxl, image/avif, and image/webp sources. Every source has its own responsive srcset and the same sizes hint. The final <img> uses WebP for both src and srcset.

A browser that supports JPEG XL selects the first source. Otherwise it tries AVIF, then WebP. This is format capability selection; an HTTP error at a selected source does not automatically retry the next format.

Quality and crop

Each URL uses an explicit f_jxl, f_avif, or f_webp, alongside q_auto for quality. Actual file sizes depend on the photograph, dimensions, and encoder output.

The component scales the crop height with each candidate width. A 16:9 cover remains 16:9 at every size instead of downloading a differently shaped crop.

Upload once, save the breakpoints

The upload command requests Cloudinary’s responsive breakpoint analysis separately for all three formats. It saves the returned widths, image dimensions, cloud name, and version in src/data/cloudinary-images.json.

npm run cloudinary:breakpoints -- "src/images/blog/photo.jpg" --alt="Describe your photo"

Paste the printed image tag into a Markdown post. The build consumes the saved JSON without needing private API credentials. See CLOUDINARY.md in the repository for the complete setup instructions.