As a product photographer who primarily shoots pack-shot photography for the eCommerce market, I provide images to clients in a variety of formats, but the most commonly requested file formats are JPEG and PNG.
PNG files are great for product photography post-production when you want a transparent background in Photoshop, as well as pack-shot and product photography where you want to add a variety of digital backgrounds.
Working with a new client recently to photograph party packs for their eCommerce website, I thought it would be a great opportunity to demonstrate the versatility of a PNG file format. But what is the distinction between a JPEG and a PNG, and how do we use them in other situations?
There is always some debate about whether to use PNG or JPG. I’ve also frequently been asked, “What is a PNG file used for?” and “What is the meaning of PNG files?”
Today, let us thoroughly investigate these issues and resolve the PNG versus JPG debate.
JPEG
The JPG file format was created in 1992 by the Joint Photographics Export Group, which is where the file name comes from. Most of the time, JPG is written as JPEG, but they both mean the same thing functionally. In the early days of computers, file types were limited to three characters (hence JPG), but JPEG is now becoming more popular.
This image file format, pronounced “jay-peg,” was created to help reduce the file size of photographs, making them more suitable for sharing via email and use in web design. As a result, the majority of photos you find online are most likely in JPG format.
Some quality is lost when an image is converted from its original format, such as RAW, to JPG. The reason for this is that the compression is lossy, meaning that some unnecessary information is permanently deleted. However, a JPG allows you to create much smaller file sizes than a PNG.
When it is critical to have a small file size, an image file should be converted to a JPG and used. Aside from the initial JPG save, numerous tools are available to help you shrink the file even further. This is advantageous for web images because the smaller size increases the speed with which a website page loads. This is becoming less of an issue as modern broadband and internet connections become more widespread. On the other hand, those with slower internet connections or older, less powerful computers will appreciate your consideration.
PNG versus JPEG
PNG
PNG, which stands for Portable Network Graphics, is a lossless file format created as a more open alternative to the Graphics Interchange Format (GIF).
Regarding file size reduction, there is a significant difference between PNG and JPG. In contrast to JPEG, which uses DCT compression.
PNG employs LZW compression, also used by the GIF and TIFF formats. PNG’s two-stage LZW compression takes strings of bits contained in the image’s data and matches those longer sequences to accompanying shortcodes held in a dictionary (also known as a codebook) stored within the image file. As a result, the file is smaller while maintaining high quality.
Regarding the benefits and drawbacks of PNGs, it is important to remember that PNGs support semi-transparency and a full-color spectrum, whereas JPEGs do not.
The most significant advantage of PNG over JPEG is that the compression is lossless, meaning there is no loss in quality when it is opened and saved again. PNG is also good at handling detailed, high-contrast images.
PNG is often the default file format for screenshots because it can provide an almost perfect pixel-for-pixel representation of the screen rather than compressing groups of pixels together.
PNGs, on the other hand are unsuitable for printing, are not universally supported, and require more memory space.
reducing the size of a png file, a png file icon
Other Popular File Formats:
SVG
SVG, which stands for scalable vector graphics, is a vector image format best suited for two-dimensional graphics and animations. Vector graphics shapes (straight line paths and curves), images, and text are all supported in SVG files.
By using tag, SVG files can be directly written into HTML codes. They are highly scalable and zoomable, with no loss of quality when zoomed or resized. Images in the SVG format can be searched, indexed, scripted, compressed, edited, and printed. However, you must ensure that your SVG file does not contain too many paths, as this can increase the time it takes for your website to load.
GIF
The debate over whether it should be pronounced “gifs” or “jifs” continues. Conversely, GIFs use 256 RGB colors and are lossless, similar to PNG files. They also support animations and are frequently used for solid color graphics such as logos.
It is more difficult to save photographs because GIFs have a color limit. However, they are extremely simple to create and can be divided into three major categories: animation-based gifs, video-based gifs, and stickers. Most gifs are less than 500 pixels wide and are typically used on social media.
DOES IT REALLY MAKE A DIFFERENCE?
Regarding JPG vs PNG and comparing the two files side by side, the truth is that there isn’t much of a difference in the photos.
So, if PNG images don’t look all that different from JPGs, why don’t we always use the JPG format to make our lives easier?
Unfortunately, it’s not that simple because of image compression. Regarding JPEG or PNG quality, there are a few things to consider.
You want the highest quality image format, but you also want a responsive website, so you must consider the difference between JPEG and PNG, particularly the difference in image compression.
Consider this:
Image compression means reducing the image size without sacrificing any quality for the sake of size. Higher compression generally means smaller file size, which usually means lower overall image quality.
So, if you want the best compression, you must strike the right balance between file quality and file size.
Because the file has not been compressed, when you look at the saved images on your computer, you will see the best version of it. However, if that same image is on your website, you will need to download it in order to see it.
So, logically, the larger the image, the longer the loading time on your website.
But, as I mentioned earlier, one of the most common applications for PNG files is in product photography, particularly eCommerce product photography. Because of its ability to use transparency and/or opacity, as opposed to JPG, which retains a white/blank background by default.
Follow the link for more information on creating a transparent background in Photoshop.
In Photoshop, how do you create a transparent background?
In Adobe Photoshop, you can create a transparent background by removing or hiding the existing background layer and saving the image in a format that supports transparency, such as PNG. Here’s a step-by-step guide to creating a transparent background:
- Open your image in Photoshop.
- If your image has a locked background layer, you’ll need to unlock it first. In the Layers panel (usually located on the right side of the screen), find the “Background” layer. Double-click on it, and a “New Layer” dialog box will appear. Click “OK” to unlock the layer, and it will be renamed as “Layer 0.”
- Now you’ll need to select the area you want to make transparent. There are multiple selection tools available, such as the Magic Wand Tool, Quick Selection Tool, or the Lasso Tool. Choose the most appropriate tool for your image. For example, if you’re using the Magic Wand Tool, click on the background area you want to remove. You can adjust the Tolerance value in the Options bar at the top of the screen to refine your selection. A lower value will select colors closer to the pixel you clicked on, while a higher value will select a broader range of colors.
- Once you have the background area selected, press the “Delete” key on your keyboard, or go to “Edit” in the top menu and choose “Clear.” This will remove the selected area, leaving a checkerboard pattern that represents transparency.
- If necessary, clean up any remaining background areas using the Eraser Tool or additional selection and deletion.
- To save your image with a transparent background, go to “File” > “Save As” or “File” > “Export” > “Save for Web (Legacy).” In the “Save As” dialog box, choose “PNG” as the file format, and make sure “Transparency” is checked. Click “Save,” and your image will be saved with a transparent background.
Remember that JPEG files do not support transparency, so you must save your image in a format like PNG to maintain the transparent background.
Online Image Optimization Tools for Free
To convert a JPG to a PNG or vice versa, go to:
| Link | What Does It Do |
|---|---|
| Online-Convert | Converts JPG images to PNG format |
| Compress JPEG | Compresses JPEG images to reduce file size |
| Resize Photos | Resizes images while maintaining aspect ratio |
| JPEG Optimizer | Optimizes JPEG images for better performance |
When working with websites, you may need to purchase or subscribe to software to optimize your images. Before uploading a picture, you may need to resize, compress, and improve the image quality.
If you don’t have editing software and want to work with a PNG or JPG image, we have some free online conversion tools you can use.
That could be useful to you.
Click here for more information on DW Images Photography’s product and pack-shot photography.
