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
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.
5. Compress Images Again
If you have converted images to WEBPs or SVGs you can again compress them to reduce size.
- Image Compressor WEBP : https://tinypng.com
- Image Compressor SVG : https://vecta.io/nano
To sum it up all :
Hope this helps!!
Cheers!!
Sangwin Gawande
About me : https://sangw.in