Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Pokidov N. Dmitry dooman87

🎯
Focusing
View GitHub Profile
View gist:4552a5bc8441ced44121241b10ce37ab
https://pixboost.com/api/2/img/https://s3-ap-southeast-2.amazonaws.com/bucket-with-images/image.png/optimise?auth=apikey
View bucket-policy.json
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::<ACCOUNT_ID>:user/<USER_ID>"
},
"Action": "s3:ListBucket",
"Resource": "arn:aws:s3:::<BUCKET_NAME>"
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>
You can’t perform that action at this time.