Preparing Images for Website

The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimisations. One of the most popular tools ways is to simply compress them before uploading to zStudio. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.

The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.

Choose the Right File Format

Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:

• PNG – produces higher quality images, but also has a larger file size. It only uses lossless compression.
• JPEG – uses lossy and lossless optimisation. You can adjust the quality level for a good balance of quality and file size.
• GIF – only uses 256 colours. It’s the best choice for animated images. It only uses lossless compression.

There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG (or JPG) for images with lots of colour and PNG for simple images.

Compression Quality vs Size

Here is an example of what can happen you compress an image too much. The first is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.

So we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 70 KB, which is acceptable for a high-resolution photo. Typically simpler images like PNGs should be under 100 KB or less for best performance.

Image Optimisation Tools and Programs

There are a lot of tools and programs out there, both premium and free, that you can use to optimise your images. Some give you the tools to perform your optimisations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.

Multiple Image Resizer for Windows

This program will resize the whole directory of images to a reasonably sized file that can be set by you. You can set the desired image size (for example 640x480 pixels), and set the quality of the final image. Of course, the new images will not overwrite the old images.