> For the complete documentation index, see [llms.txt](https://sprocket-rocket.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sprocket-rocket.gitbook.io/project/code-patterns/responsive-images.md).

# Responsive Images

### JSON

```markup
{
	"default": {
		"src": "https://www.lean-labs.com/hubfs/sr-assets/pattern-library/sr-bling-graphic-01/sr-bling-graphic-01.jpg",
		"alt": "Describe your image",
		"width": "900",
		"height": "600"
	},
	"label": "Image",
	"name": "bling_image",
	"type": "image",
	"help_text": "Recommended size: 900x600px"
},
{
	"default": true,
	"label": "SR Default Image Size",
	"name": "sr_default_image_size",
	"type": "boolean"
}
```

{% hint style="info" %}
**Note:** Background images do not require the "SR Default Image Size" boolean.
{% endhint %}

### Using Images in Modules / Templates

Format: `{{ var.image(src, width, alt) }}` where `width` is the 1x image size for large screens in pixels.

```markup

{% if module.sr_default_image_size %}
	{{ var.image(module.bling_image.src, '600', module.bling_image.alt) }}
{% else %}
	{{ var.image(module.bling_image.src, module.bling_image.width, module.bling_image.alt) }}
{% endif %}

```

### Using Background Images in CSS

Format: `{{ var.bg_image(src, width) }}` where the first instance of  `width` is the 1x image size for small screens in pixels and the second one for large screens.

```css
.{{ name }} {
	{{ var.bg_image(module.background_image.src, '600') }}
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
@media (min-width: 768px) {
	.{{ name }} {
		{{ var.bg_image(module.background_image.src, '1440') }}
	}
}
```