How to embed AV1 Image File Format (AVIF) images

New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive: AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP. 🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag […]

Native Image Lazy-Loading: loading-attribute-eagle-polyfill

Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading: Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager. According to @HTTPArchive, 34 websites are setting it to loading="eagle" 🤔 There's a Lord […]

Cleverly Cropping Images on Twitter using AI

To crop uploaded images, Twitter doesn’t simply cut them off starting from the center. After first having used Face Detection, they – in 2018 already – switched to AI to cleverly crop uploaded images. Previously, we used face detection to focus the view on the most prominent face we could find. While this is not […]

Embracing Modern Image Formats

Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set. <picture> <source srcset="/images/cereal-box.webp" type="image/webp" /> <source srcset="/images/cereal-box.jp2" type="image/jp2" /> <img src="/images/cereal-box.jxr" […]

Using AWS’ “Server­less Image Han­dler” to roll your own Image Transform Service

Ama­zon AWS has offered a Server­less Image Han­dler for a while that allows you to spin up an AWS Lamb­da func­tion to cre­ate your own pri­vate lit­tle image trans­form ser­vice that is inex­pen­sive, fast, and is front­ed by the Cloud­Front con­tent deliv­ery net­work (CDN). Whenever an image is uploaded to the bucket, a Lambda function […]

Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches […]

Automatically compress images to your Pull Requests with this GitHub Action

The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane: Image actions will automatically compress jpeg and png images in GitHub Pull Requests. Compression is fast, efficient and lossless Uses mozjpeg + libvips, the best image compression available Runs in GitHub Actions, so it’s visible […]

Native image lazy-loading for the web with [loading="lazy"]

Addy Osmani, on an upcoming web feature which is about to land in Chrome 75: The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy: is a good candidate for lazy loading. eager: is not a good candidate for lazy loading. Load […]