Background

Pixelz Blog

Get insight into product photography, post-production, and eCommerce product image best practices.

Result

The search did not return any hits. Please try again!

Image File Types and Compression Techniques


Main Image
Thanks to advances in digital photography equipment and the accessibility of services like Pixelz,you no longer need to be a professional photographer or Photoshop expert to create great-looking product images. The flip-side of this, we find, is that many people struggle with some of the unavoidably technical issues associated with working with images. If you’re concerned about how to adapt your images for different purposes whilst minimising loss of image quality, this article is for you.

By exploring the subjects of file type choice and image compression, this article will arm you with the knowledge you need to produce consistent images with the optimum resolution for their intended purpose. We will break this down into two areas, shooting with the camera and post-production.

Your Camera Settings

The simple rule of thumb here is to use the best quality available. The reason for this is that even if you are only producing something for a web page, you may wish to use it for a different purpose such as a catalogue at a later date. There are three main areas to understand when setting your file type in camera.

 Three main areas in setting your file type in camera

Post Production

When working on your images on the computer there are a few things you need to remember. The images coming from our camera will be a jpg file , which is known as a ‘lossy’ format. This means that every time you save a jpg, the file is compressed a little and loses some quality. For this reason always preserve you original jpg file from the camera and then work on copies of them rather than the originals.

If using an editing service such as Pixelz, it’s best to upload these original files to limit the number of times the file will be saved. Likewise, when working on your images yourself in your editing software, try complete all the corrections before saving to maintain the quality of the image.

The next thing we need to decide is whether our final image is for print or for a web page.

Saving for Web

Reducing ‘pixel density’:

Because our computer screens are lower resolution that a normal printed photograph, it is best to reduce the image size and what is known as ‘pixel density’. Typically a computer monitor will only show 72 pixels per inch but our cameras can produce 300 pixels in every inch. This means we have far too much information and we can easily get rid of some of it without affecting the way the image looks on a computer screen.

Reducing ‘pixel dimensions’:

A typical image from a camera may be up to 5000 pixels wide but a typical web page is only 800-1200 pixels wide – so it also makes sense to re-size the image to reduce the file size and load speed.

To re-size for web use go to the ‘Image Size’ menu in your post-production software.

To re-size for web use go to the ‘Image Size’ menu in your post-production software.

First, under the setting ‘Resolution’ change the number to 72.

Next we’re going to resize the image. For this you need to know what size the image should be on the web page. This will vary depending on your website’s requirements and the type of products you’re selling. Sites such as Amazon and eBay have certain minimum requirements which can be found here. We suggest that as an absolute minimum, your images should be 500 pixels on the longest side. For optimum display on all types of screen and devices, we suggest opting for images between 1600 and 2500 pixels.

The important thing to remember is that when you change the length of the picture, the width must also change (and vice versa) to avoid image distortion. Most photo software has a little lock icon on the resize dialogue, clicking this will automatically keep the image proportions.

An image optimised for the web is often called a ‘low res’ image.

Resizing for the Web

Resizing for the Web

With the image resized, we are now going to save it. Here we have three choice of file type that we can use.

Image file types

Some file save types available in Photoshop or Photoshop Elements

Some file save types available in Photoshop or Photoshop Elements

An example of file sizes from the same image

An example of file sizes from the same image

Sometimes if we have an image that is very complicated and has lots of information (such as a very busy background), it may not be possible to reduce the file size to one that is optimal for web use. In this case (and in the case of almost all product images for e-commerce), we would suggest removing the background entirely.

Now considered standard in e-commerce, a product image with a pure white background not only has a much smaller file size, it also allows the customer to focus their attention entirely on the product itself.

Saving for Print

When we save for print, we need a larger image size and resolution. The best file format for printing is Jpeg and the optimal resolution is 300ppi or ‘pixels per inch’.

The procedure is the similar to saving for web. First change the resolution to 300, but when changing the size, select inches and change the image size to meet your needs. For example if you want to print an 8×10 inch print, set the longest side of the image to 10 inches. The editing software needs to know the dimensions of the eventual image in order to ensure that each inch contains the required 300 pixels.

When we save the image, we need to save in a higher quality, so from the Jpeg quality selection, use a figure of 10 or 11.

Images with resolutions of 200-300 pixels per inch with large dimensions, typically 2000 pixels or more along the longest side are often referred to as ‘high res’ images.

Sizing an image for print usage

Sizing an image for print usage