0

我正在尝试减小 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
  • 对于内容图像和特征图像？如何？

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

4

2 回答 2

0

可能原因一：

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

于 2016-10-07T12:14:09.197 回答
0

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

于 2016-10-07T12:14:57.620 回答