Wordpress'SRCSET'让我感到困惑，如何正确使用移动设备？

Question

我正在尝试减少WordPress博客中图片的大小。据我所知，srcset是迈出这一步的第一步。在分析我的网页后，我注意到，WordPress没有正确显示srcset或浏览器正在拾取错误的图像。

SRCSET：

<img class="alignnone size-full wp-image-219923" 
src="http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360.jpg" alt="dsc_8360" width="4928" height="3264" 
srcset="http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360.jpg 4928w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-600x397.jpg 600w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-768x509.jpg 768w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-1024x678.jpg 1024w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-150x100.jpg 150w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-800x530.jpg 800w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-100x66.jpg 100w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-200x132.jpg 200w,
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-300x199.jpg 300w, 
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-400x265.jpg 400w, 
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-500x331.jpg 500w" 
 sizes="(max-width: 4928px) 100vw, 4928px">

SCREENSHOT

正如您在屏幕截图中看到的，Chrome检查在网址600x397中显示currentSrc图片大小。我使用 iPhone 5 作为用户代理。

• 如果设备的大小为320，那么为什么浏览器加载600px
• 图像？ srcset如何在WordPress中运行？我可以添加自己的srcset
• 用于内容图片和功能图片？怎么样？

我不需要代码来解决我的问题。我需要方向和建议来解决这个问题，并了解有关图像优化的更多信息。

Answer 1

可能的原因1：

iPhone为320 x 568像素，您可以将其翻转，因此可以是320 x 568像素或568 x 320像素。

因此，浏览器不会下载纵向上的320w图像和横向上的600w图像，而是仅下载最大尺寸的图像。

可能的原因2： 浏览器选择“最佳”源图像，但iPhone的像素密度与其他设备不同。因此，浏览器正在选择一个更大的图像（大约两倍大小），同时仍然模拟320“px”宽度。

试试另一种具有“正常”像素密度的设备，并检查它是否检索到您期望的图像。

srcset属性的实时规范会告诉您更多相关信息https://html.spec.whatwg.org/multipage/embedded-content.html#srcset-attribute

Answer 2

iPhone 5的默认全屏尺寸为320 x 568像素，但由于Retina显示屏的像素倍增，这是屏幕分辨率的一半。所以，你的wordpress按预期工作=）