前端关于图片与使用注意

​前端关于图片与使用注意

Img属于html标签，background是css方法。一个页面由html、css、js组成，按照浏览器解析机制，html标签优先解析。
得出：对于页面重要的需要优先展示的图片使用img标签，如logo；而对于banner，广告图等较大的图片建议使用background方式，避免阻塞。
Img标签拥有alt属性，前端性页面图片最好都完善alt属性，这样的好处：

1. 图片加载失败有文字提示
2. 利于SEO,可以让搜索引擎知道图片是什么
   使用图片，对于图片的大小，最大最小尺寸要有定义，如果图片大小不做定义，则页面需要重新渲染，速度受到影响。
   对于大量图片情况，使用图片懒加载。懒加载一种实现原理，在页面载入的时候将页面上的img标签的src指向一个小图片， 把真实地址存放在一个自定义属性中，这里我用data-src来存放。随后判断图片位置是否将要出现在可视区域而提前加载。

 <img src="loading.gif" data-src="http://xxx.ooo.com" />

对于大量细小图片情况，使用拼图方式，将小图片合并进一张大图。
alt和title的使用

1. alt和title对访问者(用户、蜘蛛)都很重要(alt标签对搜索引擎会更重要一些)，所以在定义img对象时，最好将alt和title标签都写全，保证在各种浏览器中都能正常使用。
2. 在alt和title中包含关键字，并且二者内容最好不一样。
3. 不要在alt和title中堆积关键字，否则可能会导致搜索引擎惩罚。