Start a conversation

Optimising Images for the Web

Large, high definition images can have huge file sizes. Put a few of these on your site and that snappy experience of navigating your site can end up sluggish,  affect the performance of your site as well as take up valuable space and cause all sorts of issues.

If you’ve been known to take a product photo and upload it directly to your store, this tutorial is for you. If you have no formal knowledge or process for saving images with the file size in mind, this tutorial is for you.

Image File Type Options

There are three main file types we’ll want to focus on for saving images optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image.

WORKING WITH JPGS

JPGs (also known as JPEGs) are the most popular file type for images on the web. JPGs are perfect for photographs or complex images containing lots of colours, shadows, gradients, or complex patterns. JPGs handle these type of images well because JPGs have a huge colour palette to work with.

JPGs can also be saved in high-quality, low-quality or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.

WORKING WITH PNGS

PNGs are another popular file format online. In Adobe Photoshop, you’ll have the option to save PNGs as PNG-8 or PNG-24.

  • PNG-8 has a very limited colour palette of 256 colours. While the image size is smaller, this won’t be a good option for complex images and photographs.
  • PNG-24 provides a much higher-quality image but comes at the cost of larger file size.

Most importantly, PNGs can handle transparency. This is one of the biggest differentiation points between PNGs and JPEGs.

WORKING WITH GIFS

GIFs were more popular many years ago, but are still an option for small image sizes where only a few colours are needed. Much like PNG-8, GIF files are restricted to only 256 colours. Because of this, GIFs should never be used for product photos.

Saving Images Properly

Large images take longer to load. When we say large, we’re referring to the file size rather than the dimensions of an image, i.e. the value in KB, MB, GB etc, it’s important that your images are small enough to ensure a speedy site.

There are three things you can do to properly optimize your images for your online store:

SAVE THE RIGHT DIMENSIONS

You must open the image in Photoshop and view it at 100%. This allows you to view the image at the exact size it will be displayed on a computer monitor when you save the image for the web.  Yes, you could use MS Paint, but let's leave that as a last resort.

SAVE IMAGES FOR WEB

It’s possible to reduce the file size without significantly reducing the quality of your images. Our favourite method of reducing file size without significantly reducing the quality of the image is to use Photoshop’s “Save for Web” function. Open your image in Photoshop and go to File > Export > Save for Web (Legacy)…. A window will appear which will allow you to choose your export quality. We find that quality of 60 works best because it drops the file size down to below a megabyte and there’s no noticeable difference in quality.

COMPRESS IMAGES FOR WEB

Image compression apps are the easiest way to reduce the file size of images. These types of tools remove hidden data in the image file like additional colour profiles and metadata (like geolocation of where the photograph was taken) that aren’t needed. These tools provide a quick and easy way to reduce files size without losing any image quality.

Most people may not be familiar with PhotoShop and find MS Paint lacks quality, however, MS Paint is ideal for resizing, but may cost quality.  There are some free image compression services you could try below. 

Image Compression Apps & Services

You can always use MS Paint to resize an image if you think it works for you or another MS editor tool on MS Windows.   When you save the image file, right-click the image to check its file size as well as its dimensions via Windows File Explorer. 

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Support

  2. Posted

Comments