WordPress Retina Images Support

Question

I'm working on a WordPress project and have encountered an issue with adapting images for Retina displays.

I've tried several plugins, including WP Retina Image and Retina @2x, but they haven't worked at all. The Perfect Images plugin worked better, but it displays high-resolution images on all types of screens, which isn't suitable for my case.

Additionally, I'm using the caching plugin WP Rocket, which might be causing some of the Retina plugins to not work properly. My main task is to ensure that images are displayed in standard resolution on regular displays and in high resolution on Retina displays.

Are there any methods or plugins that can help me properly implement this functionality, considering the use of WP Rocket? I'm interested in any advice or suggestions on setting up such a system.

Answer 1

If you are OK with editing your theme files, you may want to look at using <img srcset> attribute where you can specify what images to load at what screen density and/or screen width. You could still use a plugin to generate the @2x images, but then specify the images in your theme. Here is an article explaining how to use it.

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

Example:

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