# Use Responsive Images

The `picture` snippet handles srcset and responsive sizing automatically — pass `mobile_width` and `desktop_width` instead of manual srcset.

```liquid
{% comment %} BAD: manual srcset {% endcomment %}
<img
  src="{{ image | image_url: width: 800 }}"
  srcset="
    {{ image | image_url: width: 400 }} 400w,
    {{ image | image_url: width: 800 }} 800w,
    {{ image | image_url: width: 1200 }} 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ image.alt }}"
>

{% comment %} GOOD: picture snippet with responsive widths {% endcomment %}
{%- render 'picture', image: section.settings.image, mobile_width: 768, desktop_width: 1440 -%}
```

### Sizing Guidelines

| Context         | `mobile_width` | `desktop_width` |
| --------------- | -------------- | --------------- |
| Full-width hero | 768            | 1920            |
| Card image      | 400            | 600             |
| Thumbnail       | 200            | 300             |
| Product gallery | 500            | 800             |