Waiting follows size
A connection carries data at a rate and a file arrives at a size. The waiting is those two numbers meeting, and the one you decide when you publish is the size.
About Shrinkly
The weight of an image is the part of a page people wait for
Shrinkly re-encodes PNG, JPEG, WebP and AVIF files in your browser and hands back a lighter version to publish. It reads all four formats and writes back the ones the browser you are using can encode, so a format this browser cannot write is named plainly instead of being skipped in silence. This page is about why the lighter file matters: what a browser does with every image, and where the size of the file shows up for the person reading the page.
One image, four things the browser has to do
An image is not painted from the file you saved. It is fetched, unpacked and then drawn, and each of those steps costs something on the visitor’s side.
- Request
The browser reaches the file named in the markup and asks the server for it. Nothing about that image can begin until the answer arrives.
- Transfer
The bytes cross the visitor’s connection. This is the step file size governs directly: a lighter file is fewer bytes on the wire, on a phone in a lift and on office wi-fi alike.
- Decode
The browser expands the compressed data into pixels it can draw. That takes memory and processor time on the device that opened the page, and it happens again for every image.
- Draw
The image takes its place in the layout. Until it lands, the space it occupies can sit empty and the words around it can move.
Where the weight ends up
A large image is not one delay in one place. It is paid for three times over: on the connection, on the device, and in the company of everything else the page needs.
The device pays to show it
A decoded image is held as pixels, at the full width and height stored in the file. A picture exported far larger than the space it fills costs memory the page could have spent elsewhere, and phones have the least to spare.
Images compete with the page
Stylesheets, fonts, scripts and other images share the same connection and the same first seconds. Weight given to one large image is weight the rest of the page does not get.
A page of lighter images is also cheaper to send to whoever opens it, whether that is one reader on a phone or a month of visitors.
What comes back out, and which format to publish
Compression is not one operation. A lossless pass rewrites the same picture in fewer bytes; a lossy pass leaves detail out. Which one a file gets depends on what the format can do, and which format you publish depends on what the image shows.
Lossless, for PNG
Every pixel stays exactly as it was drawn. The encoder stores the same values more economically, so the picture is untouched and the file has less to carry.
Lossy, for JPEG, WebP and AVIF
These formats can omit detail that is hard to see at the size the image is displayed. That omission is where the saving comes from, and the original is the only copy that still holds everything.
Shrinkly works on the file you drop in, inside your browser, and shows the size that comes back so you can set it beside the size you started with. How much a file shrinks depends on the picture itself: a flat screenshot and a photograph of leaves carry very different amounts of spare data, and only the file in front of you can say which it is.
| Format | Where it earns its place | Saved as |
|---|---|---|
| PNG | Screenshots, diagrams, flat colour and anything that has to keep a transparent background. | .png |
| JPEG | Photographs, where trading very fine detail for size is invisible at the size the picture is shown. | .jpg |
| WebP | Photographs and graphics alike, in a format current browsers display. | .webp |
| AVIF | Photographs, in the newest of the four — worth checking that this browser can write it and that the browsers your visitors use will display it. | .avif |
Before you publish
- Export at the width the page actually displays, then compress what you exported.
- Keep the original. Re-encoding a lossy format a second time does not bring back what the first pass left out.
- Judge the result at the size it appears on the page, not zoomed in to full resolution.
- Write WebP or AVIF where the browsers your visitors use will display them, and only in a browser that can write them.
What this visit is allowed
A free visit needs no account and no sign-up: the drop zone opens straight away, and every session starts with its own count of compressions and conversions. Shrinkly keeps that count as the session goes and reads it back when this page opens, so the figures below are this visit’s own record rather than a promise written into the page.
The allowance for this visit could not be read just now.
The counts are per session, so a new visit starts its own. Each figure above is answered for this visit, and an image larger than the size shown is named as too large before any work starts.