How to optimize my “html” website speed without affecting images quality or dimensions?

Question

I have a website consists of "5 html pages" using pure (HTML , CSS , JS) no server side programming languages , frameworks or DB .

These are the speed test of my website : https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.zhtml.aba.ae

https://gtmetrix.com/reports/www.zhtml.aba.ae/N9C8Tp0m

I know how to minify (css , js) but not (images and caching) , I was wondering if there is a way to reduce images size without affecting both [quality - dimensions] , and how to enable caching . also if there are more tips to optimize the website speed except (images - caching - minify css and js) , please tell me what is it and how to acheive it.

My website is responsive so i'm using images with large dimensions

Answer 1

One tool I have found extremely helpful in decreasing the file size of images is TinyPNG . TinyPNG can decrease the file size of your images by up to about 80% without changing the dimensions of the image or by reducing the quality (visibly).

TinyPNG simply replaces similar colors near each other with the same color, which takes less storage.