12bet,的读书笔记

图像

优化的重要性

客户端

12bet,网速的限制导致较大的文件需要更长的等待时间,降低用户体验

服务端

12bet,高流量的站点通常都有很多用户同时访问,每个用户耗费的带宽越多,总的带宽需求就越大


图像格式基础

12bet,常用的图像格式有三种,GIF、JPEG和PNG。这三种格式都支持压缩。12博体育,选择合适的图像文件格式也就是在透明支持、色深和压缩比率三者之间取舍

图像格式

每个图片文件格式都有自己的色彩模型、表示形式、压缩方案以及透明度效果支持等特性。需要了解不同图像的优劣之处,12博体育,根据实际需求做出合理的选择。

无损压缩和有损压缩

无损压缩将保留原图像的所有细节,有损压缩会对细节有所取舍,以换取更小的文件。二者都有自己适用的地方

色深

色深是指某种给图像格式包含的颜色的多少。用位计量,更高的色申表示能包含更多的颜色种类


GIF

适用范围

GIF使用一中叫做LZW的无损压缩格式,非常适合带有大块相同颜色区域的图像。单色插图、文本、色块等文件非常适合存为此格式。

色深和压缩

GIF最多只能支持256种颜色,如果超出范围,颜色信息将会丢失。通过颜色索引来实现无损压缩,若颜色超过256种,会变成有损压缩

透明度

GIF支持1位的透明度,即某个像素要么完全透明,要么完全不透明,没有任何中间值

其他

GIF支持基于帧的简单动画以及隔行加载技术,但这两者会增加文件大小


JPEG

适用范围

适合色彩、细节丰富的图像,比如照片

色深和压缩

JPEG有24位色深,支持有损压缩且可以设置压缩等级。压缩比很大的JPEG图像将高度失真,并引发一种叫非自然痕迹的小块像素缺陷问题

透明度

不支持任何形式的透明度

其他

最新的“渐进JPEG”版本能够和GIF一样实现隔行加载,且已被大多数浏览器所支持


PNG

适用范围

由于其两种色深模式,理论上可以用于任何图像。但实际上最好还是用GIF和JPEG,前者用于带有大块相同颜色区域的图像,后者用于照片等色彩、细节丰富的图像。但PNG本身的256级透明度使得在无法预知图像在Web页面中所处区域的背景颜色时,PNG将会非常实用

色深和压缩

提供了两种色深模式,24位和8位。24位色深可以保证完全无损的压缩,8位色深的PNG使用类似GIF的颜色索引,同样设置项,很多时候PNG压缩的文件要比GIF更小

透明度

支持256级透明度

其他

老版Windows上的IE浏览器(IE6)无法正确呈现PNG的透明度设置


优化技巧

最好的方式是从较低品质(即较高压缩比)的图像开始,逐步提高品质,直到对图像质量满意为止

GIF优化

从最低的颜色级别开始(8种),逐步提高颜色数目,直至可以接受,如果256种颜色还是不能满意,那么就需要考虑用JPEG代替GIF了

还有一些设定能偶影响到GIF格式文件的大小,例如抖动技术(在一块相同颜色区域添加另一种像素点, 这个技术可以用于模拟出一些本部在文件颜色索引中的颜色)

JPEG

优化JPEG相对简单,将原始图像保存为JPEG时,可以从较低的图像品质等级开始,逐步增加,直至可以接受

PNG

优化8位PNG图像的步骤与优化GIF完全一致。24位PNG图像的优化无需关注,因为其压缩防止固化在文件格式中,无法更改


图像替换技术

很多时候需要隐去原本文字,取而代之是一副图像。

图像替换的目的

通过CSS将元素中的文本隐藏,然后运用背景显示图像

图像替换的责任

没有任何提示或帮助,计算机无法认出或读取图像中包含的文字。如果使用display: none,Google能够读取到隐藏的文本,但有些屏幕阅读器不能。这导致视觉不便用户不能够获取图像传递的信息。

Leahy和Langridge的方案

如下HTML结构:

<h1 id="header">这是一个标题</h1>

通过添加CSS且不改变HTML文档结构的方式来替换,CSS如下:

#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(http://www.liuwanlin.info/files/read_subdomain/zengarden/back.gif) no-repeat;
    height: 0px !important;
    height /**/:25px;
}

这种方式的原理是,由于background会在padding block中进行显示,所以先将height设为0以隐藏content block,padding设为背景图片的高度,这样background中定义的图片就能在padding中正常显示

这种方式并没有解决浏览器禁用图像后空白页面的可访问性问题,同时需要hack

Rundle的方案

使用负数的text-indent属性方法,将文本推到屏幕的左边缘外,CSS如下:

#header {
    text-indent: -5000px;
    background: url(http://www.liuwanlin.info/files/read_subdomain/zengarden/back.gif) no-repeat;
    height: 25px;
}

这种方式并没有解决浏览器禁用图像后空白页面的可访问性问题

Levin的方案

通过将文本放在span外,并设置span覆盖住文本,HTML如下:

<h1 id="header">这是一个标题<span></span></h1>

CSS代码如下:

#header {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: 300px;
    overflow: hidden;
}
#header span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(http://www.liuwanlin.info/files/read_subdomain/zengarden/back.gif) no-repeat;
}

这样就算禁用了图像,空白部分依旧可访问。但这种情况下无法使用透明图像,同时HTML和CSS代码都很冗长


图像使用技巧

图像的大小和尺寸

在保证足够质量的前提下,图像文件的大小应该尽可能地降低

减少图像数量

图像数量的增加,会导致浏览器的请求增加,所以在使用图像时,尽量做到以下几点:

  • 尽可能用文本样式替代图像
  • 只把刘图像中为实现预期效果所必须的部分
  • 使用细条图像填充背景
  • 尽可能地重复使用图像
  • 合理的选用图像和颜色
  • 若能不适用图像,那么就不要使用
  • 将图像合并,使用sprite技术

图像细节

理解细节

设计师的主要职责之一就是仔细观察生活中的细节,以便在作品中充分的重现环境。这就意味着必须全面理解细节,而不仅仅停留在能够看到的水平上

表现真实感

创建真实感不一定必须用照片

  • 要特别注意图形边缘的效果。事实上,边缘来自于线条、光影、正负空间之间的交汇融合,而正是这种融合才让我们体会到线条的感觉
  • 注意形状,大多数物体都是由若干种形状组合而来
  • 图像的材质能够为物体带来真实感
  • 深度可以表现出额外维度的感觉,即使在二维环境中也是如此
  • 重力模拟同样重要

在二维设计描述三维物体时,参考如下建议:

  • 封闭区域是由颜色和材质组成
  • 物体的体积是由长宽高组成
  • 体积感是这些视觉元素组合的结果,由此营造出了真实感

处理层次

层次表示环境的分层状态

  • 层次之间的线条、空间和大小都要有区别
  • 层与层之间仍然是一个整体,以某种方式保持着联系
  • 层与层之间的过度要自然
  • 作品中总是要包含焦点或终点
  • 作品中绝对不能缺少重力感

其他

在处理环境中非真实存在的元素时,应根据环境对其进行模拟,保持风格高度统一