相同的图像，两种尺寸

Question

我在想什么是“最好的实践”：

在HTML页面中，我有一个图标，菜单较小，内嵌文字较大。视觉上是相同的图像，但它被加载为两个不同的图像。我打电话使用每个作为base64源，但这个问题也适用于外部img。

最好是：

1. 加载2张不同的图片，其中2封服务器请求和近2倍的下载大小（或内联base64大小）
2. 仅加载更大的图像，客户端将其调整为小尺寸

Answer 1

这种情况归结为您的服务器，缓存能力，加载时间和预期客户（移动重或桌面重）。

我更喜欢在较小的尺寸上加载较大的图像，因此它们在视网膜设备上看起来更漂亮。这是我过去几年的做法。但是，我建议你研究的是img srcset。

接下来就是pretty good (non-IE) support。

Answer 2

有几种方法可以解决这个问题。假设图像在页面上加载：

<img src="image.png">

这已经对后端进行了调用，并且您希望将其显示在文本块的其他位置，而不再向服务器再次调用。没有方便的方法可以在页面上的单独点上第二次加载较小版本的图片。这就是为什么大多数地方会保存不同尺寸的多张图片。

如果图像特别大，您可以尝试在加载时使用较低分辨率的图像，或使用SVG加载它。