摘要：使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。就是页面中的背景，并不是内容，修饰作用。
warn: 这是一篇没有一张图片的讲图片的文章
1. 图片格式通常在网页中使用的图片有三种格式，jpg，png和gif。
jpg是有损压缩格式，就算你在ps里用100%质量保存，保存多次会产生质量损失，而png和gif则不会。因此如果开发者相对图片进行微处理，改动jpg不是明智的选择。
png支持透明和半透明，png8不保存alpha半透明通道，而png24可以。但是png24的半透明在IE6下存在兼容性问题，所有半透明的部分会被展现为不透明底色。
gif可以保存动画，gif也支持透明，而且兼容性很好，支持IE6，但它和png8一样，透明的边缘由于没有虚化，会有比较难看的锯齿。
另外一个比较炫酷的技术是base64图片，就是用base64编码方式对图片进行编码，然后在css的background里载入，如下：
background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
其中data表明用数据的方式加载背景图，img/gif是图片格式，base64是编码格式，最后是编码本身。
base64并没有想象中的那么优雅，你随便拿一张图片转成base64会大的惊人，从体积上来讲也要大于一般图片，而且容易阻塞页面，图片不易修改和查看，兼容性还不好（IE7以下）。
关于base64的利弊查看这里：
base64利弊
jpg作为位图，对于复杂颜色和复杂结构的图片有很好的压缩，类似照片或卡通形象，jpg保存下来要比png和gif硬盘容量小很多。但如果是简单图形颜色较少，png的表现更好。基于现在页面设计越来越扁平，越来越简洁，所以png使用的比例越来越高，像按钮，小组件这类的基本都由png来保存，一个颜色少，二个质量无存，三个支持透明。jpg使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。
我个人的经验是，页面中的一些大图尽量控制在100k左右，通过ps保存jpg的质量来控制，不到100k的可以提高质量，大于100K的适当降低质量。
大家都知道，一个是html里的img标签，另外一个是css的background，当然canvas也可以加载图片，而且可以控制每个像素点的属性,但是没有人会为了在页面中放一张图片使用canvas。
img标签的图片可以缩放，所以可以做一些自适应效果，比如一个全屏的背景自适应效果，可以通过在底层绝对定位一张img，缩放的时候改变它的尺寸来实现。
background的优势更多比如可以使用sprit，可以重复背景，控制展现位置，但是它不能缩放图片，除了使用css3的background-size。
当然了，使用img和background也要从语义角度去考量，img里的图片就是作为html内容的图片，也有利于SEO。background就是页面中的背景，并不是内容，修饰作用。
img标签有一个坑，就是空的src标签，这样：
浏览器会把空的src当做页面本身，页面中所有的资源会被重新加在一起。
4 background和sprit作为全局样式的图片，还是有必要放在sprit里的。保存sprit有不少工具，也可以自己手动处理，手动处理的灵活性高一些，可以在做的过程中调整图片的位置。
曾几何时我喜欢把sprit做的很极致，中间不留一个像素的缝隙，后来发现这种做法其实没什么必要，节省这点有可能让图片调整变的很麻烦。
前期尽量做好规划，html结构，css repeat，都会对sprit图产生比较大的影响。排布好的sprit图可以简化html结构。
background-color属性可以透过png透明的位置，我们可以利用这个做一些简化，比如按钮上的icon做成透明的png，这样改变background-color就可以实现不同的按钮，而只使用了一张图片。
background-repeat 可以做无缝贴图，这个很有意思，类似马赛克，或者瓷砖。一些看起来很炫酷的背景，一些噪点之类，你去看其实只是一张3*3像素的循环之类。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111160.html
摘要：所以，抛开这些歧义和陷阱，我的问题变成了标签的位置会影响首屏时间么然而答案并不是那么显而易见，这得从浏览器的渲染机制说起。 说明： 本文提到的浏览器均是指Chrome。 script标签指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为...
摘要：一诞生的性能瓶颈，主要有以下原因。注意组件类的第一个字母必须大写，否则会报错。组件并不是真实的节点，而是存在于内存之中的一种数据结构，叫做虚拟。此外，还提供两种特殊状态的处理函数。不会随着时间改变可能不是。 本文为学习笔记，适合入门的童鞋，如有错误，请多多指教。 一、react诞生 Web app的性能瓶颈，主要有以下原因。 （1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要...
摘要：性能统计有助于帮我们检测网站的用户体验。这样，我们就轻轻松松的统计到了首屏时间。下一章，我们将继续聊聊百度移动版首页那些事。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）： https://segmentfault.com/blog/frontenddriver 上一篇文章我们讨论了，如何进行前端日志打点统计： https://segm...
阅读 3762·2021-10-08 10:05
阅读 2925·2021-09-27 13:57
阅读 2636·2019-08-29 11:32
阅读 988·2019-08-28 18:18
阅读 1257·2019-08-28 18:05
阅读 1946·2019-08-26 13:39
阅读 802·2019-08-26 11:37
阅读 2025·2019-08-26 10:37
