[Shopify] How to adjust the image size of the img_url tag with liquid

Hello there, this is EC Penguin!

To manage an online store, image management is one of the most important factor. However, don't you have any experience struggling with image display quality or size?

Something like "I want make image size smaller", or "the image is not in the flame!". I see a lot of people stressed out with this.

So now we will try to remove that stress by explaining how Shopify image size works and how we can customize it!

What is Shopify img tag?

We start with what img tag is. If you already know this, you can just proceed to the next step.

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

The place to use this is in the liquid file. Specifically where you want to insert the image.

By the way,

  {{ 'shopify-logo.png' | asset_img_url: '300x300' }}  

This code,,,

 //cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x300.png?42 

will be like this.（Shopify Officialdocs）

To use it,
【first part】state the image url,
【last part】 we need to add img_url size.

But this size statement like medium, large, grande（so much like Starbucks）, it's so vague. We have no idea how big each size is, so we have decided to summarize it.

img_url size summary

So here comes today's main.Summary of img_url sizes.

Therefore,

For example, if you use 'large' then 480px × 480px image will be outputted.

How to modify img_url image size

So next we will change the image size to whatever px size you want.

For example, it's not possible to cover all size in above default values. What if you want to change you want to change your image size to width 213px and height 123px?

In that case, lets customize the size as you want.

To edit image size output is here.

For example,,,

do like that.Width 213px, Height 123px.

If you state width as 213px then height will be auto edited.

On the other hand, if you state height as 123px, then width will be ato edited.

I think that's so convenient !

A bit of plus utilization of liquid

One last thing that you might use in the future using liquid img tag.

align image using crop

Sometimes image doesn't fit in frame size you stated.

I want make the image align more left. Then it's possible to do that by using "crop". It's like background-position in CSS.

And this is how it works.

 {{ product.featured_image | img_url: '450x450', crop: 'center' }} 

After using comma, state crop + "how you want to align".

Available choices are below..

• top
• center
• bottom
• left
• right

five of them,

Zoom the image with scale

In addition to that, to change the display size of an image. To double the size of image, suppose to make 450px×450px image to 900px×900px image you can just double the size. and Liquid can do that quite easily.（Well if you say you can just double it and state the size with 900px×900px, then you can actually do that as well. haha）

In order to do that

{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2 }}

and set the scale like "scale: 2".

By the way, it doesn't work like 100 times bigger.

• 2
• 3

It only works with double and triple using 2 and 3.

How to change Shopify image size SUMMARY

So that's all for today.

If you have came to this article, then you might have some problem about editing image sizes in Shopify. I hope some problem was solved in this article. And let me know in the comment if you still have problem.

Thank you for reading, and have a nice day!