Always Optimise Images For Web

They say a picture is worth a thousand words, which is one of the reasons images are so important.

It goes without saying that your images need to be high resolution and crisp. But, this comes at a price. Large, high definition images can have huge file sizes. Putting a few of these on your site will drop your performance for your website majorly. It’s recommended that you keep the size of your website below 5MB in order to keep it speedy.

This will cause visitors to leave, and Google will notice which can affect your SEO. It’s critical to find a good balance between image quality and image file size when you save an image for your site, especially in E-commerce.

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

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 they have a huge colour pallet 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.

JPG is the most popular file format online and is commonly used for product images, photographs, and homepage banners.

PNGs

PNGs are another popular file format online. In Adobe Photoshop, you’ll 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 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 a larger file size.

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

PNG is mostly used for logos because they are high quality, and can handle transparency. This works well for logos because logos 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.

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.

GIFs can be used for logos but because of their limited colours, aren’t that popular for most use cases.

Saving Images

As can be expected, large images take longer to load, referring to file size. 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 your website:

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 web.

Save Images for Web

It’s possible to reduce the file size without significantly reducing the quality of your images. The best 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. I find that a 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 that aren’t needed.

These tools provide a quick and easy way to reduce file sizes without losing any image quality:

• TinyJPY
• TinyPNG
• io
• Kraken
• ImageOptimizer
• ImageOptim
• Crush Pics
• Minifier