参考:
大漠-web上图片的使用方式
大漠-给Web页面提供正确图像的姿势

图片引入

1、img
image.png
2、picture
3、background-image
image.png

css引入
image.png
background-position、background-repeat、background-size、background-clip等。除此之外,还可以使用CSS的混合模式属性,比如background-blend-mode处理一些特殊效果
image.png
当然 媒体查询可以做同样的事情

  1. @media (min-resolution: 2dppx),
  2. (-webkit-min-device-pixel-ratio: 2) {
  3. .logo {
  4. background-image: url(logo@2x.png)
  5. }
  6. }

图像适配

怎么让图像能更适合或适配容器,比如最常见的全屏图像这样的效果
1、max-width

  1. img {
  2. max-width: 100%;
  3. height: auto;
  4. }

2、object-fit属性 (。你可能想要让图像长宽比例来填充他的整个容器,和想重新定位他的中心位置
3、保持宽高比(《= padding模拟

  1. .aspectration {
  2. position: relative;
  3. /*因为容器所有子元素需要绝对定位*/
  4. height: 0;
  5. /*容器高度是由padding来控制,盒模型原理告诉你一切*/
  6. width: 100%;
  7. }
  8. .aspectration[data-ratio="16:9"] {
  9. padding-top: 56.25%;
  10. }
  11. .aspectration[data-ratio="4:3"] {
  12. padding-top: 75%;
  13. }

4、终极-响应式图片

现在一般的解决方法是:根据不同的终端加载不同的图像,即对不同的终端准备不同分辨率的图
image.png

两种方法:

  • 使用图片-适配、加载与优化 - 图6元素加载图像,使用该元素最新属性srcset和size给用户加载正确的图像
  • 使用元素给用户加载正确的图像

图像加载

图像优化

  • 首选矢量格式:矢量图像与分辨率和缩放无关,这使它们成为多设备和高分辨率情况的完美选择。
  • 缩小和压缩 SVG 资产: 大多数绘图应用程序生成的 XML 标记往往包含可以移除的多余元数据;确保您的服务器配置为对 SVG 资产采用 GZIP 压缩。
  • 挑选最佳光栅图片格式:确定您的功能要求并选择适合每个特定资产的格式。
  • 通过试验为光栅格式找到最佳质量设置:不要害怕调低“质量”设置,调低后的效果通常很不错,并且字节数的缩减很显著。
  • 移除多余的图像元数据:许多光栅图像都包含多余的资产元数据:地理信息、相机信息等。请使用合适的工具删除这些数据。
  • 提供缩放的图像:调整服务器上的图像尺寸,并确保图像的“显示”尺寸尽可能接近其“自然”尺寸。尤其要密切注意较大的图像,因为在调整尺寸时,它们占用的开销最大!
  • 自动化、自动化、自动化:投资购置自动化工具和基础设施,这样可以确保您的所有图像资产始终得到优化。

使用base64( 参考 这里

  1. 减少了HTTP请求
  2. 某些文件可以避免跨域的问题
  3. 没有图片更新要重新上传,还要清理缓存的问题

什么图片适合用base64更佳:

  • 这类图片不能与其他图片以CSS Sprite的形式存在,只能独行
  • 这类图片从诞生之日起,基本上很少被更新
  • 这类图片的实际尺寸很小
  • 这类图片在网站中大规模使用

即一般用作背景图片(比如那个h5页,背景图是用的base64

再比如,一个分割线