Samiksha Hiwase | 8 Min Read | July 8, 2020

How to Specify Image Dimensions for Shopify Images

1. Quickread

Images are major and special aspects of your store. Imagine if your store does not contain any images or having only 2-3 images but not in proper size. As a result, the loading speed of your store becomes slow. This will totally affect your new users, regular customers as well as on total sales.
Probably one of the most important aspects of any Shopify store is product photography. You can use the best product images for your store. Shopify has added the img_url filter to market your product in the best possible way.
In this blog, you will learn about how to use the img_url filter and parameters that allow you to manipulate images within Shopify in new and exciting ways,what are the total best Shopify image sizes, and how many ways you can define the image dimensions for your Shopify images.

2. Does size really matter?

Yes, size matters for the Shopify image sizes. When you open the web store, think for two min where your focus is drawn. You will observe the biggest and prettiest picture on the screen grab your attention.
There are some effects of image sizes that are not even visible to the naked eye.
The 3 pieces of the image size are:-
  • Space that images take on the screen
  • Dimensions and pixel number of the images
  • File sizes of the images
These elements affect how visitors view your store, the quality of images you provide, and even the loading speed of the pages. Remember you have to make sure you are using the right image sizes, so all visitors get attracted to your store.
At the same time, do not use images that take up too much space or slow the loading time of your pages. Your pages look neat and tidy if your Shopify image sizes are consistent.

3. What are the Best Shopify Image Sizes?

The maximum image size is 4472 x 4472 pixels, which can come in the form of a file size up to 20 MB.
If you want to keep a great balance between high quality and great compression for fast loading speeds then use JPG file format for Shopify images. You can also use PNG images with higher image quality and have large file sizes that may slow down your site.
You can observe many stores are using product images to sell more. But you should utilize the highest resolution images without sacrificing the quality of images in your store. You may begin losing sales quickly if the speed of your site gets slow.
However, a 100-millisecond delay in site loading times could cause conversion rates to drop by 7%.
Shopify recommends using 2048 x 2048 pixels for square product photos on your site.
These images are of high resolution, give a professional look to your store, and help to sell more. It will have exceptional zooming capabilities because of high pixel counting.

4. Know about the IMG_URL

If you want the img_url should return the URL of the image then assign the size parameter to it. Because the img_url and all its variants are used as a liquid filter in the Shopify.
The img_urls available in Shopify and can be used with the following Shopify objects:
  • Product
  • Variant
  • Line item
  • Collection
  • Article
  • Image
Here’s a simple example
{{ product.featured_image | img_url: ‘100×100’ }}
In this example, the img_url has a parameter of 100×100. Simply it means you can specify exact dimensions in pixels for the width and height of the image.

5. What are the new parameters?

Shopify had new parameters to the img_url. More specifically to the product_img_url,
collection_img_url, and the article_img_url.
These new parameters are:
  • Size
  • Crop
  • Scale
  • Format

The Size Parameter

Setting the Both Pixel Value
You can choose any size and set the exact pixel value. So, the syntax will be:
{{ product.featured_image | img_url: ‘420×420’ }}
In this way, you can specify the exact dimensions in pixels to the width and height of the image. Keep the values up to a maximum of 4472×4472.
The format of the pixel is width x height. In case you do not give any image size, the filter returns a small (100×100) image.
You think that the 420×420 version of your image is delivered but it is not always happening. This request will get successfully fulfilled only if the following conditions are met.
The conditions are:-
  • The original image is of 420px or greater
  • Both sides are of the same length.
If these conditions are true then a 420×420 square image will be delivered. If not, Shopify will resize it using the same logic but if you specified only height or width. Then an image will get the longest side.

Setting the only One Pixel Value

You can also set only one-pixel value either the width by ‘650x’ or set the height by ‘x650’.
If only one dimension is chosen. Then to maintain the correct aspect ratio of the photo, Shopify calculates the other value.
Shopify will make a calculation to maintain the aspect ratio if you specify both dimensions like ‘650×650’ and the photo is not equal on both sides.
{{ product.featured_image | img_url: ‘650x’ }}

Using Named Size Value

Shopify has offered a specific set of sizes for use with the img_url filter. These are as follows:
Name Size
pico 16 X 16
icon 32 X 32
thumb 50 X 50
small 100 X 100
compact 160 X 160
medium 240 X 240
large 480 X 480
grande 600 X 600
1024 X 1024 1024 X 1024
2048 X 2048 2048 X 2048
master largest image
Operate a named size as a parameter for img_url instead of using a numeric value for image size. You can take a look at a name, such as grande instead of a specific pixel range.
src=”{{ featured_image | img_url: ‘grande’ }}”

The Crop Parameter

Specify a crop parameter but ensure that the resulting dimensions of the image match the requested dimensions. Therefore, you do not need to upload the perfect square image.
If the full image will not get fit in your requested dimensions, the crop parameter will specify which part of the image to display.
Options are:-
  • Left
  • Right
  • Top
  • Center
  • Bottom
The code will look like this:-
{{ product.featured_image | img_url: ‘550×550’, crop: ‘center’ }}

The Scale Parameter

Shopify provides the option of altering the pixel density with the scale. This parameter takes two values:-
  • 2
  • 3
You can simply add the value as another argument to the img_url as follows:
{ product.featured_image | img_url: ‘720×720’, crop: ‘center’, scale: 2 }}
This will result in a resized image of 1440×1440 pixels. The original image is large enough, then the image can be taken for scaled up. The closest size of the image will be returned if it is not big in size.

The Format Parameter

The format parameter allows you to change the format of the image. It includes 3 possible conversions:
From To
PNG JPG
PNG PJPG
JPG PJPG
P in PJPG stands for, Progressive. This means that instead of loading a large image from top to bottom, it loads a full-sized image and progressively increases in quality.
For example:-
{{ product.featured_image | img_url: ‘450×450’, crop: ‘center’, scale: 2, format: ‘pjpg’ }}

6. How many ways you can define Image Dimension.

There are a total of three ways you can define the image dimension.
  • Directly using width and height tags.
    < img src=”picture.jpg” width=”400″ height=”300″ / >
  • To specify the image dimensions in an Inline CSS you will required to add the following line:
    < img style=”width: 400px; height: 300px;” src=” picture.jpg” / >
  • If you want to specify the image dimensions in an external CSS then the code will be:
    #picture.jpg { width: 400px; height: 300px; }

For Further Details or Additional Information

OR

If you want to know more about our Services