4. Generated code samples

Configuration array sample:

return array(
        'rwd 2x' => array(
                'desktop' => array(
                        array( 1920, 9999 ),
                        'picture'   => '<source srcset="{src}" media="(min-width: 1281px)">',
                        'bg'        => '@media (min-width:1281px)',
                        'bg_retina' => '@media (min-width:1281px) and {dpr}, (min-width:1281px) and {min_res}',
                        'srcset'    => '{w}w',
                        'sizes'     => '(min-width: 1281px) {w}px',
                ),
                'laptop' => array(
                        array( 1280, 9999 ),
                        'picture'   => '<source srcset="{src}" media="(min-width: 981px)">',
                        'bg'        => '@media (min-width: 981px) ',
                        'bg_retina' => '@media (min-width: 981px) and {dpr}, (min-width: 981px) and {min_res}',
                        'srcset'    => '{w}w',
                        'sizes'     => '(min-width: 981px) {w}px',
                ),
                'tablet' => array(
                        array( 980, 9999 ),
                        'picture'   => '<source srcset="{src}" media="(min-width: 415px)">',
                        'bg'        => '@media (min-width: 415px)',
                        'bg_retina' => '@media (min-width: 415px) and {dpr}, (min-width: 415px) and {min_res}',
                        'srcset'    => '{w}w',
                        'sizes'     => '(min-width: 415px) {w}px',
                ),
                'mobile' => array(
                        array( 414, 9999 ),
                        'picture'   => '<img src="{single-src}" srcset="{src}" alt="{alt}">', // mobile-first strategy picture img.
                        'bg'        => '',                                                 // mobile-first strategy bg.
                        'bg_retina' => '@media {dpr}, {min_res}',
                        'srcset'    => '{w}w',
                        'sizes'     => '{w}px',
                ),
        ),
);

It can generate code similar to this one:

picture

<picture>
        <source srcset="image-desktop.jpg, image-desktop-2x.jpg 2x" media="(min-width: 1281px)"><!-- 1920px image!-->
        <source srcset="image-landscape.jpg, image-landscape-2x.jpg 2x" media="(min-width: 981px)"><!-- 1280px !-->
        <source srcset="image-tablet.jpg, image-tablet-2x.jpg 2x" media="(min-width: 415px)"><!-- 980px image!-->
        <img srcset="image-mobile.jpg, image-mobile-2x.jpg 2x" alt="test"> <!-- 414px image!-->
</picture>

img

<img sizes="(min-width: 1281px) 1920px, (min-width: 981px) 1280px, (min-width: 415px) 980px, 414px"
     srcset="examples/images/medium.jpg 414w,
     examples/images/medium-2x.jpg 828w,
     examples/images/large.jpg 980w,
     examples/images/large-2x.jpg 1960w,
     examples/images/extralarge.jpg 1280w,
     examples/images/extralarge-2x.jpg 2560w,
     examples/images/desctop.jpg 1920w,
     examples/images/desctop-2x.jpg 3840w" alt="...">

background

<style type="text/css">
        /* rwd-background-styles */
        .article-bg {
                background-image: url('images/bg-mobile.jpg');
        }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
                .article-bg {
                        background-image: url('images/bg-mobile-2x.jpg');
                }
        }
        @media (min-width: 415px) {
                .article-bg {
                        background-image: url('images/bg-tablet.jpg');
                }
        }
        @media (min-width: 415px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 415px) and (min-resolution: 144dpi) {
                .article-bg {
                        background-image: url('images/bg-tablet-2x.jpg');
                }
        }
        @media (min-width: 981px) {
                .article-bg {
                        background-image: url('images/bg-laptop.jpg');
                }
        }
        @media (min-width: 981px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 981px) and (min-resolution: 144dpi) {
                .article-bg {
                        background-image: url('images/bg-laptop-2x.jpg');
                }
        }
</style>

Next: Live examples