Question

我决定只在必要的宽度（使用srcset）提供图像或者将图像提供两倍大的时候处于一个难题，这样它在Retina显示屏上看起来会很好。

我们都希望我们的网页看起来最好。特别是那些从事图形或摄影的人。然而，我们还必须明智地考虑交通带宽。我们想要考虑那些只使用WiFi的人。如果他们必须等待更长时间才能加载，他们就会离开。我还读过谷歌赞成排名较轻的网页。

但没有什么比看到您的网页在Retina或HD设备上看起来模糊更糟的了。特别是现在越来越多的人通过他们的手机和我的行业访问信息，大多数是Macbook用户。现在我的srcset看起来像这样：

<img
  srcset="img/large-image-1920w.jpg  1920w,
          img/medium-image-1600w.jpg  1600w,
          img/small-image-1024w.jpg  1024w"
  sizes="100vw"
  src="img/small-image-1024w.jpg" />

我的缩略图的代码（我正在使用Bootstrap，这就是为什么在768w，我选择960w的图像，认为它在手机上看起来会更好）：

<div class="col-xs-12 col-sm-4">    
 <img 
   srcset="img/thumbnail-960w.jpg  1920w,
           img/thumbnail-640w.jpg  1200w,
           img/thumbnail-960w.jpg  768w"
   sizes="100vw" 
   src="img/thumbnail-328w.jpg" />
</div>

图像设置为填充浏览器的整个宽度的100％。每行显示三个缩略图。

如果Retina显示器需要以适当的尺寸显示2x像素密度（例如，400px×400px图像将显示为200px×200px），我的网页在960w浏览器上只能看起来不错吗？那太小了。

对于iPhone，我想因为它们的物理尺寸也很小，如果有必要，它们仍然可以访问中图像1600w。

有什么建议吗？

Answer 1

以上代码适用于不同的屏幕。

您可以尝试使用标记，我们有媒体属性来检查分辨率。

<picture>
  <source media="(min-width: 650px)" srcset="img_650.jpg">
  <source media="(min-width: 465px)" srcset="img_465.jpg">
  <img src="img_default.jpg" alt="something" style="max-width:auto; width: auto">
</picture>

希望这会对你有所帮助。

选择最小尺寸图像之间的快速加载与高清晰度图像的视网膜显示

1 个答案: