# Images - SSR websites

> Make the images of an SSR website smaller in one click - a whole folder or one image, JPEG with MozJPEG, WebP with libwebp, PNG without loss, a largest size, a preview with a slider, the sizes before and after, and the references updated when an image changes its format.

Source: https://docs.apimaker.dev/v4/docs/ssr/images.html

The images of a website are most of what its pages download. The panel makes them smaller where they are : every image of a folder in one click, or one image.

- **JPEG** is written by [MozJPEG](https://github.com/mozilla/mozjpeg) : trellis quantisation, optimised tables, progressive scans — about a tenth smaller than other encoders at the same quality.
- **WebP** is written by [libwebp](https://developers.google.com/speed/webp), lossy or lossless.
- **PNG** keeps every pixel : an alpha channel nobody sees is dropped, greys are written as greys, an image of 256 colours or fewer gets a palette of 1, 2, 4 or 8 bits a pixel. When asked, a PNG of more colours gets a palette of 256 too, which loses a little.
- Every image is made to fit a **largest size** (1920 × 1920 by default), its proportions kept ; a smaller one keeps its size.
- A photo is turned the way its camera said, then its **EXIF** is gone : the camera, the date, and the GPS position nobody wants published.

## Compress images

| To | Do |
|---|---|
| Compress a folder | Right click a folder of the tree : **Compress images…** (the number of images below it is on the right). |
| Compress the whole website | **Compress every image…** in the `⋮` menu of the files, or in the menu of the empty part of the tree. |
| Resize and compress one image | Right click it : **Resize & compress…** ; or open it, and **Resize & compress** in the bar above it. |
| Make a new image of one | Right click it : **Save as a new image…** ; or open it, and **Save as new** in the bar above it. |

The dialog lists the images with their formats and their pixels, the largest first. The settings start at the defaults ; change one and the image of the preview is made again.

### A new image

The dialog of one image writes the result where the image is (**Replace the image**), or as a new file beside it (**As a new image**) : a smaller copy for a thumbnail, a WebP of a JPEG, a version for phones. The name starts as the pixels of the result (`hero-800x533`) and follows the settings until you type one ; the extension is the one of the format (`.webp`, `.jpg`, `.png`).

- The original stays as it is, and no page changes : name the new image where you use it, `asset('/img/hero-800x533.webp')`.
- A new image is written smaller or not : you asked for it. **Only when smaller** and the options of another format are for the original.
- A name which a file of the website has already is refused : nothing is written over.
- Once it is made, the new image opens in the editor, with its size, its format and its pixels.

**75 %**, **50 %** and **25 %** under the largest size make the image that share of its size, its proportions kept. A width with a height of 0 makes it that wide.

### The preview

The image of the preview is shown twice : its original left of the line, the result right of it. Drag the line, or move it with Left and Right. **100 %** and **200 %** show the pixels themselves : scroll to a face, a text, a gradient, and look for the difference. Above it : the size of the original, the size of the result, and how much smaller it is. Click another image of the list to see it.

### The sizes

Three numbers above the list say what the images take now, what they will take, and what you save. **Estimate savings** makes every chosen image as a trial, without writing it : each row shows its size now, its new size and the gain, with a bar. The images are then written as the trial made them, without being made again.

**Compress** writes them, a few at a time : each row turns green with its gain as it is written, and the new size goes down while you watch. **Stop** finishes the images under way and writes no more.

### The settings

| Setting | Default | What it does |
|---|---|---|
| Preset | Balanced | **Balanced** : quality 80, 1920 px. **Smallest** : quality 60, 1280 px, the colours of a PNG reduced. **High quality** : quality 90, 2560 px, every colour of a JPEG kept. |
| Format | Keep | Each image stays what it is. **WebP** : a quarter to a third smaller than JPEG, transparency kept, every browser shows it. **JPEG**, **PNG** : every image as that format. GIF and BMP are made smaller only as another format. |
| Quality | 80 | 1 to 100, for JPEG and lossy WebP. Below 70 the difference starts to show on photos. |
| Largest size | 1920 × 1920 | The box every image is made to fit ; 0 is no limit on that side. 4K, QHD, Full HD, HD and 800 in one click. |
| Progressive | On | A JPEG shows coarse first, then sharp. MozJPEG writes it smaller too. |
| Keep the colour profile | On | The ICC profile of a JPEG is written into the result : photos of wide colours (Display P3) stay right. |
| Colour detail | 4:2:0 | How much of the colour a JPEG keeps : 4:2:0 as cameras write, 4:4:4 for text and thin coloured lines. |
| Reduce to 256 colours | Off | A PNG of more colours gets a palette of 256, its errors spread over the neighbouring pixels (dithering). Often 60–80 % smaller for drawings and screenshots ; gradients may show bands. |
| WebP | Auto | **Auto** : lossy for a photo ; for an image which came without loss (PNG, GIF), lossless unless that is clearly larger. **Lossy**, **Lossless** : always so. |
| Effort | 4 | 0 to 6 : how hard libwebp works. 6 is a little smaller, and slower. |
| Background | White | What transparent pixels become in a JPEG, which has no transparency. |
| Only when smaller | On | An image the settings would not make smaller stays as it is (**small already**). |
| Replace the originals | On | With another format : `hero.jpg` goes once `hero.webp` is written. Off, both stay. |
| Update the references | On | With another format : the pages, the data and the style sheets which name `/hero.jpg` name `/hero.webp`. |

### Another format

An image written as another format gets the extension of it : `public/img/hero.jpg` becomes `public/img/hero.webp`. The texts of the website which name it are changed to name the new file :

- its address, in a page, a layout, data or anywhere : `asset('/img/hero.jpg')`, `"image": "/img/hero.jpg"` ;
- its path from a style sheet or a script of `public/` : `url(img/hero.jpg)`, `url(../img/hero.jpg)` ;
- its path in the website : `public/img/hero.jpg`.

Only a name which stands alone is changed : `/img/hero.jpg.bak` and `/other/img/hero.jpg` are other files. The dialog says which texts changed ; they are compiled again, and the problems of the website show anything which no longer finds its image. An image whose new name is taken already (`hero.webp` is there) is left as it is.

## What is left as it is

| Image | Why |
|---|---|
| An animation (GIF, WebP, APNG) | Made smaller, it would keep its first frame only. |
| SVG | It has no pixels : it is a text. |
| AVIF, TIFF, ICO | Not read here. AVIF is small already. |
| A GIF or a BMP, with **Keep** | Choose WebP, PNG or JPEG for it. |
| An image already small | A result which is not smaller is not written (**Only when smaller**). |

## Before you compress

The originals are replaced. Commit the website on the Git page first : the [history of a file](https://docs.apimaker.dev/v4/docs/ssr/git.html#the-history-of-a-file) brings back any version which was committed, an image too. After compressing, commit again to keep the smaller images.

Images are made on the server, a few at a time, on threads of their own : the APIs of the server keep the rest of its processors. An image is at most 8 MB, and at most 16 383 pixels a side.