# Lazy Load Images

The `picture` snippet defaults to `loading: 'lazy'` — no extra work needed for below-the-fold images.

```liquid
{% comment %} BAD: raw <img> without lazy loading {% endcomment %}
<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}">

{% comment %} GOOD: picture snippet (lazy by default) {% endcomment %}
{%- render 'picture', image: section.settings.image, mobile_width: 768, desktop_width: 1440 -%}
```

For hero images (above the fold), pass `loading: 'eager'`:

```liquid
{%- render 'picture',
  image: section.settings.image,
  mobile_width: 768,
  desktop_width: 1920,
  loading: 'eager'
-%}
```