PNG vs JPEG vs WebP — Which Image Format Should You Use?

Choosing the right image format has a direct effect on page weight and load time. PNG, JPEG and WebP each have a sweet spot, and picking the wrong one can make a file several times larger than it needs to be.

The three formats at a glance

• PNG is lossless and supports transparency, which makes it ideal for logos, icons and text-heavy graphics, but files are often large.
• JPEG is lossy and has no transparency, but it is excellent for photographs and produces small files.
• WebP usually beats both on size while supporting lossy, lossless and transparency, and modern browsers support it.

When to use each

• Photographs and gradients: JPEG or WebP.
• Logos, icons and screenshots with sharp edges: PNG or lossless WebP.
• Animated images where GIF is too heavy: animated WebP.

Lossy versus lossless

Lossy formats discard detail to shrink the file. Lossless formats preserve every pixel exactly. For photographs the loss is usually invisible; for crisp text and lines it is not.

Serving the right format

The HTML picture element lets a browser choose the best source:

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

Common pitfalls

• Using PNG for photographs, which makes files needlessly large.
• Using JPEG where transparency is required.
• Serving large images at a resolution bigger than they are displayed.

Frequently asked questions

• Why does my JPEG not keep transparency? JPEG has no alpha channel, so transparent areas become a solid color.
• Is my image uploaded when I convert formats? No. Conversion can happen locally in your browser.

Need to switch an image between formats? Try the free Image Format Converter — it converts PNG, JPEG and WebP locally.