Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Dmitry N. Pokidov dooman87

🎯
Focusing
View GitHub Profile
View image-cdn.html
<img src="https://pixboost.com/yoursite.com/hero-banner.jpeg?optimise?auth=your-api-key"
alt="Superhero rescues the World"/>
View current-image.html
<img src="/hero-banner.jpeg" alt="Superhero rescues the World"/>
View use-avif-image-cdn.html
<img src="img/supercar.jpeg" alt="Fast red car"/>
View use-avif.html
<picture>
<source srcset="supercar.avif" type="image/avif">
<source srcset="supercar.webp" type="image/webp">
<img src="supercar.jpeg" alt="Fast red car"/>
</picture>
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' -%}