SSJX.CO.UK
Browser Games | Cybiko | Amiga | Applications | Windows Games | Python | Guides | Site Map

Improving Your Website - Images

This guide will give you tips and ideas on how to improve your website by choosing the best format for your images. Applying these guidelines to this website resulted in:

This reduction means less space used on the webserver and a faster site for the users.

For more general web site tips, click here.

Choosing the correct format

A quick overview of the the main image formats used on the web:

GIF vs PNG vs WEBP

The image below is 320x240 and has 12 colours, as an uncompressed bitmap it is 1201KB in size. This kind of image is an average screenshot for this site.

PNG screenshot

The following are the sizes when resaved in the different formats:

The WEBP image is the smallest image,the only downside is the lack of browser support. What this means is that your site could have 3 times as many PNG/WEBP images in the space that the GIF's take up, the download for a single image would also be around 3 times faster!

A JPEG is not the best choice for the above type of image due to its lossy nature. For purposes of comparison though, saving as a JPEG at 80% quality resulted in a 47KB file.

Resizing your images

After deciding on the correct format to use, the next important task is to resize your image. Putting a large image on your website and letting the browser resize it means you are transferring a large image when a smaller one would be better.

If you have a gallery on your website, display smaller thumbnails which links to the larger image. You could also provide download options:

PNG screenshot (3.57KB)
PNG
5.45KB
WEBP
5.48KB

Note that in the above instance, the PNG larger image has smaller size than the WEBP...

17/02/2019

Play-Asia.com - Buy Games & Codes for PS4, PS3, Xbox 360, Xbox One, Wii U and PC / Mac.
Support this site : Visit Play-Asia for games and accessories for new and classic games consoles!