dooman87

<div data-pb-background
     data-lg="resize?size=x600"
     data-lg-url="http://www.midday.coffee/assets/banner-lg.jpg"
     data-md="resize?size=300"
     data-md-url="http://www.midday.coffee/assets/banner-md.jpg"
     data-sm="fit?size=100x100"
     data-sm-url="http://www.midday.coffee/assets/banner-sm.jpg"></div>

dooman87

<div data-pb-background=""
     data-url="http://www.midday.coffee/assets/banner.jpg"
     data-lg="optimise"
     data-md="resize?size=400"
     data-sm="fit?size=300x300"
     ></div>

dooman87

<div data-pb-background="" 
     data-url="http://www.midday.coffee/assets/banner.jpg"
     data-op="resize?size=x400"></div>

dooman87

	Desktop size	Desktop time	Mobile size	Mobile time
Original	78.4Kb	3.26 sec	78.4Kb	3.26 sec
Desktop Optimised	54.1Kb	2.18 sec	54.1Kb	2.18 sec
Mobile Optimised	54.1Kb	2.18 sec	28.7Kb	725 ms
Results	-31%	-34%	-64%	-88%

dooman87

	Desktop size	Desktop time	Mobile size	Mobile time
Original	78.4Kb	3.26 sec	78.4Kb	3.26 sec
Desktop Optimised	54.1Kb	2.18 sec	54.1Kb	2.18 sec
Mobile Optimised	54.1Kb	2.18 sec	28.7Kb	725 ms

dooman87

@media (max-width: 576px) {
  .banner {
    background-image: url('http://pixboost.com/api/2/img/http://www.midday.coffee/assets/banner.jpg/fit?size=576x400&auth=MTg4MjMxMzM3MA__');
    align-items: flex-start;
    height: 400px;
  }
}

dooman87

	Desktop size	Desktop time	Mobile size	Mobile time
Original	78.4Kb	3.26 sec	78.4Kb	3.26 sec
Desktop Optimised	54.1Kb	2.18 sec	54.1Kb	2.18 sec

dooman87

<style>
  .banner {
    background-image: url('http://pixboost.com/api/2/img/http://www.midday.coffee/assets/banner.jpg/optimise?auth=MTg4MjMxMzM3MA__');
    /* The rest of style properties are the same */
  }
</style>

dooman87

	Desktop size	Desktop time	Mobile size	Mobile time
Original	78.4Kb	3.26 sec	78.4Kb	3.26 sec

dooman87

<style>
  @media (max-width: 576px) {
    .banner {
      align-items: flex-start;
      height: 400px;
    }
  }
</style>