Troubleshooting Default Img Layouts

Since first launch there have been a few bug fixes to image layouts, but they would only have applied to new sites. This article explains how to apply those to your older sites retrospectively.

Written By Matt Jones

Last updated 1 day ago

Update your Layouts

If you’re experiencing trouble with using default image layouts on sites created before 25th Feb 2026, the first thing to try is updating the layout files to match the system defaults here. We don’t do this automatically in case you’ve already customised these layouts:

default/sm

Example
{% assign width = width | default: "200" | replace_regex: "[^\d]", "", "", true | plus: 0 | downcase %}

{% capture options %}format=auto,width={{width}},fit=scale-down{% endcapture %}
{% capture high_res_options %}format=auto,width={{width | times: 2}},fit=scale-down{% endcapture %}
{% capture highest_res_options %}format=auto,width={{width | times: 4}},fit=scale-down{% endcapture %}
{% comment %} Note - do not accidentally leave newlines inside any of the HTML attributes. {% endcomment %}
<img {% if alt != blank %}alt="{{alt}}"{% endif %} {{attributes | default: 'loading="lazy"'}} class="{{classes}}"
  src="{% render "img_url", path: path, options: options %}"
  srcset="{%- render "img_url", path: path, options: options -%} 1x,{%- render "img_url", path: path, options: high_res_options -%} 2x,{%- render "img_url", path: path, options: highest_res_options -%} 3x"
/>

default/base

Example
{% comment %} Optimised for responsive images up to a max-width, on smaller screens the image will be full-width {% endcomment %}
{% comment %} Note - do not accidentally leave newlines inside any of the HTML attributes. {% endcomment %}
{% assign max_width = width | default: "640" | replace_regex: "[^\d]", "", "", true | plus: 0 | downcase %}
<img {{attributes | default: 'loading="lazy"'}}  {% if alt != blank %}alt="{{alt}}"{% endif %} class="{{classes}}"
  style="max-width: {{max_width}}px"
  src="{% render "img_url", path: path, options: 'format=auto' %}" sizes="(max-width: {{max_width}}px) 100vw, {{max_width}}px"
  srcset="{%- render "img_url", path: path, options: 'format=auto,width=320,fit=scale-down' -%} 320w,{%- render "img_url", path: path, options: 'format=auto,width=640,fit=scale-down' -%} 640w,{%- render "img_url", path: path, options: 'format=auto,width=1280,fit=scale-down' -%} 1280w,{%- render "img_url", path: path, options: 'format=auto,width=2560,fit=scale-down' -%} 2560w"
/>

default/lg

Example
{% comment %} Optimised for responsive images for the full width of the screen. No width argument accepted {% endcomment %}
{% comment %} Note - do not accidentally leave newlines inside any of the HTML attributes. {% endcomment %}
<img {{attributes | default: 'loading="lazy"'}} {% if alt != blank %}alt="{{alt}}"{% endif %} class="{{classes}}"
  width="100%"
  src="{%- render "img_url", path: path, options: 'format=auto' %}"
  srcset="{%- render "img_url", path: path, options: 'format=auto,width=320,fit=scale-down' -%} 320w,{%- render "img_url", path: path, options: 'format=auto,width=640,fit=scale-down' -%} 640w,{%- render "img_url", path: path, options: 'format=auto,width=1280,fit=scale-down' -%} 1280w,{%- render "img_url", path: path, options: 'format=auto,width=2560,fit=scale-down' -%} 2560w"
/>

default/sm_bg

Example
{% assign width = width | default: "1800" | replace_regex: "[^\d]", "", "", true | plus: 0 | downcase %}
{% capture options %}format=auto,width={{width}},fit=scale-down{% endcapture %}
{% capture high_res_options %}format=auto,width={{width | times: 2}},fit=scale-down{% endcapture %}
{% comment %} Note - do not accidentally leave newlines inside any of the HTML attributes. {% endcomment %}
<div {{attributes}} class="{{classes}}" style="background-repeat: no-repeat; background-image: image-set(url('{% render "img_url", path: path, options: options %}') 1x,url('{% render "img_url", path: path, options: high_res_options %}') 2x);"></div>