WordPress 视网膜图像支持

Question

我正在开发一个 WordPress 项目，并且遇到了针对 Retina 显示屏调整图像的问题。

我尝试了几个插件，包括 WP Retina Image 和 Retina @2x，但它们根本不起作用。 Perfect Images 插件效果更好，但它在所有类型的屏幕上显示高分辨率图像，这不适合我的情况。

此外，我正在使用缓存插件 WP Rocket，这可能会导致某些 Retina 插件无法正常工作。我的主要任务是确保图像在常规显示器上以标准分辨率显示，在视网膜显示器上以高分辨率显示。

考虑使用 WP Rocket，有没有任何方法或插件可以帮助我正确实现此功能？我对建立这样一个系统的任何意见或建议都很感兴趣。

Answer 1

如果您可以编辑主题文件，您可能需要查看使用

<img srcset>

属性，您可以在其中指定以何种屏幕密度和/或屏幕宽度加载哪些图像。您仍然可以使用插件来生成 @2x 图像，但然后在主题中指定图像。这是一篇解释如何使用它的文章。

https://html.com/attributes/img-srcset/

示例：

<img srcset="
    /wp-content/uploads/flamingo4x.jpg 4x,
    /wp-content/uploads/flamingo3x.jpg 3x,
    /wp-content/uploads/flamingo2x.jpg 2x,
    /wp-content/uploads/flamingo1x.jpg 1x
"
src="/wp-content/uploads/flamingo-fallback.jpg"
>