How To Optimise Images For My Websites

This is basically a simple step by step guide on how I optimise the images or icons I use on my websites.

1. Perfect Resolution

While using the images on the web applications I make sure they are not oversized for the purpose that they server. For example if I need a coffee mug icon of size 16x16 pixels I make sure the icon used are of the same size.

Image Resizer : https://imageresizer.com

2. Use Image Compressor

Using image compressors such as tinypng helps greatly reducing image sizes without affecting much on the quality of the image.

Image Compressor : https://tinypng.com

Source : tinypng.com

3. Convert Images To .webp or to .svg

I always prefer to use WEBP or SVG over PNGs and JPEGs as they are smaller in size and gives better quality

Image Converter : https://convertio.co/png-webp

4. Use Image Sprites for Fewer Icons

I prefer to use sprites for smaller icons rather than including whole font and icons library into the website. It always makes sense to me to include a ~6.4kb .webp file to include as icons rather than adding ~6.3kb icons library and ~77kb fonts sheet.

Sprite Icons

Font Awesome Library

5. Compress Images Again

If you have converted images to WEBPs or SVGs you can again compress them to reduce size.

1. Image Compressor WEBP : https://tinypng.com
2. Image Compressor SVG : https://vecta.io/nano

To sum it up all :

Web optimise images

Hope this helps!!

Cheers!!

Sangwin Gawande

About me : https://sangw.in