Images are a huge part of websites. It’s almost impossible to find a website that doesn’t use at least one image on the home page, but which file format should you be using? JPG (JPEG) and PNG formats both have a specific purpose and should both be used, so let’s break it down as simple as possible so you will be confident in uploading your next image to your site.

What is a JPG (JPEG)?

JPG (JPEG) is an abbreviation for Joint Photographic Experts Group. In the expanded name, the keyword to take from it is “Photograph”. This means this format is best used for photographs of people, landscapes, and other scenic images, in other terms “realistic”. Essentially if the image originally came from any type of camera then the image should be saved as JPG.

What is a PNG?

PNG is an abbreviation for Portable Network Graphics. The keyword to take from this is “Graphics”. This means that the PNG format should be used if the image has no photographic properties and would be considered computer generated graphics like illustrations, logos, charts or graphs.

Why can I not just use all JPG or all PNG?

The ending file size of a JPG or PNG will be different which is essential to know for websites, as a “smaller” site loads faster which is proven to reduce bounce rates. Every image has to be downloaded by a site visitor so if all of the images are smaller then the total time to download them all takes less. Less time downloading means more time actually viewing your site. If you take a look at the example below, the “Cone Cat” images are the same resolution at 500px by 500px, but one is saved as a JPG and the other is a PNG. The JPG (top) file size is roughly 224 KB while the PNG (bottom) version is about double in size at around 436 KB. You would want to use the JPG for this image. (The images may be smaller, web optimized, .WEBP files if attempting to save/download from this page.)

Saving as JPG and PNG is only the first step!

Choosing the right file type is only the first step as 1MB and larger JPG and PNG files are still too big! All website images need to be compressed. Compression will reduce the file size of an image, but using the wrong file type for your image and then compressing it can make it look pixelated or grainy, making your website look old and outdated.

What is the difference?

The difference between JPG’s and PNG’s compression is the algorithm used to create the smaller file. JPG and PNG both have different approaches to compressing an image. JPG’s method can be described as merging pixels next to each other. If a JPG becomes too compressed then it will have a blocky or blurry look. In a very simplified explanation, PNG compression works in a way of shortening the coordinates of colors. Each PNG pixel is saved as a location (coordinate) and a color value, which is why if you were to compress a PNG too far it will look grainy or dotty.

When should you use a JPG?

You should use a JPG when you want to feature photographs of people, landscapes, and other scenic images. This way when you compress your life-like images, that have many different colors, your images do not lose color, look flat or grainy. JPG keeps colors crisp.

When should you use a PNG?

You should use a PNG when you want to feature graphics like illustrations, logos, charts or graphs. When compressing a PNG, it works best with images with low color counts, text, and straight or curved lines. PNG keeps lines solid.

When should you compress the image?

Don’t compress just yet… size matters.

Before compressing the image take a look at the resolution of the image. Compressing a standard 12 MegaPixel (8″x21″ – 3:2) photo from a camera will only get you so far before losing too much quality and not shrinking in size as far as it could. A standard 12MP photo has a resolution of 4247 x 2826 which has a lot of information to store when saved as a JPG or PNG. Keep in mind even though 4K TVs (3840 x 2160) are popular, the mass majority of all phones and computers are still displaying websites at 1080p (1920×1080) or less.

Resize your images to sizes that make sense.

Most images should be downsized to the same resolution that the site user will view them at. Larger is better but not too large. Even though 1080p is still the standard you should still consider users with 1440p and 4K screens. At Lead Nerds, we usually follow these size rules for different image use cases:

• Site Logo: 500 x 500 (For a wide or vertical image the longest length stays 500. Downsize in the page editor to fit.)
• Hero and Section backgrounds: 2560 x 1440 (wide) / 1440 x 2560 (vertical)
• General images: 700 x 700 (For a wide or vertical image the longest length stays 700. Downsize in the page editor to fit.)
• General smaller images: 300 x 300 (For a wide or vertical image the longest length stays 300. Downsize in the page editor to fit.)
• Icons: 200 x 200 (Downsize in the page editor to fit.)

How to resize and compress images.

The best option is to use Adobe Photoshop for all image manipulations, as once done editing, Photoshop has a built-in exporter that can compress images. This may not be ideal for everyone if you only need to resize and compress images as Photoshop would cost a minimum of $9.99 per month with the Adobe Photography plan (20GB).

Free methods are available using online tools. The best tool suit I have recently found is at RedKetchup.io. Under “Image Tools” you can use “Image Resizer” to both resize and compress your images. You can simply load in your image, make simple edits like cropping, rotating, or mirroring, resize as needed, then under the “Save Image” section, you can select the final quality or size before downloading your newly compressed image.

If you have many images you want to edit, you can use the “Bulk Image Resizer” tool instead. The bulk editor does not offer in-depth editing per image but you can resize them by the longest side and compress them at the same time.

Best of all your images are not transferred to RedKetchup servers, nothing is saved server-side. Most other free online tools store your images on their servers for a minimum of an hour before deletion. Even though your images may be destined for your website, there is no need to give access to others.