网站运营中怎样选择图片及优化图片
发布时间：2022-03-26 13:53:49 所属栏目：策划 来源：互联网
导读：现在的互联网提倡用户体验，只有吸引客户的产品才能卖出好的价格，网站也是一样，如何设计出一流的网站是只管重要的。而体现网站效果的就是图片，所以要用图片，就要选择及优化图片。如下就是关于图片的选择及优化。 第一：选择最合适的图片 我们常见的图片
|
现在的互联网提倡用户体验，只有吸引客户的产品才能卖出好的价格，网站也是一样，如何设计出一流的网站是只管重要的。而体现网站效果的就是图片，所以要用图片，就要选择及优化图片。如下就是关于图片的选择及优化。 第一：选择最合适的图片 我们常见的图片格式有JPEG、GIF、PNG。 基本上，内容图片多为照片之类或图片构成较复杂的情况，适用于JPEG。如网站中的Banner图、轮播图、大尺寸背景图等。 修饰图片通常更适合用无损压缩的PNG。而我们主要用到的PNG图片又分为PNG-8和PNG-24两种，PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。如果对图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适。有时候会遇到在IE6下应用PNG-24图片的情况，关于IE6下PNG Alpha透明的解决方案可以参考IE6中PNG Alpha透明。我在项目中常用的方法是AlphaImageLoader筛选器。 第二：GIF基本上除了GIF动画外不要使用。 除了这些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过你省了流量或者相同流量下改善了图片质量，提升了用户体验。这就需要根据项目需求进行取舍了。 第三：常用的图片优化技巧 CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。 Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。 SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！ 图片压缩工具，可以在图片上线前使用压缩工具进行压缩，获得更高的压缩比。我常用的压缩工具为Yahoo的Smush.it。 以上就是关于网站制作过程需要用到的图片选择及优化，希望大家在策划和做网站时一定要慎重，图片效果固然可取，但是会影响我们浏览的速度，所以要提前做优化才可以，将图片控制在50k以内。 （编辑：沧州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
