Choosing the best image size and format for your product photos can easily double the speed of your website!

When it comes to choosing between jpeg and png files for your website files and photographs, there are technical pros and cons to consider.

Product pages of an e-commerce website need clear but enticing pictures of the item, and you want it to load fast online, right?

Image Formats

.jpeg

In general, jpegs are widely used online because jpeg images load quickly as they have small file sizes compared to other formats. If you want to use large images on your website you will need to compress the jpeg file. The larger the image in ‘weight’, the slower it loads. Jpeg files use ‘lossy’ compression which means that some of the data is lost each time you save it. Usually you can’t tell, but if you go too far with compression it may end up looking like a poor quality image. Lossy compression is permanent so you can’t get the quality back in a file after it has been compressed.

.jpeg files:

• Have small file sizes

• Have faster web loading times

• Loose quality with compression

• Don’t support transparency

• Are great for websites with galleries and e-commerce catalogues, mastheads, banners and hero images

.png

They hold more data than a .jpeg and .png compression is ‘lossless’ which means that you can reduce the size of a png image while maintaining the quality. If you use png files online, you may notice longer loading times. png files are good for ‘cutout’ product photography online because the background of a .png file can be completely transparent. This means that you don’t get that dreaded ‘white box’ around your image if you have a coloured background on your website.

.png files:

• Support transparency

• Have larger file sizes

• Are slower to load

• Are clear, high-quality images

• Are used for logo files, illustrations, small images that need transparent backgrounds, and images with text as part of a graphic.
  

Other Popular Image File Formats

.svg

SVG or scalable vector graphics file type is built by mathematical formulas that establish points on a grid which means that you can decrease then increase the size as many times as you like without it becoming blurry.

.gif

GIF files use 256 RGB colours and like PNG files they are lossless so do not lose quality. The colour limit is not ideal for saving photographs but solid colour graphics like logos can work. As you probably know GIFs support animation but it’s not a video you are seeing, more of a flipbook.

.ai and .psd

Adobe Illustrator and Photoshop files don’t render on browsers. You will need to convert these files to something like a jpeg or png to use them on your website.

Free Online Image Compression and Optimisation Tools

You can buy or subscribe to a software that will enable you to resize, compress and optimise your photographs which is great if you are doing this all the time as you can set up presets for different sizes and uses but if you just need to change a few images as a one-off, these websites do the job and are quick and free.

• Tiny PNG: https://tinypng.com/

• Optimizilla: https://imagecompressor.com/

• JPEG Optimizer: http://jpeg-optimizer.com/

• Resize Photos: http://www.resize-photos.com/

F.A.Q’s

What is the best image format for my website?

jpegs are best for file size but if you need to have transparency in your image, use png format.

What type of photography would be best for my business website?

Here is a link to an article that shows several different examples of professional photography from one shoot. All of them have the power to elevate your business's online presence and website, but which one would you use?

What are the ideal file sizes for photos on my website?

Use images 500 KB or less to help your site load quickly. The smaller the better! (As a guideline, I try and get my photographs under 300KB)

What file type should I use for my logo?

It depends on your logo. I use a png as I like our logo to have transparency when it is over a coloured background like this.

Can I use both png and jpeg on the same page?

Yes! I’ve used both formats on this very page!

I hope this guide helps you decide on how to format your website photography. If you have purchased product or commercial photography from Pictorial Photography, you will have received your files labelled HIGHRES and another set labelled LOWRES.

HIGHRES photographs are high resolution and ‘print ready’, these are for use on brochures and physically printed materials.

LOWRES photographs have been optimised for use online. Ready for use on your website and social media channels, we usually aim to keep them under 350KB so they won’t slow your site down. Please let us know if your web designer has specific requirements and we will export them to your preferences.

Did you know that we have a free website photography consultation service?

We can advise you on what images you need to increase your online sales or bookings. Schedule a free, no-obligation call with Sarah below: