FluffyBench

Which image format should you choose?

A photo, a screenshot and a see-through logo don't need the same kind of file. Here's how to pick a format that keeps what matters and opens where you'll use it.

FluffyBench · 8 min read · Reviewed

Which common format fits your image?

Each format keeps some things and lets others go. PNG keeps every pixel exactly, JPG makes photos small, and only some formats keep a see-through background. So the right pick depends on what the picture is and where it's going.

Find the row that sounds like your image, then follow it to the format to try.

A chooser with five rows. A photo to send or post: JPG. A screenshot, chart or text: PNG. A logo or cutout with a see-through background: PNG, WebP or AVIF. A smaller copy for a website: WebP or AVIF. A logo or drawing that's already SVG: keep SVG. A final check under every row asks whether the place it's going opens that format.

Which common format fits your image?

For a website photo, start with WebP or AVIF; for a screenshot whose lettering needs to stay exact, start with PNG. How we reviewed

One exception: an animated GIF, a multi-page TIFF or a layered file holds more than one picture, and a still format keeps only one of them. Check what's inside a file like that before you convert it.

What do lossless and lossy saves keep?

Formats save a picture in one of two ways. A lossless format, like PNG, is a photocopy: every pixel comes back exactly as it was saved. A lossy format, like JPG, is more like a good summary: it keeps what your eye notices and drops fine detail to make the file smaller. WebP can work either way.

Here's what a lossy save does to sharp edges. A patch of an app screenshot was saved as JPG at quality 60, and that JPG was then saved back as PNG.

The number 80 with crisp dark edges.

Original PNG: 62.0 KB

The same number after the JPG save, with speckles around the digits.

JPG: 37.4 KB

The JPG's speckles around the number, unchanged in the PNG copy.

JPG saved as PNG: 151.8 KB

  1. Clean edges

    The space around the original digits is clear.

  2. JPG speckles

    Look just outside the dark strokes: the JPG added speckles.

  3. Same marks

    Saving as PNG kept the JPG's marks exactly.

Lost detail doesn't come back: the PNG copy kept the JPG's marks and grew bigger than the original. Sizes are for the whole files.

What happens to see-through backgrounds and scalable drawings?

Two more things can get lost in a save. The first is a see-through background. PNG, WebP and AVIF can keep one, but JPG can't, so FluffyBench's JPG converter fills those areas with a solid color.

Here's the same sign cutout saved as PNG and as JPG, both shown on a dark background so you can see which parts are see-through.

The sign cutout as PNG on a dark background: its soft edges fade into the dark.

PNG: background stays see-through

The same sign as JPG on a dark background: it sits inside a white rectangle.

JPG: background filled with white

JPG can't keep a see-through background: the empty areas become a solid rectangle. · Photo: NPS Photo, Public domain, via National Park Service.

The second is size on screen. An SVG stores shapes, like a circle of a certain size, so it can be drawn sharp at any size. PNG, JPG, WebP and AVIF store a fixed grid of pixels, and enlarging the grid just makes each pixel bigger.

Here's the same corner of a circle, blown up to the same size from an SVG and from a PNG made from that SVG.

A blue circle's curved edge, smooth and sharp, drawn again from the SVG at the larger size.

SVG: drawn again, still sharp

The same curved edge from the PNG, made of visible square steps.

PNG: the same pixels, made bigger

The SVG works for artwork that was made as SVG. Saving a photo as SVG doesn't turn it into shapes.

So if a logo or icon has to stay sharp at every size, keep the SVG as your master copy, and make a PNG only for places that can't open SVG.

How much space does each format take?

A smaller format matters most when you're sending lots of images or putting them on a website.

We saved one photo and one app screenshot in each format. JPG, WebP and AVIF were each set to the lowest quality that still scored the same for closeness to the original; PNG kept every pixel.

Photo sample

PNG
3.3 MB
JPG
125.8 KB
WebP
90.3 KB
AVIF
53.2 KB

Interface screenshot sample

PNG
62.0 KB
JPG
42.6 KB
WebP
14.3 KB
AVIF
6.7 KB
Each sample has its own scale. AVIF was the smallest for both, with WebP between JPG and AVIF. PNG came out about 62 times the size of AVIF on the photo, and about 9 times on the screenshot.

