网页设计中图片该怎么排版
图片优化在提高产品质量上也起到了举足轻重的作用,而图片的排版设计是很重要的,那么网页设计中图片该怎么排版呢?下面小编为大家解答一下,希望能帮到您!
1. 简约而不简单
Win8和iOS7的出现,将互联网行业中很多产品设计带回到原点,或许更是另一个新的起点。Win8的Metro UI、iOS7中图标的扁平化设计、一直崇尚简约的豆瓣网、还有顶着时代工匠称号的老罗所设计的锤子ROM,无一不体现着简约的风格。
言归正传,回到我们图片优化的主题上。在产品设计和UI设计阶段,除了内容图片,其他的图片都是起修饰的作用。也就是对于传递信息来说并非本质性的。所以最大的优化就是不要图片。在进入到研发阶段之前,就要确认设计,设计本身是否需要用到那么多的图片,还是说可以做到更简洁!
2. 样式代替图片
Chrome,FF等浏览器厂商为互联网的发展做了这么多贡献,为什么我们还要让那些不兼容CSS3的浏览器阻碍互联网的发展呢。因此,让我们直接使用CSS样式代替图片来实现修饰效果!例如:半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持,而对于那些低端浏览器,我们并不会完全抛弃他们,“渐进增强”则是一个很好的解决方案。至于什么是渐进增强,这里不再用过多篇幅去解释,如果感兴趣可以参考CSS“渐进增强”在web制作中常见应用举例。
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 Alpha透明。我在项目中常用的方法是AlphaImageLoader筛选器。
GIF基本上除了GIF动画外不要使用。
除了这些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。这就需要根据项目需求进行取舍了。
4. 常用的图片优化技巧
CSS Sprites,将同类型的'图标或按钮等背景图合到一张大图中,减少页面请求。
Icon Font,将图标做成字体文件。优点是图标支持多个尺寸,兼容所有浏览器,减少页面请求等。美中不足的是只支持纯色的icon。
SVG,对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
图片压缩工具,可以在图片上线前使用压缩工具进行压缩,获得更高的压缩比。我常用的压缩工具为Yahoo的。
5. 适用各种资源而不限于图片的优化
data url
Base64是网络上最常见的用于传输8Bit字节的编码方式之一,可用于在HTTP环境下传递较长的标示信息。将图片转化为base64编码格式,资源内嵌于CSS或HTML中,不必单独请求。
该方式的优点是:
1. 减少了HTTP请求
2. 避免了图片重新上传,还要清理缓存的问题
不足之处是:
1. IE6, IE7不支持该类型编码的图片作为背景图
2. 增加了CSS文件的尺寸
3. 维护成本较高
按照HTTP协议设置合理的缓存
具体的缓存策略(如永久缓存 + 重命名)、部署策略(如反向代理、CDN等)这里就不展开了。
-
人教版一年级上册数学《第几》教案设计
教学目标1.通过情境体验与参与,使学生感知自然数序数的含义,知道自然数除了可用来表示事物有多少外,还可以用来表示事物的次序。2.通过教学,培养学生遵守公共秩序,文明守纪的良好品德。3.让学生感受到生活中处处有数学,增强学习的乐趣和自信心。教学内容教科书第18页做...
-
广告设计中中国元素的应用
导语:随着时代的发展与对外开放程度的提高,中国元素在各方面的应用愈来愈广泛。特别是在广告设计领域,应用中国元素能够提高广告设计与宣传的效果。下面就由小编为大家介绍一下广告设计中中国元素的应用,希望对大家有所帮助!一、广告设计与中国元素概念分析1.广告设...
-
智慧个性签名设计
1、我要为了我的以后好好奋斗。2、遭遇挫败痛苦时,告诉自己:不过是归零了,不过是从头再来!3、不要给自己颓废的机会。4、如果放不下过去,就别奢望有美好的未来。5、真正的陪伴,经得起坎坷,经得起平淡。6、生命本没有高低贵贱之分,任何时候都不要随意看轻自己7、机会对...
-
毕业设计致谢词三篇
引导语:致谢词想必很多人都写过,那么有关毕业设计致谢词要怎么写呢?毕业设计致谢词范文哪里有?接下来是小编为你带来收集整理的文章,欢迎阅读!毕业设计致谢词一感谢我的导师XXX教授,他们严谨细致、一丝不苟的作风一直是我工作、学习中的榜样;他们循循善诱的教导和不拘...