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

ygx_work

于 2020-05-23 16:53:37 发布

阅读量280

点赞数 1

CC 4.0 BY-SA版权

分类专栏：图像优化文章标签： svg

本文链接：https://blog.youkuaiyun.com/ygx_work/article/details/106302595

图像优化专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    不用图片，尽量用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等格式，非常适合用于网络等图片传输。