Page speed guide
The fastest way to speed up a page is to shrink its images
Images are usually the biggest part of a web page, often more than all the code and text together. A heavy image slows the page down, and a slow page loses visitors and, for the main image above the fold, hurts Largest Contentful Paint, one of Google's Core Web Vitals. Making images smaller is among the cheapest speed gains there is.
Three things that make an image smaller
- Pick the right format. WebP is usually 25 to 35 percent smaller than JPEG at the same look, and supports transparency. JPEG suits photos everywhere. PNG is lossless, which suits screenshots, logos and anything with sharp edges, and costs a lot of bytes for a photo.
- Lower the quality a little. Around 75 to 85 is hard to tell from the original for most photos and saves a lot. Below 60, blocky patches start to show. Use the Compare slider to judge it by eye.
- Do not ship more pixels than are shown. A photo displayed 800 pixels wide gains nothing from being 4000 wide. Resizing to about twice the display width is usually plenty for sharp screens, and it cuts the size far more than any quality setting.
What the Smartest setting does
It encodes each image as WebP and as the best classic format for it, JPEG for a photo or PNG if the picture has transparency, and keeps the smaller one. If nothing comes out smaller than the original and you did not ask for a resize or a new format, the original is kept, so a file never comes back bigger.
What it cannot do
- PNG is only re-encoded. Your browser writes PNG without colour reduction, so it rarely saves much. Tools such as TinyPNG shrink PNGs by reducing the colours. For a flat graphic, converting to WebP here usually does better.
- GIFs and SVGs are left alone. Re-encoding a GIF would freeze its animation, and an SVG is already text.
- HEIC photos open only in browsers that can read them, mainly Safari.
- Very large pictures above 60 megapixels are refused, since a browser tab would run out of memory.
After compressing
- Write a descriptive file name and alt text. A name like
blue-running-shoes.webptells search engines more thanIMG_4021.jpg. - Set
widthandheighton every image so the page does not jump while it loads, and addloading="lazy"to those below the fold. - For the picture shown when a page is shared, see the Open Graph Checker.
- To see how much your images weigh on a live page, use the Page Weight Checker, and the Broken Image Checker to find missing ones.
Frequently asked
Are my images uploaded?
No. They are read, resized and re-encoded by your browser, and the results are made in memory on your device. Nothing is sent to a server, which is also why it works offline once the page has loaded.
Does compression lose quality?
JPEG and WebP at less than full quality are lossy: some detail is traded for size. At the default of 80 it is rarely visible. PNG output is lossless.
Is the camera and location data removed?
Yes. Re-drawing the picture does not carry over the details embedded in a photo, such as the camera model or GPS position. The photo is also rotated to the way it was meant to be viewed.
Is there a limit?
Thirty images at a time. There is no file size limit beyond what your browser can hold, and no daily limit, since nothing is sent to us.
