网页设计中图片的排版方法.pdf

《网页设计中图片的排版方法.pdf》由会员分享，可在线阅读，更多相关《网页设计中图片的排版方法.pdf（2页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计中图片的排版方法 如何提高产品的质量则体现在项目开发的很多阶段，例如产品设计、UI 设计和前端开发等。而图片优化在提高产品质量上也起到了举足轻重的作用，下面店铺整理了网页设计中图片的排版方法，供大家参阅。1.简约而不简单 Win8 和 iOS7 的出现，将互联网行业中很多产品设计带回到原点，或许更是另一个新的起点。Win8 的 Metro UI、iOS7 中图标的扁平化设计、一直崇尚简约的豆瓣网、还有顶着时代工匠称号的老罗所设计的锤子ROM，无一不体现着简约的风格。言归正传，回到我们图片优化的主题上。在产品设计和 UI 设计阶段，除了内容图片，其他的图片都是起修饰的作用。也就是对于传递

2、信息来说并非本质性的。所以最大的优化就是不要图片。在进入到研发阶段之前，就要确认设计，设计本身是否需要用到那么多的图片，还是说可以做到更简洁!2.样式代替图片 Chrome，FF 等浏览器厂商为互联网的发展做了这么多贡献，为什么我们还要让那些不兼容CSS3的浏览器阻碍互联网的发展呢。因此，让我们直接使用 CSS 样式代替图片来实现修饰效果!例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的.浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。至于什么是渐进增强，这里不再用过多篇幅去解释，如果感兴趣可以参考 CSS“渐进增强”在 web 制

3、作中常见应用举例。3.选择最合适的图片 我们常见的图片格式有 JPEG、GIF、PNG。基本上，内容图片多为照片之类或图片构成较复杂的情况，适用于 JPEG。如网站中的 Banner 图、轮播图、大尺寸背景图等。修饰图片通常更适合用无损压缩的 PNG。而我们主要用到的 PNG图片又分为 PNG-8 和 PNG-24 两种，PNG-8 格式不支持半透明，也是IE6兼容的图片存储方式。如果对图片质量要求较高的半透明或全透明背景，保存成 PNG-24 更合适。有时候会遇到在 IE6 下应用 PNG-24 图片的情况，关于 IE6 下 PNG Alpha 透明的解决方案可以参考 IE6中 PNG Al

4、pha 透明。我在项目中常用的方法是 AlphaImageLoader筛选器。GIF 基本上除了 GIF 动画外不要使用。除了这些格式之外，Chrome、新版 Opera、Android 4+支持WebP 格式，IE 9+、IE mobile 10+支持 JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过你省了流量或者相同流量下改善了图片质量，提升了用户体验。这就需要根据项目需求进行取舍了。4.常用的图片优化技巧 CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的 icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持 SVG 了，所以可放心使用!图片压缩工具，可以在图片上线前使用压缩工具进行压缩，获得更高的压缩比。我常用的压缩工具为 Yahoo 的 Smush.it。5.适用各种资源而不限于图片的优化【网页设计中图片的排版方法】