Photos gain the most from a lossy format. PNG records every tiny change in color and light exactly, and a photo is full of them. A screenshot is mostly flat color, which PNG already stores cheaply.

Doing it in FluffyBench: check the file, then make a copy

Not sure what a file is, or whether its background is see-through? FluffyBench's Image Viewer shows the picture and its details on your device, without uploading it.

Here's how to check a cutout's background on a computer, where the Image Viewer's toolbar has a backdrop menu: open the image, then switch the checkerboard for a dark backdrop.

  1. The Image Viewer's Choose images button, with the option to paste with Ctrl V below it.
    The Image Viewer's Choose images button, with the option to paste with Ctrl V below it.
    Step 1. Open FluffyBench's Image Viewer and choose the image. It stays on your device.
    1. Choose images opens your file picker.
  2. The sign cutout in the Image Viewer, with a checkerboard showing around its soft edges.
    The sign cutout in the Image Viewer, with a checkerboard showing around its soft edges.
    Step 2. The picture appears on a checkerboard. Where the checkerboard shows through, the image is see-through.
    1. Checkerboard around the sign means a see-through background.
  3. The Image Viewer's view controls: zoom out, Fit, zoom in, the Preview background button labelled Checker, and fullscreen.
    The Image Viewer's view controls: zoom out, Fit, zoom in, the Preview background button labelled Checker, and fullscreen.
    Step 3. To check the edges against a solid color, open the Checker button (Preview background) in the toolbar.
    1. The Checker button opens the backdrop choices.
  4. The Preview background menu with Checker, Dark and Light.
    The Preview background menu with Checker, Dark and Light.
    Step 4. Pick a backdrop that contrasts with the image's edges.
    1. Choose Dark.
  5. The same sign cutout on a dark backdrop, its soft edges fading into the dark.
    The same sign cutout on a dark backdrop, its soft edges fading into the dark.
    Step 5. On Dark, the soft edge fades into the backdrop, so the background really is see-through. A white box here would mean it isn't.
    1. Check the edges against the dark backdrop.

With the image still open, the panel beside it tells you what the file is and hands it on to a converter.

  1. The Image info panel lists the format as PNG, the dimensions and the file size.
    The Image info panel lists the format as PNG, the dimensions and the file size.
    Step 1. Beside the picture, Image info shows what the file is now.
    1. Format names what the file really is: PNG here.
    2. File size is the number a smaller format would lower.
  2. The Convert this image and Crop buttons under the Image info panel.
    The Convert this image and Crop buttons under the Image info panel.
    Step 2. When you've decided, Convert this image takes the file straight to a FluffyBench converter.
    1. Convert this image opens it in a FluffyBench converter.

Here's the copy-making part in FluffyBench's JPG converter, using the same sign cutout so you can see what happens to its background.

  1. JPG converter with Choose images, To JPG and the Settings gear.
    JPG converter with Choose images, To JPG and the Settings gear.
    Step 1. In FluffyBench's JPG converter, choose one image, leave To set to JPG, and open Settings.
    1. Choose images.
    2. Leave To set to JPG.
    3. Open Settings.
  2. Quality set to 92 in the JPG settings.
    Quality set to 92 in the JPG settings.
    Step 2. Quality changes how much detail the JPG keeps. Leave 92 for this copy.
    1. Leave Quality at 92.
  3. Transparent areas with the white fill swatch and Choose button.
    Transparent areas with the white fill swatch and Choose button.
    Step 3. Transparent areas sets the solid fill for a see-through background. Leave white for this copy.
    1. White replaces the see-through areas.
  4. Settings gear above the selected sign cutout, with Convert ready.
    Settings gear above the selected sign cutout, with Convert ready.
    Step 4. Close Settings with the gear, then press Convert 1 to JPG to make a copy. Keep the original for later edits.
    1. Press the gear again to close Settings.
    2. Convert 1 to JPG creates the copy.
  5. The completed sign JPG with output size and Download.
    The completed sign JPG with output size and Download.
    Step 5. Read the JPG's size, then use Download to save it. Open the copy where you'll use it and check its edges and background.
    1. Read the output dimensions and size.
    2. Download the JPG.

For another output, choose FluffyBench's PNG converter, WebP converter or AVIF converter. Each one saves a new file in your browser.

Want to see an image's format, size and background before you convert it?

Search FluffyBench