1.浏览器处理图像的过程：

1.服务器获取文件，显示出文本结构，以及预留默认的大小给<img>（如果该<img>有width-1值和height-1值，则根据这个值提前设好页面——也就是留下一个符合该值的图片位置）；

2.获取一个图像的所有信息，包括内容、大小、及其分辨率：width-2值和height-2值(如果获取图像信息失败，则每个浏览器有每个浏览器的不同处理办法，比如加载一个破损的图片示意——但无论是什么浏览器，此时如果<img>中有alt值，则加载该值替代图片,然后对这个图像的加载操作终止)。

3.把图片按width-2、height-2的值加载到页面相应位置（如果提前设了值，就按width-1、height-1加载该图片到相应位置）；

4.如果页面布局符合图片分辨率，直接加载。否则改变页面布局使其符合图片分辨率，再加载。

5.重复2、3、4，直到全部加载完毕。

一般浏览器会同时请求多个图像，网速快的我们是看不到那种“一个图一个图地出现”的情况的（网速慢的时候，我们会看到又一个加载中的黑色框框，那就是为图片预留的位置，由width和height决定其大小）；有时候我们会看到一些页面是没这种框框的，这回导致用户看文字的时候突然加载上一个图片后文字被挤下去了，体验很不好，这种就是没写width和height的了。

不管你有没有在代码中说明图像有多大（用width、height），浏览器在获取图像的时候就需要获取图像的大小了，之后再根据你设的width、height来调整图片大小放入页面，此时页面布局如果不符合就要重设，符合就直接放（这也是为什么建议图片放缩略图，然后再设置一个指向该图片的高清图片链接的原因——这样可以既让用户更快看到图像（虽然质量差点），又可以给用户选择看高清图的方式（想看就点改图片的高清链接，通常是链接就是缩略图本身））。

2.JPEG、PNG、GIF

JPEG：

1.适合连续色调图像——因为可以表达多达1600万种不同颜色的图像。

2.不适合有透明需求的图像——因为不支持透明度。

3.不适合需要高画质的情况——因为这是一种“有损”格式，这种有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

4.适合Web页面的普通图片——因为文件小，可以高效显示。

5.不适合动画——因为不支持动画。

PNG

1.适合单色图像、logo、图像里的小文本、线条构成的图像——原因不知道，下面GIF的第一点也有这个问题，其中一点可能是因为可以表达的颜色只有上百万种。按需求的颜色种类多与少又可分为：PNG-8、PNG-24和PNG-32。

2.适合有透明需求的图像——允许图像设置为透明（以此使图像下面的东西可以显示出来），且可以同时有多种透明颜色。

3.适合高清的情况——其会压缩文件来缩小大小，但却是一种无损的压缩。

4.适合Web页面的logo、单色图等（详见1）——表现的效果在某些图片上强于JPEG。

4.不适合动画——因为不支持动画。

GIF

1.适合单色图像、logo、图像里的小文本、线条构成的图像——看起来和PNG一样，但是其能表示的颜色最多只有256种。

2.适合部分需求透明的图像——只允许设置一种颜色为透明。

3.适合高清的情况——也是一种无损的压缩。

4.适合Web页面的logo、单色图等（详见1）——表现的效果在某些图片上强于JPEG。

5.适合动画——因为支持动画。

JPEG是最小的，PNG的大小根据颜色数的多少有时大于GIF，有时小于GIF。

总结：

1.以文件小为目标时：

1.当表达的颜色很多时（超过几百万），用JPEG。

2.当表达的颜色不是很多时（百万左右）——需要透明，用PNG。

——不需要透明，用JPEG。

3.当表达的颜色很少时（比如单色图、logo、几何图形等颜色只需要几种、十几种、上百种即可的图）：

——不需要透明——需要高画质——Photoshop测试PNG和GIF哪个加载时间短用哪个。

——不需要高画质，用JPEG

——需要透明——需要很多颜色透明，用PNG。

——只需要一种颜色透明，Photoshop测试PNG和GIF哪个加载时间短用哪个。

4.当需要动画时——GIF。

2.以表达效果为目标：

1.单色图、logo、线条图用PNG。

2.动画用GIF。

3.多色图用JPEG。

3.均衡的考虑时：

利用photoshop测试各种格式下的加载时间，然后根据需求优先级决定。

3.关于logo等图片的透明度和ps中的蒙版、杂边。

“因为我允许将多种颜色设为透明，所以透明区的边缘是平滑的”这句话是什么意思呢？我的理解是，边缘是否平滑和可变透明的颜色多少有关，于是百度了一下，找到了这篇文章：关于gif图片（或png8）杂边锯齿的问题，这篇文章中很好的回答了透明颜色的多少与边缘是否平滑有关、以及与ps中的蒙版（或者说杂色）的关系——因为边缘平滑过渡的效果就是依靠透明颜色来实现的。在文字或图片周围用接近背景（指图片或文字要放的区域的背景）的半透明颜色填充，从而达到整体视觉的颜色平滑过度。由于GIF是只允许一种颜色设为透明，所以如果你的边缘过度效果是通过多种透明色在ps中构造的，却保存成只允许一种透明色的格式，多余的透明色就会被保存成白色，就照成了整体视觉上的杂边锯齿。从这点看，GIF的表达效果是逊于PNG的。（这是自己简化后的解释，详细的就在上面提到的文章里。）

