PB Responsive Images
[resolved] Retina / High DPI Displays (4 posts)

  1. jloft
    Posted 3 years ago #

    I would like to learn how to use the PB Responsive Images plugin to display alternate images for Retina / High DPI displays.


  2. Jacob Dunn
    Plugin Author

    Posted 3 years ago #

    That's the very thing this plugin was built for! You provide media queries for the image resizes in the same way you do for stylesheets. From the contextual help:

    (min-width:420px) and (min-device-pixel-ratio:2)

    The above query matches any retina display (2x pixel density) device with a minimum browser width of 420px. Additionally, the min-device-pixel-ratio query will automatically have vendor prefixes applied to it.

    All you have to do is make sure your original image is sized correctly for retina, and this plugin will take care of sizing it down for all other resolutions and sizes.

    Hope that helps!

  3. jloft
    Posted 3 years ago #

    Aha! Thank you. I was overlooking that I could insert something like (min-device-pixel-ratio:2) in the "media" field.

  4. Jacob Dunn
    Plugin Author

    Posted 3 years ago #

    Glad I could help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • PB Responsive Images
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic