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如下：

https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(https://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如下：

https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/header {
    text-indent: -5000px;
    background: url(https://www.liuwanlin.info/files/read_subdomain/zengarden/back.gif) no-repeat;
    height: 25px;
}

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

Levin的方案

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

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

CSS代码如下：

https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/header {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: 300px;
    overflow: hidden;
}
https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/header span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(https://www.liuwanlin.info/files/read_subdomain/zengarden/back.gif) no-repeat;
}

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

图像使用技巧

图像的大小和尺寸

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

减少图像数量

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

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

图像细节

理解细节

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

表现真实感

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

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

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

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

处理层次

层次表示环境的分层状态

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

其他

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

12bet  网站地图  12博bet  12博娱乐