WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. jloft
    Member
    Posted 1 year ago #

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

    http://wordpress.org/extend/plugins/pb-responsive-images/

  2. Jacob Dunn
    Member
    Plugin Author

    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Plugin Author

    Posted 1 year ago #

    Glad I could help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic