关于响应式设计中的图像

1.1 CSS替代方案
在向网页添加图像前，应该考虑是否真的需要使用所有那些图像。如果可以用CSS来获得同样的效果，就不必使用图像了。例如按钮。小技巧：–CSS按钮生成器。

1.2内容图像
内容图像是向用户传递意义的图像，要么是网页信息的一部分，要么是导航元素（例如引导打开微博、微信的图标）。添加img元素的时候一定要加上Alt属性，并且Alt属性的值应该有意义点，而不是随便添加。

1.3背景图像
CSS的background-image属性允许你添加背景图像用于装饰页面，他们不成为内容的一部分。因此不要使用background-image属性添加内容图像，因为他们对于使用屏幕阅读器的用户来说是不可见的。背景图像无alt属性，即显示不了时不会有任何替代文字。

1.4图像拼合
为了加快页面的加载速度，我们应该通过把许多小图像合并成一个大图像来减少需要加载的图像文件数量，然后用CSS技术拼接，也就是切图。

1.5图标字体
也就是小图形解决方案，用@font-face，如Yummygum IconSweets、Bootstrap的FontAwesome字体

1.6图像文件格式
一般来说，用在网页上的图像应该是JPEG、GIF、PNG格式的，所有的浏览器都可以显示这些文件格式。文件格式的差异对于响应式设计尤为重要，因为你选的格式将会影响到图像的大小。如果一个你想要用于页面上的图像的格式不是以上三个的话，你应该用图像编辑软件进行转换。

• JPEG格式 适合于照片及其他包含很多种颜色图像，最常用
• GIF 此格式最好用于颜色范围较小的图像，比如标志或插图，而不是照片。因为它通过减少文件使用的颜色数量来压缩文件的大小。GIF图像显示于页面上时，背景会通过图像的透明区域显示出来。而当你想用GIF显示非常短的动画剪辑时，最好用CSS来重现动画效果，避免对网页性能产生较大的影响。
• PNG格式 有两种类型的ＰＮＧ格式，ＰＮＧ－８支持２５６种颜色，类似ＧＩＦ文件，但它比ＧＩＦ的文件要小。ＰＮＧ－２４支持１６００万种颜色，类似ＪＰＥＧ。但同类型的ＰＮＧ－２４图像通常大于ＪＰＥＧ格式的文件。两种类型的ＰＮＧ文件都像ＧＴＦ文件一样支持透明。不过，ＰＮＧ２４位的图像还支持半透明，你可以看到图像后面的整个背景。
• 另外还有ＳＶＧ格式，此格式只适用于图形，不适用与图像。是一种矢量图像格式。不需要针对不同的分辨率创建单独的图像。但ＩＥ８以下版本不支持此格式，需要用ＪａｖａＳｃｒｉｐｔ代码代替。也可以用ＳＶＧ　Ｓｗａｐ等插件实现。
-