srcset Filter

Generates a srcset attribute for an image resized with Fastly, such as an item or category image.

<img
	{{ item.images[0].absolute_url|srcset }}
	{{ {breakpoints:[600, 1200], sizes:[320, 640, 1280]}|sizes }}
	src="{{ item.images[0].absolute_url }}"
/>

The default srcset widths are 80, 160, 320, 640, and 1280. You can override the default by passing in an array of sizes to the filter:

{{ item.images[0].absolute_url|srcset(100, 250, 750, 1250) }}

The sizes filter takes an object containing arrays of breakpoints and sizes. You can omit either of both properties to use the defaults. The default breakpoints are 599, 839, 1199, 1599. The default sizes are 600, 900, 1200, 1200, 1200.

Best practice is to put your breakpoints and sizes in a config file. For example:

theme/config/styles.json

{
	"breakpoints": [600, 900, 1200],
	"featured_image_sizes": [320, 640, 900, 900],
	"tile_image_sizes": [100, 500, 1200, 1600]
}

Code

<div class="featured-image">
	<img
		{{ item.images[0].absolute_url|srcset }}
		{{ {breakpoints:config.styles.breakpoints, sizes:config.styles.featured_image_sizes}|sizes }}
		src="{{ item.images[0].absolute_url }}"
	/>
</div>

<div class="tile">
	<img
		{{ item.images[0].absolute_url|srcset }}
		{{ {breakpoints:config.styles.breakpoints, sizes:config.styles.tile_image_sizes}|sizes }}
		src="{{ item.images[0].absolute_url }}"
	/>
</div>