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

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。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司