web前端中的图片

        开篇语: 在做web前端开发过程中，图片是避开不了的话题，合适的位置放一张合适的图片，胜过很多文字，可以是html便签img，也可以是css背景，还可以是svg生成的image，不同的图片对网站的性能和可访问性有很大的差异。接下来我们一起看一下各种图片的添加方式以及优缺点

1、img标签
  基本用法：

<img src="./cat.gif" alt=""/>

页面加载的时候，如果不设置img的宽度和高度，那么图片加载后会引起布局的移动，如果想避免这一点，可以对img设置宽高，这样图片加载前就会固定好位置，保留空间，不会引起页面的重绘

2、CSS隐藏图片
     图片可以通过CSS隐藏，但是仍然会被加载到页面中，即使设置为display:none, 也不会阻止图片的加载，img元素被认为是被替换元素, 所以我们无法控制它加载的内容。
     图片是内联元素，也是替换元素，正常的内联元素不可以设置宽高(设置了不起效果)， margin左右有效上下无效，padding上下左右都有效，内联替换元素可以设置宽高， 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容
     可替换元素的展现效果不是由css来控制的，这些元素是一种外部对象，它们外观的渲染，是独立于css的，CSS可以影响可替换元素的位置，但不影响自身的内容，替换元素有img, input, textarea, select等，它们都有以下特性：

1. 替换元素都是行内元素
2. img的基线位于元素的下边缘，vertical-align的默认值是baseline，因此图片下方会有几个像素的空隙，而input这类可输入的文本的替换元素，基线默认是输入的文本的基线，如果设置display为inline-block，那么基线就是元素的下边缘，否则是文本的基线
3. 替换元素的尺寸有3种：固有尺寸< html尺寸 < css尺寸,如果对img设置了高度或者宽度，则元素会按照比例展示，即使内联替换元素设置为display：block。元素也不会撑满父元素的宽度
4. 内联元素的高度仅有行高决定，垂直方向的margin，border，padding并不影响元素实际高度，而替换元素与display：inline-block相似，替换元素垂直方向的margin，border，padding会影响行高

3、可访问性问题
     HTML图片应该将alt属性设置为有意义的描述。如果图片加载失败的时候，有没有alt属性的区别在于是否保留原来的宽高,看下面的例子：

<style>
img {
   width: 200px;
   height: 100px;
   border:1px solid #000;
}
</style>
<img src="./ca1t.gif"/>
<img src="./ca1t.gif" alt="加载失败" />

得到的结果是这样的：

4、响应式图片
img标签的好处是可以为不同的视口展示不同的版本，有两种方式获得一组响应式的图片集

1. srcset属性

<img src="cat.gif" srcset="buou.jpg 1x, meiduan.jpg 2x" alt=""/>

例子可以看这里，chrome好像不支持，可以使用Firefox来查看

2. Picture元素

<picture>
  <source srcset="yingduan.jpg" media="(min-width: 800px)" />
  <source srcset="buou.jpg" media="(min-width: 500px)" />
  <img src="cat.gif" />
</picture>

实现效果如下：

5、CSS背景图片

使用方法如下:

.element {
    background: url('cool.jpg');
}

还可以通过媒体查询设置在不同的分辨率下显示或隐藏

@media(min-width:700px) {
	.element {
		background: url('cool-1.jpg');
	}
}

6、SVG
svg是一种矢量图，最大的特点是在缩放的时候不会影响图片质量，在svg中我们可以嵌入jpg/png/svg图像等,把imgae嵌入到svg中还有一个很大的特点就是用户不能点击下载图片

<svg width="200" height="200">
        <image href="buou.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />  
</svg>