0

我一直在练习图像以及如何使它们尽可能地响应和预演。我使用相同的代码在 iMAC 5K Retina 2x 显示器和 macbook pro 13.3 1x 显示器上进行测试。这是我的测试代码：

                <img 
                    class="img-responsive img-thumbnail"
                    src="images/sea-x-small.jpg" alt="Sea"
                    sizes="(min-width: 769px) 30vw, 100vw"
                    srcset="images/sea-x-small.jpg 360w,
                    images/sea-small.jpg 768w,
                    images/sea-medium.jpg 992w,
                    images/sea-large.jpg 1200w,
                    images/sea.jpg 1920w">

事情是在 iMac 2x 显示器上，无论窗口大小，它总是下载最新的 sea.jpg (1920px)，但它仍然会根据窗口大小下载另一个变体。而 macbook 则只下载最合适的图片，为上网者节省了大量不需要的带宽。这是 chrome 开发人员工具网络使用情况的两个说明性屏幕截图。这是 iMac 图像。如您所见，它下载了窗口大小为 400px 的 sea-small.jpg 但它仍然下载了 sea.jpg 并且 $0.currentSrc 显示了大图像 sea.jpg

iMac

这是 macbook pro 的图片：

MacBook Pro

请注意，我考虑了像素密度，但 iMac 仍然下载最大的 1920 像素图像仍然很奇怪。

4

0 回答 0