Background on Retins

I have retina support for images.

'page-banner 2x' => array(
        'desktop' => array(
            array(1800, 862, true),
            'picture' => '<source srcset="{src}"  media="(min-width: 1441px)">',
            'bg' => '@media (min-width:1441px)',
            'bg_retina' => '@media (min-width:1441px) and {dpr}, (min-width:1441px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 1441px) {w}px',
        ),
        'laptop' => array(
            array(1360, 720, true),
            'picture' => '<source srcset="{src}" media="(min-width: 769px)">',
            'bg' => '@media (min-width: 769px)',
            'bg_retina' => '@media (min-width: 769px) and {dpr}, (min-width: 769px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 769px) {w}px',
        ),
        'tablet' => array(
            array(768, 746, true),
            'picture' => '<source srcset="{src}" media="(min-width: 361px)">',
            'bg' => '@media (min-width: 361px)',
            'bg_retina' => '@media (min-width: 361px) and {dpr}, (min-width: 361px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 361px) {w}px',
        ),
        'mobile' => array(
            array(360, 579, true),
            'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
            'bg' => '',
            'bg_retina' => '@media {dpr}, {min_res}',
            'srcset' => '{w}w',
            'sizes' => '{w}px',
        )
    ),

When I’m uploading 2x image for that it has dimensions like 3600 × 1724. But on Retina display it shows me ordinary desktop image like:
background-image: url(https://mysite/wp-content/uploads/2018/08/group@2x-1800×862.jpg);
In some way it does not use image that I’ve upload. What should I do?

• This topic was modified 6 years, 6 months ago by MaxwellF.