Section 1: Image Types

In this images optimisation guide we will cover the main 3 image types commonly used on websites.
We’ll go over what these image types are best at dealing with.

The main 3 types of image are:

• JPG
• PNG
• GIF

JPG

A JPG, or JPEG, is best used for Photographs, this includes product images, or just background photographs. If you were too upload a image that is designed to be a logo or a PNG as a JPEG it will ultimately increase the File Size of the image.

JPG’s also don’t support transparency, meaning that if anything is transparent when creating the image it will be rendered as just a white background.

The above image is perfect for a JPG

PNG

A PNG image is best used for a Logo / Icon, or anything that contains text, for example if I wanted to use a JPEG for something with text, not only would the file size increase, but the text would also be blurred, this is due to the fact that JPEGs render differently compared to PNGs. With a PNG you can get the smallest file size with the highest quality for anything from website logos to social media icons.

You’ll also find that using a PNG for icons / logos is also beneficial due to a PNG support complete transparency if needed, meaning that if you were to change the colour of the background the image lays on, the PNG would not be affected. Making it perfect to overlay things also.

GIF

We won’t go over GIFs as much as the others, but the only time you should use a gif is for animation, and nothing else. GIF’s do not support alpha transparency, they contain a higher file size when used for Photographs then a JPEG, and are not very useful for Logos due to the lack of transparency support. Even for website animation, it would still be better to use normal images and JavaScript which would have less of a load time effect on the site.

In brief.

• JPG = Photograph / Banners
• PNG = Icons / Logos / Transparent Images
• GIF = Animations

Section 2: Exporting Images

Exporting an image is the term we use for saving a image in a certain way with intention to upload onto your website. The best possible software for the job on exporting images for intention to upload is the program from Adobe, Photoshop,

With Photoshop, we can cut down the file size of an image in order to reduce any sort of additional load on the website. To do this we use the functionality “Save for Web”, this will reduce unnecessary additions to an image and compress it as much as possible without losing quality. The below will give you the instructions on what to do to find this functionality.

Follow these steps in order to get the lowest file size using Photoshop.

Open the original image within Photoshop.

Resize the image using Image -> Resize to the proper dimensions (Make sure this is less than the base image).

Once happy with resizing, press File -> “Save for Web”.

On the right hand side you’ll see a select box of image types, find the best image type for you before pressing save. (Remember our list above).

With a JPG you can also reduce the quality of the image in %. Reduce this to about 70% and a PNG you have 2 options, 8 bit PNG and 24 bit PNG. 8 bit PNGs will support only slightly transparency but will be significantly less in file size.  24bit PNGs support full complete transparency but you’ll find the file size will increase. If you have a logo with a background colour you probably won’t need alpha transparency, so a 8 bit PNG would be best.

Once you’re happy with the file type and size of the image you can press save and choose where you want to save your image.

Section 3: Third Party Software

Finally, once we have our image at hand, we’re going to be using a web service called Tiny PNG to reduce our file size even further

https://tinypng.com/

The above service cuts out unneeded sections of an image with no reduction in quality. An example of this is below.

The above left image (properly scaled) is around 60kb, which is quite large for a smallish JPG. All that is needed to reduce this is to simply click the button at the top and upload / or just drag the image to Tiny PNG, once done it will cut down the size of the image by around 20-70%, the right image has been reduced to around 40kb.

Section 4: Final Comments

With this short document, you will now be able to maximize your image loading performance without affecting quality. This will allow your website or software to not be hindered by image loading.

Some final bits

• Don’t upload images straight from your computer as in most cases this will severely hinder your load performance.
• You may be able to load your website relatively quickly, but we must also remember that some user will not have a fast internet connection, what loads for you in 5 seconds may take 30 for them.
• Make sure to resize, and select the correct image type before exporting your image.
• Make sure to use save for web
• Make sure to use third party software such as tiny PNG to reduce the file size even further.

The post Image Optimisation Guide appeared first on Mobius Media.