Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Pokidov N. Dmitry dooman87

🎯
Focusing
Block or report user

Report or block dooman87

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View pixboost-include.html
<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>
View perf-results-shopify.md
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
View product-template-pixboost.liquid
{% 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' -%}
View product-template.liquid
{% 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' -%}
View bgset-pixboost.liquid
{%- 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
View pixboost.liquid
{%- 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 -%}
View bgset.liquid
{%- 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
View hero-debut.html
<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>
View add-pixboost-js.html
<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>
View bg-lazy.html
<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>
You can’t perform that action at this time.