FANDOM


JPEG (usually .jpg) and PNG (usually .png) are probably the most important still image file types today. The biggest difference between them is that PNG is lossless while JPEG is lossy. This means PNG can save an image at perfect quality--the drawback is the file size tends to be much larger, resulting in more bandwidth used and longer loading times for people viewing pages that use them.

Advantage: JPEGEdit

With JPEG, images can be saved at high quality you almost can't distinguish from the original, to something that looks extremely awful but with a very small file size. Usually for photographic material, a JPEG with a decently high quality setting will not look visibly worse to most people, and will be a fraction the size of the equivalent PNG.

Jpegpng-1
PNG
128 KB
Jpegpng-1-10
JPEG, 10% compression
38.6 KB
Jpegpng-1-20
JPEG, 20% compression
26.5 KB
Jpegpng-1-50
JPEG, 50% compression
8.75 KB
Jpegpng-1-90
JPEG, 90% compression
4.15 KB

Advantage: PNGEdit

When is PNG the better option? Usually for things with a less complicated look--icons, text, simple designs that use large sections of the same color. In these instances the lossless nature of PNG is good, the size disparity isn't so great (PNG can even be smaller if the colors are simple enough), and the quality loss of JPEG is more apparent.

Jpegpng-2
PNG
3.07 KB
Jpegpng-2-10
JPEG, 10% compression
25.2 KB
Jpegpng-2-20
JPEG, 20% compression
17.6 KB
Jpegpng-2-50
JPEG, 50% compression
5.96 KB
Jpegpng-2-90
JPEG, 90% compression
2.96 KB

Another factor is transparency--PNG supports it, JPEG doesn't. So if there's something that you want transparent, there's really no choice, even if the not-transparent portion would be better as a JPEG. There are newer JPEG variant formats that allow transparency, but since they're not widely supported by browsers they're not a realistic option.

Jpegpng-3
PNG
31.4 KB

Something that is a bit trickier to detect is that there can be a difference between full-color PNGs and limited-color PNGs. I have seen these limited ones used for member photos on official H!P sites or I probably wouldn't bother bringing this up. These are cases where an image is saved as PNG, but first has been altered to use 256 or fewer colors--often this leaves the image with a speckly appearance, especially if you zoom in.

Jpegpng-1
PNG
128 KB
Jpegpng-1-low
PNG, low color
44.0 KB

Rules of ThumbEdit

Generally if you're finding a picture from somewhere else online, it's best to leave it in whatever format it is--converting can result in the worst of both worlds. Turn a JPEG into a PNG, and it will perfectly preserve an imperfect image, but take much more space. Turn a low-color PNG into a JPEG and both quality and size could suffer. If it's a high color PNG photograph, though, it might be worth converting to JPEG.

If you're making an image yourself by scanning, capturing an image from a video, or cropping from another image, JPEG is probably the way to go. In most cases I think the 20% compression (sometimes worded as 80% quality) is pretty good, but your mileage may vary.

How to convert images between formats if need be? Most image editing programs will have the capability to save in different formats, and anything more advanced than Paint will probably have more options as described above, such as the varying amounts of compression. There are also online tools that will allow you to convert images with a varying number of options, such as this and this. These are just some of the first Google results I see, though--I haven't used any enough to recommend one in particular.

Community content is available under CC-BY-SA unless otherwise noted.