Optimize images for the web.

1. Size

Each image at the size it's shown, times two for high-density screens. A photo that takes 800 pixels of width needs 1600, not the camera's 4000. Apolo shrinks to the longest side you ask for, and never enlarges.

$ apolo lote photos/ --formato avif,webp --objetivo 80 --lado-mayor 1600

2. Format

AVIF is today the lightest format every current browser opens: in our measurements, 25% less than JPEG at the same perceived quality. WebP as a fallback, and PNG or lossless WebP for logos and screenshots.

−25%

AVIF vs JPEG, at the same perceived quality

−62%

lossless WebP vs PNG, for screenshots and logos

AVIF, WebP or JPEG XL: the measurements →

3. Quality

For website photos, a SSIMULACRA 2 score of 80 (you can't tell it apart from the original side by side) is a good starting point; 90 if the photo is the product. With “Quality by score”, Apolo finds the quality that reaches that score for each photo, instead of using the same number for all of them.

4. How they're served

With <picture>, the browser takes the first format it can open. Dimensions (width and height) stop the page from jumping while it loads, and loading="lazy" defers whatever is off screen (but never the main image at the top).

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="What the photo shows" width="1600" height="1067" loading="lazy" decoding="async">
</picture>

This website, for example

Every image on this website was optimized by Apolo: screenshots in AVIF with a WebP fallback, at a score of 90 because they contain text. At Webcafeína we build websites like this, that load fast.