为什么不直接设置图像的背景色为某种颜色，让其与web页面的颜色一致，而要大费周章用ps的蒙版（杂色）去修改图片的锯齿问题呢？

可以这么做，但有一个缺点：如果web页面还有其它东西要透过logo的透明背景显示出来，你设为单色就看不到了（比如有字，你用绿色就把那一块都变成绿色了，不管是什么色的字都看不到了。）

4.<img>的作用是，浏览器显示页面时，图像会取代该元素——由于HTML页面是纯文本，所以图像绝对无法直接作为页面的一部分，它是单独存在的。这种“替换”的效果，到后面与一种被称为替换元素的称呼有关联，以后再说。

5.<img>的width、height属性看上去像是用来表现效果？

这取决于你如何使用这些属性。如果你把图像宽度和高度设置为正确的尺寸，那么她只是提供了信息——如果你是用来让浏览器提前布局，那就是表现了（详见本文的1）。

6.《Head First HTML与CSS》的排版有点问题，比如P200页的Internet Explorer这两个单词之间的距离太大了...一开始我还以为有什么特别意思。

基于标准的HTML5

1.建立“工业标准”级别的HTML，会使页面加载更快、更好的结合CSS（CSS能更好的工作意味着在不同的浏览器中显示的差异会更小）、能随着标准发展稳步走向未来：

如果能确保我们的页面与最新标准保持一致，在标准发展的过程中我们就不用做那么多修改；

有太多不同的浏览器以及浏览器版本，所以如果HTML中有错误，我们的页面在不同浏览器上显示时肯定会不一样。用CSS为HTML增加表现效果时，如果HTML有问题，则这些差别甚至会更严重。

2.对于HTML5来说，语言的新版本确实会带来成长的烦恼，因为所有人都得跟上最新的标准。不过HTML5有所简化，你能更容易地告诉我你在使用哪个版本的HTML。HTML5还明确指出了Web页面中可能出现的很多错误，所以浏览器能更一致地处理这些错误，就不会出现这种尴尬的情况：你的页面在一个浏览器上看起来很棒，但在另一个浏览器上可就不怎么样了。

3.<a>这是一个正常的HTML元素，而<!..>多了一个感叹号，说明了这是个与众不同的东西，不是元素了，比如注释的<!--.....-->和<!doctype html>

4.<meta>中声明的utf-8和保存文件时选的utf-8是不一样的作用，详见（1）《Head First HTML与CSS》学习笔记---HTML基本概念的“HTML的基本概念”的5.

5.HTML5与HTML4.01相比有哪些大的改进？

1.提供了一些新元素和属性，可以帮你编写更好、更酷（比如<video>）的页面。

2.有很多新特性，允许开发人员用HTML5创建web应用，而不止于之前的静态页面。

3.规范性更强，更健壮了。现在的规范会记录开发人员常犯的错误，还会帮助浏览器了解如何处理这些错误。

（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. 比 git log 更强大的 git reflog

    最近做了个骚操作 git checkout commitId 修改了部分内容 git add . git commit -m '修改了些东西'   -> 此时git 会自动生成一个新的 comm ...

  2. 初识NodeJS服务端开发（Express+MySQL）

    http://www.alloyteam.com/2015/03/sexpressmysql/

  3. Codeforces Round #261 (Div. 2)——Pashmak and Graph

    题目链接 题意: n个点.m个边的有向图.每条边有一个权值,求一条最长的路径,使得路径上边值严格递增.输出路径长度 )) 分析: 由于路径上会有反复点,而边不会反复.所以最開始想的是以边为状态进行DP ...

  4. hta+vbs+js+div+css (javascript是原生态的)

    talbe是javascript动态生成的,根据你的sql语句来的,分页是vbs用数组来造的轮子,vbs这脚本虽然强大,却没有返回数据集的东东,数组来做简单的分页还是比较简单的,批量跟新呢?是上传ex ...

  5. javaweb项目数据库中数据乱码

    javaweb项目数据库中数据乱码 first: 排查原因: 打断点,查看到底是在执行存数据库操作之前就已经乱码了,还是存数据库操作后乱码的. 前者解决方案: 在web.xml里面加上: <fi ...

  6. Iterator 使用

    Configuration cfg = new Configuration().configure(); SessionFactory factory = cfg.buildSessionFactor ...

  7. hash与map的区别联系应用

    一,hashtable原理: 哈希表又名散列表,其主要目的是用于解决数据的快速定位问题.考虑如下一个场景. 一列键值对数据,存储在一个table中,如何通过数据的关键字快速查找相应值呢?不要告诉我一个 ...

  8. BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树

    BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树 题意:给出每个果汁的价格p,美味度d,最多能放的体积l.定义果汁混合后的美味度为果汁的美味度的最小值. m次询问,要求花费不大于g, ...

  9. asp.net MVC 使用Bootstrap 分页

    Boostrap分页控件比较美观, 控制器代码:使用仓储模式实现.如果是直接使用DbContext上下文使用更简单. public ActionResult Index(int? page,strin ...

  10. wireshark笔记(1)之工具认识

    1 下载链接  https://www.wireshark.org/ 安装只需要注意同时会安装winpcap就好了 相关链接:www.wiresharkbook.com //书籍 英文 www.wik ...