From Shopify Wiki

Syntax:

product_img_url(url, style = 'small')

This filter takes a url with a product's picture filename and returns the full path of it. It takes an optional second parameter to set its size and returns the url of the small sized version of the image by default.

Image sizes

• pico (16x16) ex.

  {{ product.featured_image | product_img_url: 'pico' }}

• icon (32x32) ex.

  {{ product.featured_image | product_img_url: 'icon' }}

• thumb (50x50) ex.

  {{ product.featured_image | product_img_url: 'thumb' }}

• small (100x100) ex.

  {{ product.featured_image | product_img_url: 'small' }}

• compact (160x160) ex.

  {{ product.featured_image | product_img_url: 'compact' }}

• medium (240x240) ex.

  {{ product.featured_image | product_img_url: 'medium' }}

• large (480x480) ex.

  {{ product.featured_image | product_img_url: 'large' }}

• grande (600x600) ex.

  {{ product.featured_image | product_img_url: 'grande' }}

• original - (1024x1024) (Depreciated Please do not use this in creating your themes) original now returns _1024x1024 appended to the image file name.
• 1024x1024 (1024x1024) ex.

  {{ product.featured_image | product_img_url: '1024x1024' }}

• 2048x2048 (2048x2048) ex.

  {{ product.featured_image | product_img_url: '2048x2048' }}

• master The new Master size will always track the largest size available from the server. Currently this is 2048px X 2048px. ex.

  {{ product.featured_image | product_img_url: 'master' }}

Resizing

Note: The values in brackets specify the _maximum_ bounds of that image size. It does not mean that the picture of the resulting url will have that exact size since all pictures in Shopify keep their aspect ratio. So it might be that a medium picture has a width of 240px but only a height of 190px and likewise a height of 240px but only a width of 80px.

Take note that the original image will never be scaled up. If you upload a tiny image, it will remain tiny, that is, it will keep the same size as the original size in the 'large' and 'grande' sizes.

Example

The following example displays a product's featured image in the size of a thumbnail and also sets a link to that product's detail page.

<a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: 'thumb' }}" /></a>

Using thumbnails in your content

To post links to images from the admin section, you simply append the size to the end of the filename like so:

• uploaded_image_pico.jpg
• uploaded_image_icon.jpg
• uploaded_image_thumb.jpg
• uploaded_image_small.jpg
• uploaded_image_compact.jpg
• uploaded_image_medium.jpg
• uploaded_image_large.jpg
• uploaded_image_grande.jpg
• uploaded_image eliminate suffix for original image.