Just some quick tips when to use JPEG and PNG files.
We’ll be using GIMP as our image editing software for this post.
Use JPEG for pictures.
Like MP3, JPEG uses lossy compression. Just as MP3 gets to compress 3 minute tracks into 3MB by stripping off data that can’t be recognized by the average listener, JPEG images save space by modifying the images in a similar fashion. When used in pictures, the loss in image quality often goes unnoticed.
JPEG image (95% quality) 67.7KB
PNG image 196KB
Use PNG for high contrast images like screenshots.
PNG is a lossless data format. In other words, the picture is saved exactly as it was originally.
JPEG image (85% quality) 38.2KB
PNG image 14.3KB
As you can see, artifacts are missing from the PNG example. The main problem with PNG is that the images are often larger than JPEG images especially when more color is involved.
Decrease the colors used by the image to decrease the file size of PNG files.
There are many ways to optimize the size of PNG files. One of the easiest ways (and the one I personally use) is to reduce the color palette of the image to 256 colors. In GIMP, this is just Image -> Mode -> Indexed….
PNG image 14.3KB
PNG image (indexed, 256 colors) 5.69KB
Another similar option is Posterize (Tools -> Color Tools -> Posterize…) which also reduces the number of colors used in the picture.
Oh and yeah, decreasing the color might work with pictures, but most of the time they’ll look washed out because of the lack of color compared to JPEG images of the same file size.
GIF is evil. Use PNG instead.
GIF is licensed technology. See the Wikipedia entry for more details.
The only things PNG can’t do that GIF does is animation and transparency support in Internet Explorer 6. Given that PNG can handle more colors than GIF (which is limited to a 256 color palette), you probably don’t need to use the latter nowadays.
