JPEG VS PNG: Why Do We Use PNG Files in Product Photography?

As a product photographer shooting a lot of pack-shot photography for the eCommerce market I supply images to clients in a range of formats, but the most common file formats I am asked for are JPEG and PNG. In product photography PNG files are great in post-production for when you want a transparent background in photoshop as well as for pack-shot and product photography where you want to add a range of digital backgrounds.

Working recently with a new client photographing party packs for their eCommerce website, I thought it would be a great opportunity to show the flexibility of a PNG file format. But what is the difference between a JPEG and a PNG and how do we use them in other ways?

There is always a lot of buzz about whether to choose PNG or JPG. I have also often come across questions like, “What is a PNG file used for?” and “What is the meaning of PNG files?”

Let us thoroughly explore these questions today and settle the debate of PNG versus JPG.

JPEG

The file format commonly known as JPG was developed by Joint Photographics Export Group in 1992, this is where the file name comes from. Most of the time you will commonly see JPG expressed as JPEG, but functionally they mean the same thing. In the early days of computers, file types were limited and only had a three-character limit (hence JPG), but these days we see JPEG now becoming more common.

Pronounced “jay-peg,” this image file format was designed to help minimize the file size of photographs and make them more suitable for sharing over email and use in web design. This is why most of the photos you find online are likely in JPG format.

When an image is converted into a JPG from its original format such as RAW, some quality is compromised. The reason is because the compression is lossy, which means that a certain amount of its unnecessary information is permanently deleted. But this does mean a JPG does, however, allow you to create a lot smaller file size than you can with a PNG.

An image file should be converted to a JPG and used in any situation when it’s important to have a small file size. Beyond this initial saving as a JPG, there are plenty of tools that will allow you to shrink the file further. This is useful for web images, as the smaller size will increase the speed at which a website page loads. With modern broadband and internet connections have become more universal these days, this is becoming less of an issue. However, those with slower internet connections or older, less powerful computers will thank you for your consideration.

PNG

An acronym for Portable Network Graphics, PNG is a lossless file format designed as a more open alternative to Graphics Interchange Format (GIF).

There is a notable difference between PNG vs JPG when it comes to reducing file size. Unlike JPEG, which relies on DCT compression.

PNG uses LZW compression— the same as used by GIF and TIFF formats. Boiled down, PNG’s two-stage LZW compression takes strings of bits contained in the image’s data, then matches those longer sequences to accompanying short codes held in a dictionary (sometimes referred to as a codebook) that is stored within the image file. The result is a smaller file that maintains high quality.

When it comes to the advantages and disadvantages of PNGs, then it is important to note that PNGs support semi-transparency and a full colour spectrum, whilst JPEGs don’t.

The biggest advantage of PNG over JPEG is that the compression is lossless, meaning there is no loss in quality each time it is opened and saved again. PNG also handles detailed, high-contrast images well.

It’s for this reason PNG is more often than not the default file format for screenshots, as it can provide an almost perfect pixel-for-pixel representation of the screen, rather than compressing groups of pixels together.

However, it is also important to note that PNGs are not suitable for print, are not universally supported and require more memory space.

Other Common File Formats

SVG

SVG is short for scalable vector graphics and is a vector image format that is best suited for two-dimensional graphics and animations. SVG files allow three types of graphic objects – vector graphics shapes (straight line paths and curves), images and text. 

SVG files can be directly written into HTML codes by using tag. They are highly scalable and zoomable and do not lose any quality even if they are zoomed or resized. The SVG format allows for images to be searched, indexed, scripted, compressed, edited and also printed. However, you do need to be careful that your SVG file does not contain a lot of paths or it can make your website loading time higher.

GIF

The debate still rages around whether it’s pronounced “gifs” or “jifs”. That said, GIFs use 256 RGB colours and are similar to PNG files in the sense that they are lossless. Moreover, they also support animations and are often used for solid colour graphics like logos. 

Due to the colour limit on GIFs, it is harder to save photographs. However, they are incredibly easy to make and can be classified into three major categories – animation based gifs, video based gifs and stickers. Most gifs are less than 500 pixels wide and are mostly used on social media.

JPG versus PNG – DOES IT REALLY MATTER?

When talking about JPG vs PNG and comparing the two files side by side, the truth is that you won’t be able to see much of a difference in the photos.

So, if PNG pictures don’t look that much different to JPGs, why don’t we always use the JPG format and make things easier for ourselves?

Unfortunately, it’s not all that simple and the reason for that is image compression. When it comes to JPEG or PNG for quality, there are certain things you’d need to consider.

You want the highest quality image format, but you also want to have a responsive website, so you need to really take the difference between JPEG and PNG into the consideration and particularly the difference in image compression.

Think about it like this: Image compression means reducing the image size without sacrificing any of the quality for the sake of the size. Generally, stronger compression means smaller file size which normally equals worse image quality overall.

So, if you are looking for the best compression, you will need to find the right balance between the quality and the size of your file.

When you look at the saved images on your computer, you will see the best version of it because the file has not been compressed. However, if that same image is on your website, it needs to be downloaded in order for you to see it.

So logically, that will mean that the larger the image – the longer the loading time on your website.

But as I said at the start one of the most common places PNG files work well, is in the world of product photography, especially eCommerce product photography. Because of the of the great use of its ability to use transparency and or opacity, as opposed to JPG whereby default it will retain a white/blank background.

For more information on how to get a transparent background in Photoshop follow the link

How to get a transparent background in Photoshop

Free Online Image Optimisation Tools

When you work with websites, you often need to buy or subscribe to a software that lets you optimise your images. You may often need to resize, compress and fix image quality before uploading a picture. 

Whether you choose to work with a PNG or a JPG image, we’ve got some free online conversion tools you can use if you do not have an editing software. 

that could help you out.

• For converting a file from JPG to PNG and vice-versa: https://image.online-convert.com/convert/jpg-to-png
• For compressing images: https://compressjpeg.com/ 
• For resizing images: http://www.resize-photos.com/ 
• For optimising JPEGs: http://jpeg-optimizer.com/ 

Click here for more information on product and pack-shot photography by DW Images Photography