Question

我一直在尝试使用srcset和尺寸来优化我的摄影网站上的图片，但浏览器中的检查员告诉我它正在加载最大的图像尺寸。为了确认这一点，我添加了一个带有数字的新图像，以便我可以确定正在加载哪个尺寸的图像。

但无论我如何搞乱媒体查询，我都无法让它正常运作。我认为我的问题与错误地编写媒体查询有关，但我有点在我的智慧结束。我以我能想到的各种方式对此进行了测试。我在这里看到一篇文章，浏览器可以缓存较大的图像。所以我在多个浏览器中以及隐身模式下尝试了它。

如下所示，图像称为＆＃34; test＆＃34;有时加载中等大小的图像，但从来不是最小的图像。

以下是我的代码的一部分。您会注意到我还在href标记中使用了响应式加载（尺寸）的图片，因为它是灯箱的一部分。

您可以在https://www.jeffreygelt.com/alt/找到相关页面。

这是我的代码：

    <a href="/alt/img/portfolio/test-1000x667.jpg" 
        data-sizes="(min-width: 880px) 1000px, 400px"
        data-srcset="
            /alt/img/portfolio/test-400x267.jpg 400w,
            /alt/img/portfolio/test-800x533.jpg 800w,
            /alt/img/portfolio/test-1000x667.jpg 1000w">
        <picture>
            <img class="img-responsive"
                sizes="(min-width: 880px) 400px,
                       (min-width: 660px) and (max-width: 879px) 800px,
                       (min-width: 400px) and (max-width: 659px) 400px, 1000px"
                srcset="
                    /alt/img/portfolio/test-400x267.jpg 400w,
                    /alt/img/portfolio/test-800x533.jpg 800w,
                    /alt/img/portfolio/test-1000x667.jpg 1000w"
                src="/alt/img/portfolio/test-1000x667.jpg"
                alt="Asbury Park">
        </picture>
    </a>

    <a href="/alt/img/portfolio/andy-533x800.jpg" 
        data-sizes="(min-width: 880px) 533px, 395px"
        data-srcset="
            /alt/img/portfolio/andy-395x593.jpg 395w,
            /alt/img/portfolio/andy-419x629.jpg 419w, 
            /alt/img/portfolio/andy-533x800.jpg 533w">
        <picture>
            <img class="img-responsive" 
                sizes="(max-width: 880px) 533px, 395px"
                srcset="
                    /alt/img/portfolio/andy-395x593.jpg 395w,
                    /alt/img/portfolio/andy-419x629.jpg 419w,
                    /alt/img/portfolio/andy-533x800.jpg 533w"
                src="/alt/img/portfolio/andy-533x800.jpg"
                alt="Andy's Portrait" />
        </picture>
    </a>

Answer 1

对于列视图，这很简单：sizes="(max-width: 400px) 99vh, (max-width: 880px) 49vw, 285px"。我希望你开始明白这一点（用我的例子）。对于您的灯箱视图，它有点复杂，因为它取决于宽度和高度，sizes仅支持宽度描述符。如果是视口宽度和视口高度受限图像，则可以使用vh单位组合宽度和图像的纵横比来计算图像宽度。

您可以在此处查看更多信息： Can I use <picture> for both height and width-constrained images?

另请注意：所有浏览器都会将计算出的尺寸长度与devicePixelRatio相乘，以生成所需的图像宽度。 Chrome会加载最大的图片（如果它位于浏览器缓存中）。

使用srcset和大小的响应式图像完全失去了感觉

1 个答案: