Marketing
      Back to home
      1. Help Center
      2. Projects, Process & Support
      3. Marketing

      Optimising Images

      Best practice guide and steps for optimising images.

      Our 5 key rules for optimising images for web

      1. JPGs are generally best for photography
      2. PNGs are usually best for illustrations, diagrams (and essential for transparency)
      3. Save images at the dimensions they are actually going to be used (a full width image on a retina display is 2880px so you'll probably never need images wider than that!)
      4. Reduce file size as much as possible without losing too much visible quality, and ensure it is no more than 72 dpi
        (for JPG you can reduce on a sliding scale, PNG can be switched between 8bit and 24bit, and you can also use https://tinypng.com/ to reduce further)
      5. Give image files names that are descriptive and relate to the content, avoiding spaces and special characters

      Our image size standards

      Size Matters! Saving Images Properly

      As can be expected, large images take longer to load. When I say large, I’m referring to file size rather than the dimensions of an image, i.e. the value in KB, MB, GB etc. Seeing as 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load, it’s important that your images are small enough to ensure a speedy site.

      There are three things you can do to properly optimise your images for use online:

      1. SAVE THE RIGHT DIMENSIONS
        You must view it at a 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 web, and to be able to asses the image quality.
      2. SAVE IMAGES FOR WEB
        It’s possible to reduce the file size without significantly reducing the quality of your images. My favorite method of reducing file size without significantly reducing the quality of the image is to use 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. For JPGs I find that a quality of 60 works best because it drops the file size down significantly with no noticeable difference in quality.
      3. COMPRESS IMAGES FOR WEB
        Image compression apps are the easiest way to further reduce file size of images. These 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:

      Image File Type Options

      There are three main file types for saving images 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.

      1. 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 pallet to work with.

        JPGs can also be saved in 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.

        JPEGs are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images.
      2. PNGs
        PNGs are another popular file format online. In Adobe Photoshop, you have the option to save PNG’s as PNG-8 or PNG-24.

        PNG-8 has a very limited colour pallet of 256 colours. While the image size is smaller, this wont be a good option for complex images and photographs.

        PNG-24 provides a much higher quality image but comes at the cost of a larger file size.

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

        PNGs are many times used for logos because they are high quality, and can handle transparency. This works well for logos because logo’s nearly always require transparency, you likely want it to be high quality, and because logos are a small part of your site overall so the file size is still small.
      3. 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 shouldn't be used for product photos.