Use a JPG for photos. Use a PNG for logos, icons, screenshots and anything that needs a transparent background. A PNG can be transparent and keeps every pixel exactly as you saved it. A JPG cannot be transparent, and it keeps photos small by discarding detail you usually will not notice.
The difference you can see
Saved as a JPG. The corners and the center fill with white, because a JPG has nowhere to store transparency.
Saved as a PNG. The page shows through. Put it on any background and only the mark appears.
What a PNG offers that a JPG does not
Transparency. A PNG can store an alpha channel, so every pixel can be fully clear, fully solid, or anywhere in between. That is how a logo sits on a photo or a colored band without a box around it. JPEG does not support an alpha channel (MDN).
Lossless compression. A PNG shrinks the file without throwing anything away. Open it, edit it and save it again, and nothing degrades. Text, thin lines and flat color stay sharp.
A current standard. PNG is maintained by the W3C, and its third edition became a W3C Recommendation in June 2025, adding animated PNG and high dynamic range.
Where a JPG still wins
Photos. A photograph has millions of subtle color changes, and a JPG’s lossy compression handles them well, so the file comes out a fraction of the size of the same photo saved as a PNG. The trade-off is that every save discards a little more detail. Keep an original, and export a JPG from it each time instead of re-saving the JPG.
A JPG is the wrong choice for a logo, a screenshot or anything with text. Lossy compression leaves soft halos and stray colored pixels around sharp edges, and those are easy to see.
Formats at a glance
| Format | Best for | Notes |
|---|---|---|
| JPG | Photos | Lossy. No transparency. |
| PNG | Logos, icons, screenshots | Lossless. Transparency. |
| WebP | Website photos and graphics | Lossy or lossless. Transparency. |
| AVIF | Website photos | Lossy or lossless. Transparency. |
| SVG | Logos and icons at any size | Vector. Transparency. |
| GIF | Simple animation | 256 colors. One transparent color. |
Source: MDN’s image format guide, updated September 2026.
For websites, WebP and AVIF
Both newer formats generally compress better than PNG and JPG, and both support transparency. MDN lists WebP as supported in all versions of Chrome, Edge, Firefox, Opera and Safari, and AVIF from Chrome 85, Edge 121, Firefox 93 and Safari 16.1 onward. Keep a JPG or PNG master for print, email attachments and anyone who needs to edit the file.
For a logo on a website, an SVG is usually better than either. It is drawn from shapes instead of pixels, so it stays sharp at every size, from a browser tab icon to a billboard.
Print and source files
These come up when a printer, sign shop or apparel vendor asks for “the logo file.”
- AI (Adobe Illustrator). The editable vector source of a logo. Keep it, even if you never open it yourself.
- EPS. An older vector format that many printers, embroiderers and apparel vendors still request.
- PDF. Holds a finished layout steady on every device. Send a PDF to present or print a finished piece, and ask for the source file when something needs editing.
- SVG. Vector, like AI and EPS, but built for screens and code.
A brand handoff should include all of these, plus PNG versions with transparent backgrounds and JPG versions for quick use.
Getting images ready for a website
- Size by pixels. A screen ignores the DPI setting. What matters is the pixel width. Export at about twice the width the image will display, so it stays sharp on high-density screens.
- Use sRGB color. Screens expect it. Files exported in a print color space can look dull or shifted online.
- Name the file before you upload it. A descriptive name helps search engines and helps you find it later. Image file names for SEO covers the naming rules.
- Send the original files. When a client sends images for a new site, we ask for the originals in a shared folder. Images pasted into a Word document arrive too small to use. How to organize website content walks through the folder setup.
Free tools that still work
- Mac: Preview resizes images (Markup toolbar, then Adjust Size) and converts between formats. Apple’s guide: crop, resize or rotate an image in Preview.
- Windows: the built-in Photos app and Paint can both resize an image and save it as a JPG or PNG. Paint 3D, which this post once recommended, was removed from the Microsoft Store in November 2024.
- Mac, Windows and Linux: GIMP is free, open source and still actively developed.
Common questions
Questions, answered.
What do PNG files offer that JPG files do not?
Transparency and lossless compression. A PNG can keep its background clear, so a logo sits cleanly on any color, and it saves without discarding detail, so text and sharp edges stay crisp. A JPG has no transparency and drops some detail every time it is compressed.
Is a JPG or a PNG transparent?
A PNG can be. A JPG cannot, because the format has no alpha channel. Any transparent area is filled with a solid color, usually white, when the file is saved as a JPG.
Is a PNG a picture?
Yes. A PNG is an image file, the same as a JPG. It can hold a photo, but the file will usually be much larger than the same photo saved as a JPG or WebP.
Should I use WebP or AVIF instead?
On a website, often yes. Both compress photos more efficiently than JPG, both support transparency, and every current major browser displays them. Keep a JPG or PNG master for print, email and anyone who needs to edit the file.
What resolution should images be for a website?
Pixel width is what matters, because screens ignore the DPI setting. Export at about twice the width the image will display, so it stays sharp on high-density screens, then compress it.