简体繁体 English

如何在不影响图像质量或尺寸的情况下优化“ html”网站的速度？

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

原文 2017-10-27 14:55:21 9 1 javascript/ html/ css/ performance/ optimization

I have a website consists of "5 html pages" using pure (HTML , CSS , JS) no server side programming languages , frameworks or DB . 我有一个网站，由“ 5个html页面”组成，使用纯净的（HTML，CSS，JS）没有服务器端编程语言，框架或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 : //developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.zhtml.aba.ae

https://gtmetrix.com/reports/www.zhtml.aba.ae/N9C8Tp0m 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 . 我知道如何缩小（css，js）而不是（图像和缓存），我想知道是否存在一种减小图像大小而不影响[quality-Dimensions]的方法，以及如何启用缓存。 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. 另外，如果除了[图片-缓存-最小化CSS和JS]之外，还有更多优化网站速度的技巧，请告诉我这是什么以及如何实现。

My website is responsive so i'm using images with large dimensions 我的网站反应灵敏，所以我使用的是大尺寸图片

1 个解决方案

One tool I have found extremely helpful in decreasing the file size of images is TinyPNG . 我发现一种对减小图像文件大小非常有用的工具是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可以将图像的文件大小最多减少80％，而无需更改图像的尺寸或降低质量（明显）。

TinyPNG simply replaces similar colors near each other with the same color, which takes less storage. TinyPNG只是简单地用相同的颜色替换彼此之间相似的颜色，从而节省了存储空间。