For a website, start with JPG for photographs and PNG for images that need transparency or exact, crisp pixels. Then inspect the result at the size people will actually see. Neither format is the best choice for every image, and a modern delivery format may reduce downloads further.
JPG and JPEG are two file extensions for the same format. In normal web use, JPEG uses lossy compression: it saves space by discarding some image information. PNG uses lossless compression and can preserve transparency. MDN’s image format guide explains these differences and recommends different formats for photographs, icons, and other graphics.
Choose by what is in the picture
| Image | Starting format | What to inspect |
|---|---|---|
| Product or editorial photo | JPG; also compare WebP or AVIF | Texture, gradients, and file size |
| Logo with a transparent background | SVG if you have vector artwork; otherwise PNG | Edges on both light and dark backgrounds |
| Screenshot with small text | PNG or lossless WebP | Letter shapes and thin interface lines |
| Transparent product cutout | PNG or WebP with alpha | Fine edges and partially transparent areas |
| Flat illustration or diagram | SVG for vector originals; PNG for raster originals | Line clarity and scaling |
A screenshot is a good example of why content matters. A small JPEG may look fine in a photo gallery, yet create fuzzy marks around the letters in a settings panel. Conversely, saving a full-width landscape photograph as PNG can preserve every pixel while making the download unnecessarily large.
Transparency is a real requirement, not a quality setting
If a logo needs to sit on several background colors, preserve its transparent areas. A JPEG has no alpha transparency. Converting a transparent PNG to JPG replaces the transparent area with a solid background, so choose that color deliberately.
The PNG to JPG converter lets you choose a background color. This is useful for a product photo that will always appear on white. Keep the transparent master if the same object also appears on a colored banner.
Do the opposite conversion only for a reason: JPG to PNG will not remove a background or recover detail lost to JPEG compression. It changes the storage format of the decoded image. Background removal is a separate operation.
Dimensions can matter more than the extension
Before comparing file sizes, export both candidates at identical pixel dimensions. Comparing a 4,000-pixel PNG with an 800-pixel JPG tells you little about the format itself.
Suppose a product card is displayed 600 CSS pixels wide. A 1,200-pixel-wide image is a reasonable candidate for a screen with a device pixel ratio of 2. It is an example, not a rule for every device. A full-width mobile layout or zoom viewer might need a different source size.
Use the image resizer to make delivery copies from your master. If you control the site, responsive images let the browser select among sizes. web.dev explains how srcset and sizes describe those choices. Changing the extension alone will not fix a site that sends one oversized file to every visitor.
Run a fair five-minute comparison
- Keep an untouched master. Make all candidates from that file, not from one another.
- Choose one intended display size. Export matching dimensions so the comparison is fair.
- Try a high-quality JPG and a PNG. If transparency is essential, compare transparent formats instead.
- Check the difficult areas. Look at text, gradients, hair, fabric, and edges against the page background.
- Record the actual bytes. Pick the smallest acceptable result, then check the published page on a phone.
For a JPEG candidate, the image compressor can help you adjust the size-quality tradeoff. Do not assume a fixed percentage reduction: the result depends on the picture and its existing compression. If a label becomes unreadable, the smaller file has failed even if it loads quickly.
Where do WebP and AVIF fit?
PNG versus JPG is often a choice about the source you upload. Your website may deliver a different format. WebP supports lossy and lossless compression plus transparency, as described in Google’s WebP documentation. AVIF is another option covered by MDN.
Try the JPG to WebP converter for a photo and compare its actual size and appearance. Re-encoding a heavily damaged JPG does not rebuild the original, so start from the best file you have. Check what your CMS accepts and what the published page actually serves; an automatic image pipeline may already perform this conversion.
A practical rule for a small shop
Keep editable or high-quality masters. Use photographic delivery copies for product shots, preserve transparency for cutouts, and keep text-heavy graphics crisp. Write meaningful alt text in the website, too: changing image format does not describe the product to someone who cannot see it.
The winning file is the one that shows the necessary detail, works on the intended background, and downloads without needless weight.