IMAGE FILTERS

url_asset

The url_asset filter transforms a relative asset URL into an absolute asset URL.

{{ 'stylesheet.css' | url_asset }}

Output:

http://assets.webshopapp.com/your-shopdomain/stylesheet.css?1

url_image

The url_image filter transforms an image ID into an absolute image URL.

{{ product.image | url_image }}

URL_IMAGE METHODS

The url_image filter takes two optional arguments to adjust some settings.

The first argument: WIDTH x HEIGHT x RESIZE METHOD

There are 4 resize methods to create different image sizes.

RESIZE METHOD 1 (FILL): RESIZES AND CROPS THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('400x250x1') }}

RESIZE METHOD 2 (FIT): RESIZES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('400x250x2') }}

RESIZE METHOD 3 (FIT): RESIZES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS AND REMOVES WHITE SPACE.

{{ product.image | url_image('400x250x3') }}

RESIZE METHOD 4 (EXACT): STRETCHES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('300x150x4') }}

The second argument can be used for generating a SEO friendly URL:

{{ product.image | url_image('200x200x1', product.title) }}

Output:

http://cdn.webshopapp.com/i/zzhmyv/200x200x1/seo-friendly-product-title.jpg

IMAGE DIMENSIONS & COMPRESSION

As of March 11th 2019..

You are able to upload images up to 5128px x 5128px

Images uploaded larger than aforementioned limits will be resized to 5128x5128 with no additional compression.

• Calling thumbnail images is possible up to 5128px
• You can use the value 'original' in the image filter to call in the original image size (up to max dimensions).  E.g: url_image('original', product.fulltitle)
• When using the image filter without a value, the return will be an image thumbnail of 2048x2048 in order to be backward compatible. The image will not be stretched.

Images are compressed in the following manner:

• GIF - No compression
• PNGs - 10% compression at all sizes smaller than the original image size
• JPG* - see table
  

Important: if you upload a PNG or GIF and inspect the code delivering the image, it will appear in the storefront as if the image extension is still ‘.jpg’. This has no impact in any way including SEO.