从网页设计角度应该如何优化网站图片

2022-11-23 分类：网站建设

网站建设- 建站教程 - 建站经验 - 从网页设计角度应该如何优化网站图片

从网页设计角度，应该如何优化网站图片

1、去掉无意义的修饰。

除了内容图片，其他的图片的作用是修饰，也就是对于传达信息来说并非本质性的。大的优化就是压根不要图片！所以在优化之前要做的，首先是确认设计，设计本身是否需要用那么多图片？还是说可以更简洁？

2、不用图片。

切图是一件扯淡的事情，直接使用CSS替代图片来实现修饰效果吧！如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后，还可以做到alpha混合、正片叠底等各种效果。

3、使用矢量图替代位图。

对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

4、使用恰当的图片格式。

我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

除了这些格式之外，Chrome、新版Opera、Android 4 支持WebP格式，IE 9 、IE mobile 10 支持JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过你省了流量或者相同流量下改善了图片质量，提升了用户体验。你会如何取舍呢？

对了，别忘了使用优秀的图片编码器及合适的参数。好的图片编码器，尤其是有损图片格式的编码器（推荐Caesium），能通过算法或手动调整，获得更高的压缩比。

5、按照HTTP协议设置合理的缓存。

具体的缓存策略（如永久缓存重命名）、部署策略（如反向代理、CDN等）这里就不展开了。

当前标题：从网页设计角度应该如何优化网站图片
文章位置：https://www.cdcxhl.com/news/216000.html

成都网站建设公司_创新互联，为您提供ChatGPT、响应式网站、全网营销推广、用户体验、建站公司、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容