Skip to content

Images

Image resources

Get an image from Unsplash

Bookmarklet to lint images

Cloudinary

Can transform images on the go by updating the URL

I personally don't use it to the fullest on my portfolio site

Cloudinary and Next.JS

Image formats

[[SVG]]

Using Modern Image Formats: AVIF And WebP — Smashing Magazine

AVIF

  • go-to image format
  • replaces JPEG, PNG, GIF
    • animation
    • alpha transparency
    • lossy or lossless
  • Good support since 2022
  • better compression for photograph pictures than WebP

WebP

  • more support than AVIF
  • faster encode/decoding than AVIF

Progressive enhancement

<picture>
 <source srcset="img/photo.avif" type="image/avif">
 <source srcset="img/photo.webp" type="image/webp">
 <img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>

Can't use AVIF nor WebP

  • MozJPEG (optimize JPEG images)
  • OxiPNG (non-photographic images)
  • JPEG 2000 (lossy or lossless photographic images)

AVIF vs WebP

Display different images depending on light/dark mode

probably the picture element

Last update: 2023-04-24