March 31, 2020

JPG vs PNG: Why Image Format Matters for a Fast Website

Putting your best foot forward with a website goes beyond great content. The images have to be relevant, eye-catching, and just plain pop. In order to achieve that, choosing the right image format will make all the difference. 

If your image format is too large, it can slow down your website, resulting in higher bounce rates and lower conversion rates. No one wants that. So let’s cover some key factors in choosing the right image format for a stellar-looking website that loads quickly. 

The first thing to consider is the type of formats you’re dealing with. 

What is a JPG/JPEG?

A JPEG is the most widely-used lossy compressed image format. It stands for “Joint Photographic Experts Group”, which is the organization that created the standard. Windows users might recognize them more as “.jpg”s, which is derived from the format’s 3 character filename extension that used to be the Windows standard, whereas Mac users will recognize “.jpeg”. In essence, JPEGs reduce the detail in the image for a smaller file size while keeping the image quality as high as possible.

What is a PNG?

The “Portable Graphics Format” (PNG) is the standard image format for lossless compression and works well for text, line drawings, and iconic graphics at a small file size. 

What about other image formats?

Other image formats include GIF, BMP and TIFF. WEBP is another image that was created specifically for the web and small file sizes. WEBP files are even smaller than JPEG and PNGs, and can maintain a high image quality. While it’s a well-supported file format in web browsers, it’s not as common in image editing programs. Suffice to say, these are not as good as JPEG or PNG. 

So, which of these is best for your website?

Image Compression for Photos vs. Graphics

A good rule of thumb is JPEGs are for photos—images with lots of colour, gradients and textures—and PNG is for graphics and screenshots; images with sharp lines and separated areas of flat colours.

You want to compromise the image quality as little as possible while reducing the image file size as much as possible because remember—it’s all about that download rate! For every second of waiting time, you could be losing half of your visitors before they even get to see your wonderful content. This requires that oh-so-important balance between file size and quality.

Oh, and you need to accomplish this without using uncompressed images that slow your website to a crawl and increase your bounce rates.

Here’s how that works.

JPEG and PNG Image Compression

JPEG compression involves grouping together multiple similar pixels, somewhat blurring the lines between areas. Great for photographs, horrible for graphics and screenshots. You might recognize this on JPEG files that should’ve been PNGs from the telltale fuzzy outlines.

However, if you saved a photograph as a compressed PNG, the same won’t be true. Sure, there may be a bit of graininess, but not nearly as unprofessional as the reverse. The downside: PNG files cannot be compressed to as small a file size.

How to Compress Images

We recommend the following services and tools to assist with image compression:

Crisp Graphics and Transparent Backgrounds

Saving a heavily compressed graphic or screenshot as a JPEG will achieve a smaller file size than a PNG, however, the PNG will looker crisper than a JPEG of equal file size—and even more clearly than a JPEG or a smaller file size.

Another thing to note is that only PNG image formats will translate transparent backgrounds.

How to Choose Between a JPEG and PNG

What happens if you have an image that doesn’t comply entirely with the “photograph” or the “graphic” category requirements? For example, a screenshot containing text and sharp lines. In this case, a PNG would be your best bet to retain the crispness of the text.

You can always save the image in both formats, then compare file sizes and visual quality after compression.

Now, go forth and try them out to see which formats work best for your fast, high-quality website! Check out website services by Liddleworks if you need help with WordPress web design or development.