图片相关

图片相关知识

0、自然界中颜色有无数种；不过在计算机中颜色都由红绿蓝三基色组成，用1个BYTE(字节，范围是0～255)来表示一个颜色分量；所以有256×256×256＝16777216种颜色。而所谓32位真彩色，其实也就多了一个字节的Alpha值(半透明度)。
1、Consider the following example:
A css file makes reference to an image. If the image changes, the hash of the css file remains the same since its contents have not changed. Web clients that have previously cached this css file will not correctly resolve the new image. If we take in to consideration the dependency graph while calculating the css file hash, we can have it change if any of its child references have changed.
So to recap, gulp-rev-all not only handles reference re-writing but it also takes child references into consideration when calculating a hashes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Resolve references to other files
for (var path in this.files) {
  this.resolveReferences(this.files[path]);
}

// Resolve and set revisioned filename based on hash + reference hashes and ignore rules
for (var path in this.files) {
  this.revisionFilename(this.files[path]);
}

// Consolidate the concatinated hash of all the files, into a single hash for the version file
this.hashCombined = this.Tool.md5(this.hashCombined);

// Update references to revisioned filenames
for (var path in this.files) {
  this.updateReferences(this.files[path]);
}

2、“标准式”图片是从上到下逐渐显示，“渐进式”图片是先显示图片轮廓,，由模糊变清晰。eg：“标准式”图像：http://www.webkaka.com/blog/archives/demo/1_normal-4276_50k.jpg 、“渐进式”图像：http://www.webkaka.com/blog/archives/demo/1_ps(lx)-5_006m.jpg
3、JPEG、GIF和PNG这三种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。
4、图片格式选择过程如下：

5、各种图片格式的特点：

6、JPG和PNG格式的图片生成后，一般还有进一步优化的空间，例如JPG格式的照片中，可能携带有相机的Exif信息，PNG格式的图片中可能带有Fireworks等软件的图层信息等。去除这些额外信息后，还可以通过减小图片的调色板，去除没有出现过的颜色，以及合并相邻的相同颜色等手段来进行优化。
7、
①标准JPEG：以24位颜色存储单个光栅图像，是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。此类型图片在网页下载时只能由上而下依序显示图片，直到图片资料全部下载完毕，才能看到全貌。
②渐进式JPEG：渐进式JPG为标准JPG的改良格式，支持交错，可以在网页下载时，先呈现出图片的粗略外观后，再慢慢地呈现出完整的内容，渐进式JPG的文件比标准JPG的文件要来得小。
③JPEG2000：新一代的影像压缩法，压缩品质更好，其压缩率比标准JPEG高约30％左右，同时支持有损和无损压缩。一个极其重要的特征在于它能实现渐进传输，即先传输图像的轮廓，然后逐步传输数据，让图像由朦胧到清晰显示。
8、图片加载的时机：
a、即时加载机制—即时加载的机制运用的场景是：图片量少，页面少于3屏比较适合这种技术，向一般的企业宣传网站比较适合采取这种选型。
b、预先加载机制—预先加载的原理是预知用户将发生行为，提前加载用户所需的图片。
c、延迟加载机制—图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。图片延迟加载的原理：页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器，那么也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。
9、
10、

Comments

去留言
2017-09-05
⬆︎TOP