笔记前端需要了解的优化图像的方法

最新推荐文章于 2025-05-01 23:06:41 发布

原创最新推荐文章于 2025-05-01 23:06:41 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#svg

图像优化专栏收录该内容

1 篇文章

订阅专栏

本文探讨如何利用CSS3特性如半透明、边框、圆角、阴影、渐变等，以及SVG矢量图、WebP图片格式，优化网页性能。通过合理设置HTTP缓存，使用字体图标和CSSSprites，预加载资源，进一步提升用户体验。

                    
                    不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
按照HTTP协议设置合理的缓存。
使用字体图标webfont、CSS Sprites等。
用CSS或JavaScript实现预加载。
WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。