dooman87

<script type="text/javascript" 
        src="https://pixboost.com/libs/pixboost.bundle.min.js" 
        id="pb-script" data-api-key="YOUR_API_KEY" data-autoload="">
</script>

dooman87

Metric	Desktop	Mobile
On Content Load (ms)	4729 -> 3294	4995 -> 3299
On Load (ms)	5961 -> 4248	6800 -> 4240
Number of images	20 -> 8	20 -> 6
Images size (KB)	1586 -> 1062	1316 -> 679

dooman87

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width_pixels = 1120 | divided_by: 3 | minus: 30 -%}
      {%- assign product_image_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_image_width_pixels = 1120 | divided_by: 2 | minus: 30 -%}
      {%- assign product_image_width = 'medium-up--one-half' -%}

dooman87

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_image_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}

dooman87

{%- if image != blank -%}
    {% if image.width > 180 %}{% include 'pixboost' with image: image, size: '180x' %} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 360 %}{% include 'pixboost' with image: image, size: '360x' %} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 540 %}{% include 'pixboost' with image: image, size: '540x' %} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 720 %}{% include 'pixboost' with image: image, size: '720x' %} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 900 %}{% include 'pixboost' with image: image, size: '900x' %} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1080 %}{% include 'pixboost' with image: image, size: '1080x' %} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1296 %}{% include 'pixboost' with 

dooman87

{%- if image != blank -%}

    {%- if scale == blank -%}
        https://pixboost.com/api/2/img/{{image | img_url: size | url_encode }}/optimise?auth=MjMwNDUyNzk5MQ__
    {%- endif -%}

    {%- if scale != blank -%}
        https://pixboost.com/api/2/img/{{image | img_url: size, scale: scale | url_encode }}/optimise?auth=MjMwNDUyNzk5MQ__
    {%- endif -%}
{%- endif -%}

dooman87

{%- if image != blank -%}
    {% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_b

dooman87

<div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
     {% if section.settings.image %}
     data-bgset="{% include 'bgset', image: section.settings.image %}"
     data-sizes="auto"
     data-parent-fit="cover"
     style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
     {% endif %}>
</div>

dooman87

<script type="text/javascript" 
        src="https://pixboost.com/libs/pixboost.bundle.min.js" 
        id="pb-script" 
        data-autoload=""
        data-api-key="YOUR_API_KEY"></script>

dooman87

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