Output different image resolutions for different devices

[McKnule]

Hello,
in order to reach the fact that all images on retina displays are also high resoluted, I have uploaded all images in double pixel resolution (1200x350 = 2400x700px and 1500x750 = 3000x1500px).

I have a plugin (WP Retina 2x) installed, in order that for each output device always the right, required image is delivered out.
Unfortunately, always the largest is delivered out for every media.
Do you have a better guide for that.
The plugin does not seem to be the newest anymore.
Maybe it is no longer necessary nowadays?

Many thanks and kind regards

[mldarshana]

Hi There @McKnule

Thanks for writing in! Are you referring to the featured image in Blog posts for example? or you want to target every image in your site.

I can provide you one example for featured images, so that you can apply it to everywhere as you want.

For example, you can add a media query to target different device widths and then you can add CSS rules inside each query.

@media(max-width:768px){
  .entry-featured {
    width: 75%;
  }
}

@media(max-width:480px){
  .entry-featured {
    width: 50%;
  }
}

@media(max-width:320px){
  .entry-featured {
    width: 40%;
  }
}

You can add your custom CSS rules under X -> Theme Options -> CSS area and customize it according to your requirement.

Hope that helps.