3 创建图片最佳实践

简介

1 . 之前关于图片就知道些懒加载。

alt

1 .备选文本，是对图片的文字性描述，用于在图片无法显示或不能看到的情况
2 .用户如果有视力障碍，屏幕浏览器会读出这个属性。
3 .图片的路径错误，或者请求失败的时候，显示这个属性
4 .浏览器不支持这个图片格式。或者有人在用纯文本的浏览器，省流量模式
5 .文字描述可以用来优化网站SEO
6 .装饰：如果仅仅是一个装饰，没有实际的用处，可以加一个空的alt。实际上装饰性图片就不应该放在HTML文件里面，css背景图片才是他的归宿。如果必须要这么做，alt=" "是最佳的处理方案
7 .内容：如果你的图片提供了非常重要的信息，就需要在alt里面简要的提供相同的信息，甚至更近异步，把这些信息写在主要的文本内容里面
8 .链接：如果把图片嵌套在a标签里面，把图片变成链接。这里做优化的是a标签，要做无障碍优化。
9 .文本：不应该将文本放在图像里面，如果主题需要有阴影，也是可以用css满足的。而不是把文本放到图片里面。如果真的必须要这么做，也不需要把文本放到alt里面.
10 .以上所有的目的都是为了在图片无法被看见时也提供一个可用的体验，这确保所有人都不会错失一部分内容

宽度和高度

1 .必须使用高度和宽度来指定图片的高度和宽度，不然会在出现图片的时候浏览器发生重新布局，这样可以让页面加载的更快速和流畅
2 .保持正确的宽高比，不然图片会扭曲
3 .如果要改变图片的尺寸，使用css而不是html

title

1 .图片也需要title，类似链接，可以给图片增加title属性来提供需要更进异步的支持信息
2 .

为图片搭配说明文字的方式来解说图片

1 .最简单就是直接加一个p，但是更好的做法是figure,figcaption，他们正是为了这个目的创造出来的

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

2 .这个figcaption元素告诉浏览器和其他辅助的技术工具这段说明文字描述了figure元素的内容

css背景图片

1 .如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片

响应式图像

1 .在具有不同屏幕尺寸，分辨率和其他此类功能的设备上运行良好的图像
2 .分辨率切换:不同尺寸。相同的显示内容，根据设备只是更大或更小

1 .srcset:提供额外的源图像以及提示。使用的图像，每个图像的大小
srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
//定义两种宽度的图片，480w和800w的时候分别用对应的图片
2 .size:定义了媒体条件，当出于某些媒体条件的时候选择什么样的图片
 sizes="(max-width: 600px) 480px,
            800px"
//定义了两种条件，600宽度或者更小，使用480px加载的宽度，大于这个使用
3 .有了这些属性，浏览器将会看他的设备宽度，找出size列表中第一个为真的媒体条件,查看为该媒体查询提供的插槽大小，加载srcset列表中引用的与插槽大小相同的图像，如果没有，则加载大于所选插槽大小的第一个图像

3 .分辨率切换:相同大小，不同分辨率

1 .支持多种显示分辨率，允许通过srcset 和x-desriptors来选择合适的分辨率图像
<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">
img {
  width: 320px;
}

2 .浏览器会计算出显示器的分辨率，并提供srcset。如果访问页面的设备具有标准/低分辨率显示。每个css像素代表一个设备像素，320w.jpg就会被加载。如果每个css像素或更多设备像素分辨率，640w.jpg的图片将会被加载

3 .注意，这俩只能选择一个实现

4 .艺术方向:根据不同的浏览器类型，显示不同的图片，pc和移动端各自显示自己的

1 .在桌面布局中只显示完成场景的横向图像，在移动布局中显示主体放大的纵向图像
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
2 .picture是一个包装器，里面包含几个source元素，这些元素为浏览器提供不同的来源以供选择，然后是最重要的img元素

5 .为什么不能只使用css或js来实现这个功能

1 .当浏览器开始加载页面的时候，他会在主解析器开始加载和解释页面的css和js之前开始下载任何 图像。该机制通常会对减少页面加载非常有用，但是对响应式图像没有帮助.因此需要实现像srcset这样的属性
2 .如果无法加载img元素，然后使用js检测视口宽度，然后根据需要动态将源图像更改为更小的图像，这个时候原始图像已经加载了，你也会加载更小的图像，反而更加糟糕

6 .大胆使用更加现在的图像格式

1 .webP和avif等新的图像格式可以再保持较小的文件大小和高质量。这些格式现在具有相对广泛的浏览器支持，没什么历史深度
2 .picture让我们可以兼容旧版本的浏览器
<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

小知识点

1 .照片使用相对路径，全都放在images文件夹下，google推荐
2 .搜素引擎竟然会读取图像的文件名并计入seo，所以随便的图像名肯定不如描述性的文件名好，很多时候我们也是通过搜一张图片，打开了一个新的网站

不愧是苹果官网