对图像和特色图像使用SRCSET

时间:2016-12-27 作者:TwoLunch

我一直在尝试让SRCSET加载不同设备大小的图像。

我的理解是,当设备宽度或窗口宽度改变时,SRCSET将只加载相应大小的URL。

我可以看到为每个图像生成的URL,以及大小。这些都是真实的图像,它们正确链接到正确的大小:

WP generated SRCSET URLs

这太棒了!问题是,我无法在任何设备上证明浏览器正在加载原始(大)图像以外的任何内容。换言之,任何事情都发生在其他移动优化尺寸上。如果我打开或保存有问题的图像,它始终是原始图像。较小尺寸的图像似乎根本没有被利用。

那么:是否有Javascript组件,或者我缺少的某种配置设置?WordPress中的一些内容?我使用的是自定义主题,但注意到使用Twenty15时也是一样的。是否需要在函数文件中注册某些内容?我在做了大量研究后写下了这篇文章,但我仍然完全不知道我错过了什么步骤。

1 个回复
SO网友:JHoffmann

了解srcset 属性将自动选择定义大小和可用空间之间对应的图像。大多数现代浏览器support this, 在野外仍然可以找到的旧浏览器将优雅地后退,只需使用src 属性无需激活其他Javascript,只要存在正确的srcset 足够了。

如果要测试srcset 属性按预期方式工作,您可以使用浏览器的开发人员工具(通常按F12键显示)。使浏览器窗口足够小,以便加载较小的版本之一。打开开发人员工具的网络选项卡,然后加载页面。现在,您可以看到所有加载的文件,并可以检查重新加载了哪些版本的图像。如果现在将窗口调整为更大的大小,您应该会看到,更大的图像会被额外加载。

另一种可视化正在加载哪些图像的方法是,通过ftp直接用不同内容的图像替换大小版本,这样您就可以很容易地发现加载了哪个图像。

相关推荐

Responsive Header for Phone

我的Wordpress标题有问题:当我在手机上打开我的网站时(在垂直视图中),图像被裁剪。它可以在桌面上正常工作,像素为1600x400。已附加手机视图的图像和我的header.php file (主题:Nisarg,我正在研究儿童主题)。提前欢呼编辑:横幅照片