Image preloader section for Shopify themes

image-preloader.liquid

<!--
  Section is added above the header section (in the customiser) AND 
  {% section 'image-preloader' %} is also added in the theme.liquid file just above the </head> tag.
-->

{% comment %} Product Page {% endcomment %}
{%- if section.settings.main_product -%}
    {%- if template.name == 'product' and product -%}
        {%- assign image = product.featured_image -%}
        <link 
            rel="preload" 
            as="image" 
            href="{{ image | image_url: width: 1500 }}" 
            imagessrcset="
                {{ image | image_url: width: 165 }} 165w, 
                {{ image | image_url: width: 360 }} 360w, 
                {{ image | image_url: width: 535 }} 535w, 
                {{ image | image_url: width: 750 }} 750w, 
                {{ image | image_url: width: 1100 }} 1100w, 
                {{ image | image_url: width: 1500 }} 1500w" 
            imagesizes="(min-width: 1600px) 675px, (min-width: 990px) calc(45.0vw - 10rem), (min-width: 750px) calc((100vw - 10rem) / 2), calc(100vw - 3rem)"
        >
        {%- for media in product.media -%}
            {%- unless media == product.featured_image -%}
                {%- if media.media_type == "image" -%}
                    {%- capture sizes -%}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 14rem) / 3){%- endcapture -%}
                    <link
                        rel="preload"
                        as="image"
                        imagesrcset="
                            {{ media.preview_image | image_url: width: 54 }} 54w, 
                            {{ media.preview_image | image_url: width: 74 }} 74w, 
                            {{ media.preview_image | image_url: width: 162 }} 162w, 
                            {{ media.preview_image | image_url: width: 208 }} 208w, 
                            {{ media.preview_image | image_url: width: 324 }} 324w, 
                            {{ media.preview_image | image_url: width: 416 }} 416w
                        href="{{ media.preview_image | image_url: width: 416 }}"
                        imagesizes="{{ sizes }}"
                    />
                {%- endif -%}
            {%- endunless -%}
        {%- endfor -%}
    {%- endif -%}
{%- endif -%}

{% comment %} Collection Page {% endcomment %}
{%- if section.settings.collection_page -%}
    {%- if template.name == 'collection' and collection -%}
          <link 
            rel="preload" 
            as="image" 
            href="{{ collection.image | image_url: width: 3840 }}" 
            imagessrcset="
                {{ collection.image | image_url: width: 375 }} 375w,
                {{ collection.image | image_url: width: 750 }} 750w,
                {{ collection.image | image_url: width: 1100 }} 1100w,
                {{ collection.image | image_url: width: 1500 }} 1500w,
                {{ collection.image | image_url: width: 1780 }} 1780w,
                {{ collection.image | image_url: width: 2000 }} 2000w,
                {{ collection.image | image_url: width: 3000 }} 3000w,
                {{ collection.image | image_url: width: 3840 }} 3840w
            " 
            imagesizes="100vw"
        >

        {%- for product in collection.products limit: 4 -%}  
            {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 10rem) / 4), (min-width: 750px) calc((100vw - 10rem) / 3), calc(100vw - 3rem){%- endcapture -%}
            <link
                rel="preload"
                as="image"
                imagesrcset="
                    {{ product.featured_media.preview_image | image_url: width: 165 }} 165w, 
                    {{ product.featured_media.preview_image | image_url: width: 360 }} 360w, 
                    {{ product.featured_media.preview_image | image_url: width: 535 }} 535w, 
                    {{ product.featured_media.preview_image | image_url: width: 750 }} 750w, 
                    {{ product.featured_media.preview_image | image_url: width: 940 }} 940w, 
                    {{ product.featured_media.preview_image | image_url: width: 1100 }} 1100w"
                href="{{ product.featured_media.preview_image | image_url: width: 1100 }}"
                imagesizes="{{ sizes }}"
            />
        {%- endfor -%}

    {%- endif -%}
{%- endif -%}

