答案是使用WP的响应图像，定制尺寸属性以适合您的用例。
从字里行间看，我在这里假设您使用的是响应性设计方法，以不同的宽度显示不同的布局。
最简单的方法是首先为自己创建一个替换模板标记函数the_post_thumbnail:
function wpse_221989_the_post_thumbnail( $size, $attr ) {
the_post_thumbnail( $size, $attr );
}
你打电话的地方
the_post_thumbnail 在模板中，调用
wpse_221989_the_post_thumbnail 相反我们为什么要这样做？WP没有提供任何要修改的过滤器挂钩上下文
srcset 和
sizes 响应图像的属性，所以我们正在使用
wpse_221989_the_post_thumbnail 包装器函数。
到目前为止，还没有什么聪明的方法，但现在我们可以在此功能的基础上：
1-绘制一组图像大小
2-要求浏览器根据此特定用例的响应断点选择合适的图像
1-在你的例子中，你的图像版本都是相同的纵横比，WP为我们处理事情。使用内置图像调用，如the_post_thumbnail 将生成srcset 属性，该属性与在中指定的图像具有相同的纵横比$size 参数您可以使用add_image_size 创建足够大的其他版本，以实现高密度显示。WP的宽高比匹配允许较小的舍入误差，因此您问题中的两个大小都应该匹配OK。
2-要让浏览器为空间选择正确的图像大小，您需要自定义sizes 属性WP的默认值sizes 属性假定您希望图像为全浏览器宽度，但不超过图像的自然宽度。在您的设计中，较窄的屏幕需要较大的图像，然后在某个断点上方选择较小的图像宽度。
因此，假设从图像大小来看，断点位于640px, 我们想要一个sizes 属性有点像这样：(min-width: 640px) 33.333vw, 100vw
这对浏览器所说的是针对的windows640px width和over，从srcset 与三分之一窗口宽度最匹配的列表。对于其他窗口宽度（<；640px），请从列表中选择最适合整个窗口宽度的图像。
为了将其转化为代码，我们创建了一个新函数来返回属性，并将其构建到包装器函数中：
function wpse_221989_sizes() {
return "(min-width: 640px) 33.333vw, 100vw";
}
function wpse_221989_the_post_thumbnail( $size, $attr ) {
add_filter( \'wp_calculate_image_sizes\', \'wpse_221989_sizes\', 10 , 2 );
the_post_thumbnail( $size, $attr );
remove_filter( \'wp_calculate_image_sizes\', \'wpse_221989_sizes\', 10 );
}
现在，当主题模板调用
wpse_221989_the_post_thumbnail 我们的习惯
sizes 属性将替换为默认值。通过在调用之前挂接到筛选器
the_post_thumbnail 并在我们使自定义模板标记功能对问题的上下文敏感后立即取消挂钩，而不会打乱主题其他部分图像上生成的任何大小属性。
您可以通过在$size 为主题创建的不同图像版本选择不同的规则。
如果Google Pagespeed对您很重要，那么请测试它是否遵守您的srcset 和sizes 属性。如果没有，则使用add_image_size 制作一个刚好适合Pagespeed窗口的尺寸，并在通话中使用该尺寸wpse_221989_the_post_thumbnail 因此，它被放入src 属性在我的网站上，我使用1024px图像作为默认图像，这似乎使桌面和移动Pagespeed分析都很满意。
