WordPress是一个很受欢迎的内容管理系统，它可以让你不用代码或者用最少的代码来设计网站。你可以通过安装主题有现成的设计，而且下载插件为你的网站添加功能。
大多数WordPress主题都有一个内置响应设计，它适应您的网站到用户的屏幕尺寸和设备规格。但是，有时主题成为错误，图像不会正确显示，然后您需要解决响应默认设置进行故障排除。
此外，如果更改默认主题，可能会遇到响应性图像问题。了解响应式图像在WordPress中的工作方式可以帮助您了解问题的根源，并应用正确的修复。
什么是响应式图像?
响应式图像是根据用户的屏幕大小和设备规格提供给用户的图像。例如，发送到大型高清显示器的高分辨率图像，或发送到小型老式手机的低分辨率图像。响应式图像的目的是在不影响用户体验的情况下最大化带宽使用效率。
您可以添加响应图像上传多个大小或格式的图像。然后，当用户访问您的站点时，您可以使用HTML、CSS和JavaScript的组合来提供符合用户屏幕参数的图像。
通常，创建您需要的各种大小和格式需要一些手工工作。如果你想改变图像的裁剪以更好地适应特定的屏幕尺寸，这一点尤其正确。一旦保存了不同大小的图像，就需要将所有图像存储在web服务器上，以便在需要时使用。
或者，您可以使用工具，如内容交付网络(cdn)或数字资产管理解决方案(dam)来动态调整大小并提供图像。如果您有许多图片或多个站点，这可能是一个更简单的选择。使用这些方法需要将适当的库导入到页面脚本中，并对所需的映像进行API调用。
为什么应该使用响应式图像
为了你自己和你的用户的利益，你应该在你的网站上使用响应式图像的原因有很多。除了以下原因，请记住谷歌给搜索优先的网站有响应图像。
- 有效带宽使用-响应图像确保只提供和下载对用户最有用的图像。这消除了带宽的浪费，因为您发送的文件不会大于用户实际使用的文件。它还可以让你的网站更加友好，特别是对那些数据有限的移动用户。
- 更快的负载时间-用户客户端需要下载的数据越少，页面加载时间就越快。这一点非常重要，因为许多用户不愿意等待页面加载超过几秒钟，如果加载时间过长，他们就会离开站点。
- 改善用户体验当你在你的网站上添加图片时，你这样做是为了给用户一个特定的体验。响应式图像确保用户可以以你想要的方式查看图像，而不扭曲或错位。这给用户一个更愉快的体验，并使他们更有可能留在您的网站。
如何在WordPress中运作响应图像？
作为WordPress 4.4 (WP)，将图像添加到媒体库自动设置响应图像。当你上传图像时，WP会自动创建5个不同大小的图像副本。这些尺寸包括:
- 完整的- 原始上传大小
- 大-最大宽度或高度1024px
- 中等大最大宽度或高度为768px
- 媒介-最大宽度或高度300px
- 缩略图最大宽度或高度为150px
您还可以修改这些大小或手动添加额外的大小。
为了控制如何使用这些大小，WP包括SRCSet和大小的IMG标签属性。这些属性向浏览器提供关于浏览器的信息，了解哪些尺寸以及应选择这些大小。
在srcset属性中，您分配一个图像宽度。然后浏览器检查宽度并选择匹配或低于浏览器宽度的最大图像。在size属性中，指定图像应该缩放到的大小。这使您能够选择最有效的图像，并确保它按照屏幕的比例显示。
下面可以在图像标记中查看如何在图像标记中看到：
关于响应式图像你应该知道的事情
在使用响应式图像时，有几个方面您应该记住。这些注意事项可以帮助您确保图像按照预期显示，并确保您的用户获得最佳体验。
“尺寸”是可选的与catch
当你定义大小属性，您需要理解它指定了所需的图像以及图像的渲染宽度。这意味着你必须注意匹配图像之间的宽度。如果在src之间的图像宽度不同，你可能会在渲染时得到一个扭曲的图像。此外，如果使用不包含大小的srcset，您应该知道客户端浏览器将使用默认宽度100vw。
图像呈现因浏览器而异
通常，浏览器呈现与视口大小最匹配的图像大小。然而，不同的浏览器使用不同的方法来选择图像，因此您的用户体验可能不一致。例如，有些浏览器会优先考虑缓存的图像版本，而不管大小是否匹配。
这种可变性和缺乏粒度控制意味着您不应依赖SRCSet进行设计决策。例如，您应该考虑使用不同比率的不同图像或图像，以更好地适合特定设备。要完成此操作，您可以使用
“srcset”不是默认值
如果您使用其他人开发的主题，请记住，默认情况下不实现SRCSet。许多主题，尤其是较旧的主题不包括这个或尺寸属性。如果要使用这些属性，则需要自定义您使用的主题或查找实现属性的其他主题。
如果你不确定你的主题是否使用srcset，并且它没有在主题文档中说明，你可以手动检查。最简单的方法是在桌面或笔记本电脑上打开一个带有图像的页面。根据您的浏览器和操作系统，您应该能够右键单击图像并选择Inspect。这使您能够查看元素，并查看是否实现了srcset。
视网膜图像
当考虑响应式设计时，它也很重要视网膜图像考虑。现在大多数屏幕都需要视网膜就绪图像，因此解决此问题可确保您的图像在任何设备上看起来很漂亮和锐利。你可以使用它来使用它完美图像(WP Retina 2x)插件．
这个插件创建视网膜(或高dpi)设备所需的图像文件，并在相应的屏幕上显示它们。视网膜图像将为你自动生成，只要你上传一个新的图像到你的媒体库。
的完美图像(WP Retina 2x)插件与上面描述的新的WordPress响应图像支持完美地工作，并将视网膜图像添加到src集。它还可以让你控制WordPress正在做的事情(例如，它可以让你选择删除不再需要的图像大小)。
结论
响应式图像对于创建积极的用户体验至关重要。当图像响应时，用户可以在任何类型的设备上查看文件而不会遇到问题。您还可以使用响应图像来增加加载时间和有效利用带宽。
大多数WordPress主题都带有一组响应式图像配置，但您可以经常进行更改。在对默认设置进行任何更改之前，您应该确保正确理解其后果。为了避免数据丢失，请确保提前备份您的站点，并修改子主题而不是原始文件。
