Images¶
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 : trellis quantisation, optimised tables, progressive scans — about a tenth smaller than other encoders at the same quality.
- WebP is written by libwebp, 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 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.