Guides / Finipix / Putting it online
Make Images Smaller for the Web Without Visible Quality Loss
Finipix guide · Resize and compress images for the web. Open Finipix
You finish a page, open it on your phone, and the photos arrive in slow stripes. The page weighs 9 MB and almost all of it is five pictures. The usual reaction is to drag a quality slider down until the files are small, and then the photos look smeared. There is a better order of work, and in most cases it cuts files by 80 to 95 percent with no difference anyone will notice on the page.
What actually makes an image heavy
Three things decide the size of an image file, and they matter in roughly this order.
- Pixel dimensions. A 4000×3000 phone photo has 12 million pixels. Shown in a 700-pixel column, even at double density, it needs about 1400×1050, which is under 1.5 million. That is eight times fewer pixels before any compression happens. This is where most of the saving is, and no quality setting can make up for skipping it.
- Format. The same photo saved as PNG is often several times larger than as JPEG, because PNG keeps every pixel exactly. WebP and AVIF usually come out smaller than JPEG at similar visible quality. The guide to image formats and sizes covers which format suits which picture.
- Quality setting. For JPEG, WebP and AVIF, the quality number controls how much fine detail the encoder throws away. Between about 75 and 85 the loss is hard to see in photos; below 60 you start to see blocky skies and smudged edges.
A fourth, smaller one: photos from cameras and phones carry metadata (EXIF), such as camera model, date and often the GPS location where the photo was taken. It adds a few kilobytes and, more importantly, can tell strangers where you live. Removing it for the web is a good habit.
A routine that works for almost every page
- Decide the display width. Look at where the image goes. A full-width banner on a laptop is shown at roughly 1400 to 1900 CSS pixels; an image inside a text column, 600 to 800; a card in a grid of three, 300 to 400.
- Resize to about twice that width, with a sensible cap. Phones and many laptops have high-density screens, so 2x keeps things sharp. In practice that gives 1920 for a banner, 1200 to 1600 for a body image, and 600 to 800 for thumbnails. Never enlarge a small image; it only gets bigger and blurrier.
- Choose the format. Photos: WebP or JPEG (AVIF if your workflow supports a fallback). Screenshots, diagrams and logos with transparency: often PNG, see below.
- Choose the quality. Start at 80. If you see no difference at 100% zoom, try 70. If you see damage, go back to 85. Do this once per kind of image, not once per file; a setting that works for one product photo will work for the rest of the set.
Rough targets after this: a banner under 300 KB, a body photo under 150 KB, a thumbnail under 50 KB. A phone photo that started at 4 MB often ends up around 150 to 250 KB as a 1600-pixel WebP.
How to check the result
Judging compression on a scaled-down preview is the most common mistake. When a 1600-pixel image is shrunk into a small window, the artifacts are shrunk too, and everything looks fine. Look at it at 100%, where one image pixel is one screen pixel, and compare it with the original in the same spot.
Where to look: smooth gradients such as sky, skin and studio backgrounds (watch for banding and blocks), fine edges such as hair, text in the photo and thin lines (watch for halos and smearing), and dark areas, where low quality settings show grainy blotches first. If those three places look right, the rest will too.
Then check the page itself. Open it on a phone, or use the device toolbar in your browser's developer tools, and see the image at the size visitors will see it. That is the real test; 100% zoom is just the stricter version.
When PNG should stay PNG
Converting everything to JPEG is tempting, but some images get worse and bigger that way.
- Screenshots and interface images with text. JPEG blurs the sharp edges of letters and adds faint noise around them. PNG keeps them crisp and, because large areas are a single flat color, stays reasonably small. WebP can be a good alternative here; compare the two.
- Logos, icons and flat graphics with transparency. JPEG has no transparency. Saved as JPEG, the transparent area is filled with a solid color (usually white), which shows as a box on any colored background. Keep PNG, use WebP, or use SVG if you have the vector file.
- Images that are already small. A 12 KB PNG icon is not worth converting.
The test is simple: if the image is a photograph, it should almost never be PNG. If it is made of flat colors, text or sharp lines, PNG or WebP usually beats JPEG.
Doing a whole folder at once
Most sites have more than one image, and doing them one by one invites inconsistent settings. Batch work is easier if you sort first: put banners, body photos and thumbnails in separate folders, since each group needs a different width. Then process each folder with one setting, keep the originals in a folder of their own, and give the output folder an obvious name such as web so the two never mix.
Keep the file names. If your HTML already points to images/team.jpg and you switch to WebP, the name changes to team.webp and every src must be updated. Staying with JPEG avoids that edit; switching to WebP saves more bytes. Either is a reasonable choice, as long as you update the HTML when the extension changes.
Doing it in Finipix
Finipix is a free tool from Qorlize that runs in your browser. The images are processed on your own device and never uploaded, and no account is needed.
- Open Finipix and drag a set of images onto the window, or choose them with the file picker. JPG, PNG, WebP and GIF work, and AVIF opens in most current browsers. A GIF is reduced to its first frame, so do not use it for animations.
- Pick a size preset: Body image (1200px wide), Hero / banner (1920px wide), Thumbnail (600px wide), Original size, or Custom with a maximum width and/or height. Images are never enlarged and keep their proportions. There is also a Share image preset that crops to 1200×630; click the preview to choose which part stays.
- Choose the output format: keep original, JPEG, WebP or PNG. AVIF is offered when your browser can encode it.
- Set the quality slider (40 to 95, default 80). It applies to JPEG, WebP and AVIF.
- Check the results. Each image shows the original and new file size, the pixel dimensions and the percent saved, and a before/after slider for comparing the two. Zoom in on the details mentioned above before deciding.
- Download images one by one, or all of them as a ZIP.
A few things happen automatically. EXIF data, including GPS location, is removed, and the photo's orientation is applied so it does not appear sideways. Transparent areas become white if you save as JPEG. If a result would be larger than the original at the same size and format, Finipix keeps the original instead of handing you a heavier file.
Other tools do this well too. Squoosh (squoosh.app) from Google Chrome Labs also works locally in the browser and gives fine control over each codec, which is handy when you want to tune a single important image. Desktop image editors offer the same resize and quality options in their export dialogs.
Next
Once the files are smaller, put them back into the page with the right width, height and alt attributes, as described in web image formats and sizes. If you also need an icon for the browser tab, see making a favicon set from your logo.
Want to try it on your own images? Open Finipix. It runs in your browser and your images stay on your device.