响应式广告图片处理办法

1. 既要保持精度，又需要能快速加载。
2. 通过srcset来完成，需要考虑的是在手机上需要通过基于dpi的图像密度x来区分加载，而在pc时则用width来区分。
3. 直接利用img很难兼顾, 需利用picture。

<picture>
            <source srcset="/images/banner_md_1x.jpg 1x,/images/banner_md_2x.jpg 2x,/images/banner_md_3x.jpg 3x" media="(max-width: 767.98px)" />
            <source srcset="/images/banner_xl.jpg" media="(max-width: 1199.98px)" />
            <img class="bgImage" src="/images/banner.jpg" />
            </picture>
            

后端处理代码示例(原图1920*710

const formats  = {
             'xl': '1200',
            'md_1x': '375!179!right',
            'md_2x': '750!358!right',
            'md_3x': '1125!537!right'
            }