From 8bfc37ab14ac96181cb08a23a323c21d22a61e1f Mon Sep 17 00:00:00 2001 From: solonovamax Date: Mon, 18 Nov 2024 13:02:46 -0500 Subject: [PATCH 1/4] Update documentation to reflect parcel-bundler/parcel#10015 Also clarify some stuff about AVIF. --- src/recipes/image.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/recipes/image.md b/src/recipes/image.md index 6d6b142cf..9849d5a45 100644 --- a/src/recipes/image.md +++ b/src/recipes/image.md @@ -29,7 +29,8 @@ The following image formats are supported, both as input and as output via the ` - `jpeg` / `jpg` - [JPEG](https://en.wikipedia.org/wiki/JPEG) is a very widely supported lossy image format. It's often used for photos, and offers reasonably good compression, but does not support transparency or lossless compression. - `png` - [Portable Network Graphics](https://en.wikipedia.org/wiki/Portable_Network_Graphics) (PNG) is a lossless image format. PNGs are typically much larger than JPEGs or other lossy image formats, but support transparency and offer much higher quality for fine details. - `webp` – [WebP](https://en.wikipedia.org/wiki/WebP) supports both lossy and lossless compression as well as animation and transparency. It's [supported](https://caniuse.com/webp) in all modern browsers, and offers better compression for the same quality as JPEGs and PNGs. -- `avif` – [AVIF](https://jakearchibald.com/2020/avif-has-landed/) is a new lossy image format based on the AV1 video codec which offers significant compression and quality improvements over JPEG and WebP. It's currently [supported](https://caniuse.com/avif) in the latest versions of Chrome and Firefox. +- `avif` – [AVIF](https://jakearchibald.com/2020/avif-has-landed/) is a new lossy image format based on the AV1 video codec which offers significant compression and quality improvements over JPEG and WebP. AVIF competes with JPEG XL, which has roughly similar quality and compression, however JPEG XL offers more features. It's currently [supported](https://caniuse.com/avif) in recent versions of Chrome, Firefox, and Safari. As of January 2024, it is considered part of the [Baseline](https://web-platform-dx.github.io/web-features/) and is supported by ~95% of users. +- `jxl` / `jpegxl` – [JPEG XL](https://jpegxl.info/) is a modern lossy image format optimized for the web which generally offers better compression over WebP, JPEG, and PNG. JPEG XL competes with AVIF, which has roughly similar quality and compression, however AVIF has fewer features. It's currently [supported](https://caniuse.com/jpegxl) *only* in recent versions of Safari. The following formats are also supported as inputs, but are not generally supported by browsers: `tiff`, `heic` / `heif`, and `raw`. From 490f247aec08c0068ab340984927b04bd27e8666 Mon Sep 17 00:00:00 2001 From: solonovamax Date: Mon, 18 Nov 2024 13:39:27 -0500 Subject: [PATCH 2/4] Apply style guide, very minor update. --- src/recipes/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/recipes/image.md b/src/recipes/image.md index 9849d5a45..d74dd2cef 100644 --- a/src/recipes/image.md +++ b/src/recipes/image.md @@ -30,7 +30,7 @@ The following image formats are supported, both as input and as output via the ` - `png` - [Portable Network Graphics](https://en.wikipedia.org/wiki/Portable_Network_Graphics) (PNG) is a lossless image format. PNGs are typically much larger than JPEGs or other lossy image formats, but support transparency and offer much higher quality for fine details. - `webp` – [WebP](https://en.wikipedia.org/wiki/WebP) supports both lossy and lossless compression as well as animation and transparency. It's [supported](https://caniuse.com/webp) in all modern browsers, and offers better compression for the same quality as JPEGs and PNGs. - `avif` – [AVIF](https://jakearchibald.com/2020/avif-has-landed/) is a new lossy image format based on the AV1 video codec which offers significant compression and quality improvements over JPEG and WebP. AVIF competes with JPEG XL, which has roughly similar quality and compression, however JPEG XL offers more features. It's currently [supported](https://caniuse.com/avif) in recent versions of Chrome, Firefox, and Safari. As of January 2024, it is considered part of the [Baseline](https://web-platform-dx.github.io/web-features/) and is supported by ~95% of users. -- `jxl` / `jpegxl` – [JPEG XL](https://jpegxl.info/) is a modern lossy image format optimized for the web which generally offers better compression over WebP, JPEG, and PNG. JPEG XL competes with AVIF, which has roughly similar quality and compression, however AVIF has fewer features. It's currently [supported](https://caniuse.com/jpegxl) *only* in recent versions of Safari. +- `jxl` / `jpegxl` – [JPEG XL](https://jpegxl.info/) is a modern lossy image format optimized for the web which generally offers better compression over WebP, JPEG, and PNG. JPEG XL competes with AVIF, which has roughly similar quality and compression, however AVIF has fewer features. It's currently _only_ [supported](https://caniuse.com/jpegxl) in recent versions of Safari, and no other browsers. The following formats are also supported as inputs, but are not generally supported by browsers: `tiff`, `heic` / `heif`, and `raw`. From 807002022dc4f1b97a94bbd101c536c38f12e0d0 Mon Sep 17 00:00:00 2001 From: solonovamax Date: Mon, 18 Nov 2024 13:49:04 -0500 Subject: [PATCH 3/4] Add JPEG XL image to HTML example --- src/recipes/image.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/recipes/image.md b/src/recipes/image.md index d74dd2cef..8b0f80b8a 100644 --- a/src/recipes/image.md +++ b/src/recipes/image.md @@ -73,6 +73,7 @@ To reference an image from HTML, use the `` or `` element. The sam + test image From d2e23016c52a0940ecca98375a0ea43bc13b1abd Mon Sep 17 00:00:00 2001 From: solonovamax Date: Mon, 18 Nov 2024 13:53:41 -0500 Subject: [PATCH 4/4] Add JPEG XL and AVIF to sharp configuration example --- src/recipes/image.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/recipes/image.md b/src/recipes/image.md index 8b0f80b8a..6abf6f71f 100644 --- a/src/recipes/image.md +++ b/src/recipes/image.md @@ -109,15 +109,22 @@ You can also define more advanced options per format. All images in formats with ```json { + "png": { + "palette": true + }, "jpeg": { "quality": 75, "chromaSubsampling": "4:4:4" }, + "jxl": { + "lossless": true + }, "webp": { "nearLossless": true }, - "png": { - "palette": true + "avif": { + "quality": 50, + "lossless": true } } ```