Skip to content

Commit

Permalink
Apply style guide, very minor update.
Browse files Browse the repository at this point in the history
  • Loading branch information
solonovamax committed Nov 18, 2024
1 parent 8bfc37a commit c6924e8
Showing 1 changed file with 3 additions and 6 deletions.
9 changes: 3 additions & 6 deletions src/recipes/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ The query parameters you can use are:

### Image formats

The following image formats are supported, both as input and as output via the `as` query parameter:
The following image formats are supported, both as input and as output via the `as` query parameter:

- `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. 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`.

Expand All @@ -46,10 +46,7 @@ To reference an image from JavaScript, use the `URL` constructor. For more detai
{% samplefile "main.js" %}

```js
const imageUrl = new URL(
'image.jpeg?as=webp&width=250',
import.meta.url
);
const imageUrl = new URL("image.jpeg?as=webp&width=250", import.meta.url);
```
{% endsamplefile %}
Expand Down

0 comments on commit c6924e8

Please sign in to comment.