Images are usually the heaviest part of a web page, and the format you choose for each one decides how quickly the page loads, how sharp it looks and whether visitors on slow connections give up before it appears. Yet most people pick a format by habit. This guide explains the three formats you will meet most often, when each one is the right choice, and how to convert between them when a platform insists on a particular type.

The Three Formats in Brief

JPG has been the standard for photographs for decades. It uses lossy compression, discarding detail the eye is unlikely to notice, which keeps photos small. It does not support transparency, and it handles sharp edges and text poorly, where compression artefacts appear as blurry halos.

PNG is lossless: nothing is thrown away. It supports transparency and keeps text, logos and interface graphics crisp. The cost is size. A photograph saved as PNG can be many times larger than the same image as JPG.

WebP is a newer format that supports both lossy and lossless compression, as well as transparency. For the same visual quality, lossy WebP files are typically smaller than JPG, and lossless WebP files are usually smaller than PNG. Every major current browser supports it.

Google's web.dev has a thorough walkthrough of how to choose the right image format, including when newer formats such as AVIF are worth considering.

Which Format for Which Image?

  • Photographs: WebP where your platform supports it, otherwise a well-compressed JPG.
  • Logos, icons and graphics with text: PNG, or lossless WebP. For simple shapes and logos, SVG is often better still.
  • Images needing transparency: PNG or WebP. JPG cannot do it.
  • Screenshots: PNG keeps text readable; lossy formats blur it.

Converting When You Need To

In practice you will often need to switch formats:

  • Moving to WebP for speed. Converting existing PNG files to WebP can shrink large graphics considerably while keeping transparency, which directly speeds up page loads.
  • Going back to JPG for compatibility. Some older software, email clients and upload forms still reject WebP. Converting WebP to JPG gives you a file that opens everywhere.

Always convert from the best source you have. Turning a heavily compressed JPG into WebP will not restore detail that was already lost.

Size Matters More Than Format

Choosing the right format helps, but the biggest savings usually come from serving images at the right size. A photo straight from a camera may be 4,000 pixels wide, while it is displayed at 800 pixels on the page. The browser still downloads every one of those pixels.

Before uploading:

  1. Resize to the largest size the image will actually be shown, allowing for high-density screens (about twice the displayed width is a common rule).
  2. Compress with a sensible quality setting. An image compressor can usually remove a large share of the file size with no visible difference.
  3. Check the result at 100% zoom to make sure text and edges are still clean.

Faster Pages, Better Results

Page speed matters for visitors on mobile data and for search visibility. Heavy images are one of the most common reasons a page loads slowly, and they are among the easiest to fix. Many content management systems can now generate WebP versions automatically and serve them to browsers that support the format, with a JPG or PNG fallback for the rest.

A Simple Workflow

For each new image on your site:

  1. Decide what it is: photograph, graphic, screenshot, or something needing transparency.
  2. Pick the format from the list above.
  3. Resize it to the display size, allowing for high-density screens.
  4. Compress it and check the result at full size.
  5. Keep the original in case you need a different size later.

The Bottom Line

Use WebP where you can, JPG for photographs where you cannot, and PNG for sharp graphics and transparency. Resize before you upload, compress sensibly and keep your originals. Those few steps do more for a site's speed than almost any other change.