img src属性
<img src="/i/eg_tulip.jpg" />
src的值：url形式（相对或者绝对路径），或者base64编码的图片数据（Data URI）
src实现跨域请求，但不能访问服务器返回的响应内容，只能单向的发送get请求（在html元素中拥有src属性的元素是可以跨域访问资源，如：<script>，<img>，<iframe>）
图片显示白边框探
img alt属性
图片无法显示时展示的描述文本
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
在ie浏览器上当用户把鼠标移到图像上方，显示alt描述文本（描述功能现在使用title属性）在firefox或者chrome，alt属性就会不管用
用户无法查看图像的可能场景：
- 网速太慢
- src 属性中的错误
- 浏览器禁用图像
- 用户使用的是屏幕阅读器
alt属性里的值还会被搜索引擎抓取到，比如你现在在百度搜索柯基，那么我们网页当中的这张图片就可能会被百度图片给抓取到，增加曝光几率
推荐的alt使用原则
- 如果图像包含信息 - 使用 alt 描述图像
- 如果图像在 a 元素中 - 使用 alt 描述目标链接
- 如果图像仅供装饰 - 使用 alt=""
img title属性
title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。
img标签和background-image的使用
浏览器加载文档，碰到样式会跳过去继续加载HTML，HTML加载完成后，才会继续加载css样式表。
img标签是src赋值的时候，就会同时去拉取图片，所以重要的想先显示的图片用img标签加载更快。
从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片，那么用户在浏览网页的时候，是可以直接在图片上右键，然后另存为，把图片保存下来，但是background是不可以的；
使用场景
如下场景使用img标签比较合适：
1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人)，使用Img标签加上alt属性。
2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。
3、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
4、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
5、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
6、使用img代替有背景图像可以显著提高性能的动画背景。
7、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
如下场景使用background-image属性比较合适：
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image。
3、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
4、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
5、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
图片挤压或者拉伸问题探究
问题来源
比如：原图：1000*1200px
给img设置宽高为如下场景：（1）（2）根据宽度等比缩放。（3）（4）会被拉伸
（1）width="50%" height="100%"，以width的大小显示图片显示尺寸。即：500*600
（2）width用px，height用%，还是根据width保持图片原本比例显示大小
（3）width="50%" height="200px"，出现拉伸，显示宽度为原图50%，高度只有200px
（4）width="10px" height="200px"，按照px值代表的尺寸拉伸原图（原图内容会全部显示）。
推文：
1、一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)
实现需求: 要求统一原图大小不一行的图片为一个大小