Size matters. And, in this case, choosing the right image format to reduce the file size matters.
JPEG or PNG? It may seem like a simple choice, but the option you choose matters a lot.
Often, I find that most graphic designers default to PNG files because they are a higher resolution image that is easier to work with. However, these files are typically much larger than the Jpeg version, with a barely noticeable (unless you’re a graphic designer) difference in image quality.
Choose the right image file format, and your web pages will load quickly, which can lead to higher conversion rates.
Choose the wrong image file format, and you’re left with larger file sizes and a slower website—and a slower website means higher bounce rates, lower conversion rates, and lower retention.
Here’s why the choice between JPEG and PNG makes all the difference.
Why Page Speed Matters
How long your page takes to load can make or break the success of your e-commerce business.
Why? Because user experience matters.
In various studies about the impact of e-commerce site speed, if a web page takes longer than 3 seconds to load, more than a quarter of users will leave the site. Double that to 6 seconds, and nearly three-quarters of your visitors are gone.
This reaction hasn’t gone unnoticed by search engine kingpin Google. Google announced that speed is now being used as a ranking factor for mobile searches, and is a landing page factor for Google Search and Ads.
No matter how you look at it, you need a faster website to get customers and keep them. And one of the easiest ways to increase your site speed is to take a hard look at the images on your website.
Which is the best e-commerce website image format?
You have a lot of choices when it comes to which image format you use on your website, but the best choice often depends entirely on how you plan to use the image.
But let’s start with the basics so that you understand the differences between these two very popular image file formats.
What is a JPEG?
JPEG stands for “Joint Photographic Experts Group”, named after the organization that created it in 1986. JPEG is the most common file format for photos.
A JPEG takes a digital image and reduces it to a smaller file size by taking out details in the picture. Its goal is to keep a balance between file size and image quality.
How does JPEG reduce file size?
The human eye isn’t all that great at seeing differences in brightness over a small area, and JPEG takes advantage of that.
JPEG can reduce file size (also referred to as compressing) to around 10% of its uncompressed size, with very little difference in perceptible quality.
As you can see in the example below, there is very little discernable difference between the PNG and the JPEG version of this delicious cup of coffee.
In order to make sure that the PNG file was being accurately represented, the image above is actually a PNG file, but the one on the right was converted to JPG before being added to this comparison image.
That is why the image above is 1.44 MB in file size. If I had saved that comparison image in JPEG instead, it would have been only 166 KB. That is a HUGE difference in site speed for a barely noticeable difference in image quality.
JPEG vs JPG - what’s the difference?
Just a letter!
The JPG file format only exists because of a limitation in earlier versions of Windows. These previous versions used an older file system called FAT-16, which had a three-character limit for file extensions. As newer versions were released, JPG stuck because it was still widely used by most Windows and MS-DOS programmers.
JPEG Features
JPEG uses lossy compression.
With lossy compression, unnecessary information is deleted from an image file permanently. This process is irreversible, and once you convert, you can’t go back.
This loss of data is barely perceivable (often different sub-shades of a colour), so image quality remains relatively intact. However, lossy conversion significantly reduces file sizes, allowing your website to load images much quicker.
JPEGs should only be compressed once.
Due to the loss of data, JPEGs are not the best file format for archival purposes. Each time the file is opened or edited, it experiences a small decline in quality. As this happens over time, JPEG images can eventually degrade to the point where they no longer look good online.
If you will need to make many changes to an image over time, it’s best to save the original file in another format and save each new version as the final JPEG.
JPEGs are best used for large files such as photographs.
A JPEG’s primary purpose is to reduce file size. While this file format is not the best for print, it is the best for the web, where smaller file sizes trump maximum image quality.
What is PNG?
PNG stands for “Portable Graphics Format” and was developed in 1995 as a solution to the colour limitations of the GIF format.
A PNG’s goal is to preserve as much detail as possible in an image destined for the web.
PNG Features
PNGs use lossless compression.
With lossless compression, a file’s size is reduced without a loss of quality.
This type of compression rewrites a file to be more efficient; however, without a reduction in data, the files tend to be much larger, which means they will take longer to load.
PNGs support transparent backgrounds.
Not only do PNGs support fully transparent backgrounds, but can support varying degrees of opacity as well. This feature comes in handy for websites, allowing your image to better blend in with your page background or other features.
PNGs are best for graphics, images with text, or illustrations.
Images that feature text or hard lines are best served using a PNG format, for the most part.
When should you use JPEG vs PNG?
Now that you understand the differences between JPEG and PNG image formats, you’re ready to learn when you should use one over the other or a mix of both.
JPEG is best for:
Photos. Complex images like photos contain a lot of data, resulting in large file sizes that are much too big to display efficiently on a webpage. JPEG lets you benefit from smaller file sizes without noticeably sacrificing aesthetics.
Photo or product galleries. When you are sharing a lot of photos on the same page, your best strategy is to use JPEGs. Their faster loading times means that the images will display more smoothly and much quicker.
Opaque images. As JPEG doesn’t support transparency, if your image doesn’t need to be transparent, choose a JPEG file format for the fastest page-load results.
PNG is best for:
Images with text. Photos with text, scans of text like handwritten notes or newspaper articles work best as PNGs. This image format’s lossless compression keeps the image’s clean lines, resulting in a better user experience.
Portfolios. Graphic designers, photographers, and other creative professions that rely on their portfolios to win customers should choose PNG to preserve the quality and intricacy of their work.
Screenshots. PNGs almost always work best for screenshots as they preserve the details in lower resolution images like screenshots.
Graphics. Images with hard lines like logos, illustrations, comics, drawings, charts, or architectural plans and blueprints need PNG’s preservation of quality to display neatly with the content and layout of a website.
JPEG vs. PNG Size
JPEGs offer smaller file sizes but compromise on quality. They load much faster than other standard file types.
PNGs offer higher quality but have larger file sizes. Due to their size, they load more slowly than JPEGs. Use PNGs wisely.
Each file format has a place and serves a purpose. Before you click ‘Save As’, know how your image will be used on your website.
Tip: Try using a tool like Google’s PageSpeed Insights to see what images are slowing down your website.
A Note on GIFs
Graphics Interchange Format or GIF is actually a series of images placed together to make a quick, soundless video run on a loop.
They are limited to just 256 colours and offer small file sizes.
A GIF should only be used when you need to display a short animation.
New Image Formats - WebP and HEIC
Now that you are an expert on the most widely accepted image formats, you should also be aware of some of the newcomers on the scene.
While they are gaining traction, they are still not universally supported and are still not ready to be widely used on most websites.
This new generation of image file formats aims to fulfill HEIF standards. HEIF, or High-Efficiency Image Format, demands a more streamlined approach to storing image files and allows for the compression of digital photographs to smaller file sizes—without sacrificing image quality.
WebP
Developed by Google, WebP’s goal is to be the single web-compatible image format that deals with all the most common use cases.
Unlike JPEG, it supports lossless conversion and allows for transparency and animations, making it a promising contender as the best image format for websites. It also offers relevant savings in file weight without losing visual quality.
It is expected that WebP will eventually replace JPEG, PNG, and GIF, but it’s not quite there yet. Its primary support still rests on Google-backed software such as a Chrome browser. Competitors Microsoft Edge and Firefox announced WebP support in 2019, and most recently, Apple announced WebP image support in 2020.
HEIC
Based on HEVC, HEIC is fully backed by Apple, and offers one of the most extensive feature sets of the image formats available.
HEIC supports multi-frame images with multi-frame compression, which is the key feature in HDR, multi-focus, and multi-view images.
While backed by Apple, there are no browsers that currently support HEIC natively, mostly due to patent and licensing issues, and lives only in iOS apps.
How to choose the best image format for your e-commerce website
While we wait for native browser support for the newer image formats, you need to choose the best image format for your current scenario.
Your ultimate goal is to pick whichever format allows you to display high-quality images without slowing down your website.
Whether you are using WordPress, Shopify, Amazon, or another platform, you’ll be happy to know that each of these file formats is fully supported.
Here are the key things you need to remember when you make your choice:
- Choose JPEG for any type of photograph, especially when site speed is a concern.
- Choose PNfor screenshots and other images with not a lot of colour data.
- Choose PNG when you require transparent backgrounds.
- Choose GIF for animated graphics.
Once you have chosen the best file format, don’t forget to optimize your photos for success!
Need help with your website design, including picking the right images? Marketplace Solutions can help!
Get Started >
