Shopify theme optimization notes

November 22, 2021

Liquid Whitespace

{%- -%} entfernt Whitespace links und rechts vom Tag. Praktisch fuer sauberen HTML Output.

Alt Text

Alt Text sollte immer escaped werden:

code

<img alt="{{ variant.image.alt | escape }}" />

`image_url` statt `img_url`

img_url ist deprecated. Nutze image_url:

Responsive Images

Wichtig:

srcset sollte nur Groessen enthalten, die das Bild auch wirklich hat
sizes muss zu den srcset Breiten passen

Beispiel (gekuerzt):

code

<img
  alt="{{ image.alt | escape }}"
  src="{{ image | image_url: width: 1100 }}"
  srcset="
    {%- if image.width >= 480 -%}{{ image | image_url: width: 480 }} 480w,{%- endif -%}
    {%- if image.width >= 800 -%}{{ image | image_url: width: 800 }} 800w,{%- endif -%}
    {%- if image.width >= 1100 -%}{{ image | image_url: width: 1100 }} 1100w,{%- endif -%}
    {{ image | image_url: width: image.width }} {{ image.width }}w"
  sizes="(min-width: 750px) 1100px, 100vw"
  loading="lazy"
/>

`<img>` vs `<picture>`

<img> reicht oft aus (auch mit loading="lazy")
<picture> ist sinnvoll, wenn du verschiedene Formate oder media queries brauchst

devicePixelRatio (DPR)

High-DPI Displays laden groessere Bilder. Wenn du in DevTools eine groessere Quelle siehst, liegt das oft an DPR (z.B. 2 oder 3).

Mehr dazu: https://medium.com/@peternowell/pixel-density-demystified-a4db63ba2922