{% comment %} Blog Page {% endcomment %}
{%- if section.settings.blog_page -%}
    {%- if template.name == 'blog' and blog -%}
        {%- for article in blog.articles limit: 6 -%}  
            {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 10rem) / 2), calc(100vw - 3rem){%- endcapture -%}
            <link
                rel="preload"
                as="image"
                imagesrcset="
                    {{ article.image | image_url: width: 165 }} 165w, 
                    {{ article.image | image_url: width: 360 }} 360w, 
                    {{ article.image | image_url: width: 535 }} 535w, 
                    {{ article.image | image_url: width: 1100 }} 1100w,
                    {{ article.image | image_url: width: 1500 }} 1500w"
                href="{{ article.image | image_url: width: 1500 }}"
                imagesizes="{{ sizes }}"
            />
        {%- endfor -%}

    {%- endif -%}
{%- endif -%}

{% comment %} Article Page {% endcomment %}
{%- if section.settings.article_page -%}
    {%- if template.name == 'article' and article -%}
        {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{%- endcapture -%}
        <link
            rel="preload"
            as="image"
            imagesrcset="
                {{ article.image | image_url: width: 375 }} 375w, 
                {{ article.image | image_url: width: 750 }} 750w, 
                {{ article.image | image_url: width: 1100 }} 1100w, 
                {{ article.image | image_url: width: 1500 }} 1500w,
                {{ article.image | image_url: width: 1780 }} 1780w,
                {{ article.image | image_url: width: 2000 }} 2000w,
                {{ article.image | image_url: width: 3000 }} 3000w,
                "
            href="{{ article.image | image_url: width: 3000 }}"
            imagesizes="{{ sizes }}"
        />
    {%- endif -%}
{%- endif -%}

{% comment %}Other Images{% endcomment %}
{%- if section.blocks.size > 0 and template.name == "index" -%}
    {%- for block in section.blocks -%}
        {% assign width = block.settings.width %}
        {% assign sizes = block.settings.sizes %}
        {% assign widths = block.settings.widths | strip | split: ',' %}
        <link
            rel="preload"
            as="image"
            imagesrcset="
                {% for width in widths %}
                    {{ block.settings.image | image_url: width: width }} {{ width }}w{% unless forloop.last %},{% endunless %}
                {% endfor %}
                "
            href="{{ block.settings.image | image_url: width: width }}"
            imagesizes="{{ sizes }}"
        />
    {%- endfor -%}
{%- endif -%}

{% schema %}
{
    "name" : "Preloaded Images",
    "settings" : [
        {
            "type" : "header",
            "content" : "Preload any images from these sections"
        },
        {
            "type" : "checkbox",
            "id" : "main_product",
            "label" : "Main Product section",
            "default" : true
        },
        {
            "type" : "checkbox",
            "id" : "collection_page",
            "label" : "Collection page",
            "info" : "First row (first 4 images) of collection plus the banner",
            "default" : true
        },
        {
            "type" : "checkbox",
            "id" : "blog_page",
            "label" : "Blog Posts Section on the blog page",
            "info" : "First 2 rows (first 6 images) of blog posts (but only on the blog template)",
            "default" : true
        },
        {
            "type" : "checkbox",
            "id" : "article_page",
            "label" : "Blog post section on the Article page",
            "info" : "Applies only to the featured article image, not the images within the article content",
            "default" : true
        }
    ],
    "blocks" : [
        {
            "type" : "image",
            "name" : "Homepage Image",
            "settings" : [
                {
                    "type" : "image_picker",
                    "id" : "image",
                    "label" : "Image",
                    "info" : "The image you select here will be preloaded"
                },
                {
                    "type" : "number",
                    "id" : "width",
                    "label" : "Source width"
                },
                {
                    "type" : "text",
                    "id" : "widths",
                    "label" : "Widths (Comma-separated)"
                },
                {
                    "type" : "text",
                    "id" : "sizes",
                    "label" : "Sizes"
                }
            ]
        }
    ]
}
{% endschema %}