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">

屏幕截图

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

如果设备的尺寸是 320，那么为什么浏览器加载 600px
图片？ srcset 在 WordPress 中如何工作？我可以添加自己的 srcset
内容图片和专题图片？怎么样？

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

Answer 1

可能原因一：

iPhone 是 320 x 568 像素，您可以旋转它，因此它可以是 320 x 568 像素或 568 x 320 像素。

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

可能原因2：浏览器选择 "best" 源图像，但 iPhones 具有与其他设备不同的像素密度。因此，浏览器正在选择更大的图像（大约两倍大小），同时仍然模拟 320"px" 宽度。

尝试另一种具有 "normal" 像素密度的设备，并检查它是否检索到您期望的图像。

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

Answer 2

iPhone 5 的默认全屏尺寸为 320 x 568 像素，但是，这是屏幕分辨率的一半，因为 Retina 显示屏中的像素加倍。所以，您的 wordpress 正在按预期工作 =)

Wordpress 'SRCSET' 让我很困惑，如何在移动设备上正确使用它？

Wordpress 'SRCSET' Making me confused, How to use it properly for mobile?

php

wordpress

image-optimization

srcset