JPEG or PNG? – Increasing Page Speed with Proper Image Formatting

How About Some Love?

Google looks at how quickly your page loads when its bots are crawling your site. Images and graphics often affect the load speed more than anything else, but learning how to save image files properly can reduce the unnecessary bloating of image-sizes.

There is no reason to blindly throw images into your website without the proper formatting.

Even if you aren’t interested in optimizing your website for search engines, you should do it for the users. No one wants to wait for a website to load. If you reduce your image sizes your visitors will thank you.

PNG Files

Portable Network Graphics is a lossless file format created with the intent to replace the GIF format, due to the patent restrictions of GIF compression. The project was a success and we now have complete access to the format, which is patent-free, has great compression, and is widely supported by web browsers. PNG files are used primarily for transparent images, simple-color images, and images that have hard lines, like text. There are two versions of PNG files: 8-bit PNG(known as PNG-8) and 24-bit PNG(known as PNG-24). PNG-8 is limited to 256 indexed colors, while PNG-24 has millions.

JPEG Files

Joint Photographic Experts Group created a file format, creatively named JPEG \ˈjā-ˌpeg\, to handle complex-color photographic images. When saving a file as a JPEG, users have the choice of quality vs. compression. More compression results in a smaller file size, but you will lose quality. Obviously, less compression results in a larger file-size, but also a higher-quality image. The great thing about JPEG compression is that you can usually find a balance that both looks good and has a small file size. Unfortunately, JPEG files have no transparency. Additionally, the file format is lossy, meaning that it loses some of it’s data each time it is compressed. If you re-save the same image multiple times for some reason, the image quality may be low.

Still need some clarification? Let me clear it up for you.

The file sizes mentioned are for the image in the bottom right of each example.

PNG-24

This simple-color file is saved as a PNG-8. It has a file size of 1.81KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Low Quality JPEG | PNG vs JPEG

The JPEG file can be compressed to about the same size as the PNG, but the quality is terrible.

Does that mean PNG is always better than JPEG? No, there is a reason they didn’t name it the “.PERFECT” format.

While we wait for the best format ever to be created, here is an example of when JPEG can be a better choice:

PNG vs JPEG

PNG vs JPEG

Can you tell a difference between the two sides of the image? I doubt it. The full-size PNG has a file size of 402KB, but the full-sized, compressed JPEG is only 35.7KB.

JPEG works better for this image, because JPEG compression was made for photographic images. The compression still works for simple-color images, but the loss of quality is far more noticeable.

Speak Your Mind