Wp Responsive Data Image Wordpress Plugin is used by 3 websites. Among 3, 0 site is within top 10,000 and 0 site is within top 100,000 websites.

Wordpress Plugin Information of

Plugin Meta Name Plugin Meta Information
Plugin Name
Plugin Description Plugin allows using of responsive images ( element ) for different screen resolutions. Save bandwidth of your mobile users!
Detail Plugin Description

Plugin detects screen width and let browser render image file which is neccessary to use at the moment.

Activate Plugin and upload image files using WordPress Media Uploader. You can use four image variants, each variant name shoud be specifically renamed:

  • _image name_-small - for low-res screens ( for smartphones );
  • _image name_-med- for med-res screens ( for tablets );
  • _image name_ - for standart/normal resolution screens (nothing changed) ( for desktops );
  • _image name_-large - for high-res screens ( for high-res screens );

Define breakpoints using this script into the <head></head> tag of your header.php template:

<script>
    $(function() {
        $(".adapted").rdi({
            "mobile": 480,
            "tablet": 1024,
            "desktop": 1920
        });
    })
</script>

These are standart values replace them with yours.

Use RDI button while editing post/page to insert [rdi][/rdi] shortcode. Put standart/normal image path into the shortcode. You can align image with rdi-align attribute (by default image will be centered):

  • [rdi align="rdi-left"][/rdi] - align to the left;
  • [rdi align="rdi-right"][/rdi] - alight to the right.

That's all!

Shortcode will generate markup similar to this:

<a href="_path_">
    <img class="rdi-adapted" data-src="_path_">
</a>
<noscript>
    <a href="_path_">
        <img src="_path_">
    </a>
</noscript>

Attribute data-src contains standart/normal image path. Plugin uses this url for generating appropriate path to the necessary image file which should be used at the moment. If there's no appropriate file, browser will render standart/normal image. In case if JavaScript is disabled browser will use noscript img element which contains standart/normal image.

WP Responsive Data Image page (for more info)

More Information Wordpress Official Plugin Repository
Google

Top 3 Websites built with Wordpress plugin

Voci di Città | Giornale di notizie |
30,000,000 favicon of DIVINODESSERT.COM DIVINODESSERT.COM
DIVINO | Handcrafted Gelato Filled Fruit
30,000,000 favicon of UCSLQP.COM UCSLQP.COM
UCSLQP | Download Software Free