How to Specify Image Dimensions for Shopify Images

1. QuickRead

Images are important and special aspects of your Shopify store. They can make or break a visitor’s impression, which has an impact on your overall conversions and sales. If the images on your store are not optimized you may encounter slow loading speeds which in turn hamper the user experience.

You can use the best product images for your store to draw online and Shopify has this image related img_url filter implementation approach to help you code in a way to get maximum out of your products.

Img_url allows you to handle images smartly across the pages where the same image with different dimensions are needed.

Understanding the recommended sizes for a specific webpage or section, along with utilizing the img_url tag, can be invaluable in achieving your objective of creating custom wall art or enhancing your web content. When it comes to web design, knowing the ideal dimensions for images and graphics ensures that your visuals display beautifully and maintain a professional appearance.

2. Does size really matter?

Yes, size matters for the Shopify images. Have you ever wondered what grabs your attention when you visit an online store? You will observe the biggest and prettiest picture on the screen will grab your attention.

There are some effects of image sizes that are not even visible to the naked eye.

The 3 important aspects of 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 due to its payload. Your pages look neat and tidy if your Shopify image sizes are consistent.We will explain how this can be achieved in shopify.

3. What are the Best Shopify Image Sizes?

Shopify constraints :

• Maximum image size in Pixels : 4472 x 4472
• File size : 20 MB

The above sizes are rarely used so don’t think of them as the only constraint.These are more for very specific image conditions and I have never seen an image of a 20 MB product uploaded on shopify site.

You shall think of the overall image payload on a given page when deciding on the image size rather than just that individual image.

This is important to think about because many stores use a lot of product images to sell more and keep customers pleased. You want to use the greatest resolution image without sacrificing site quality; after all, if a site is slow, you can quickly lose customers. A 100-millisecond delay in site loading times could cause conversion rates to drop by 7%

However, for square product images, the platform normally suggests 2048 x 2048 pixels. These are high-resolution images with outstanding zoom capabilities that offer your store a professional and well-rounded look. Keep in mind that your images must be larger than 800 × 800 pixels in order for the zoom feature to work.

The most preferred picture file type in Shopify is PNG, which provides high quality and compression for fast site loading times. We recommend using the PNG image format as Shopify has introduced a new feature to convert PNG to WebP format.

WebP images are the most recommended image format that offers improved compression for web images, saving about 30% in file size when compared to older file formats like PNG and JPEG.

You Might Be Interested In: Shopify Speed Optimization Services

Shopify Product Images

Points to know:

• Shopify recommended product image size : 2048 x 2048 pixels
• Product images should not be less then : 800 x 800 pixels
• Upload PNG images and use coding style so that shopify converts them to webP.

Shopify Banner Image

Banner image is the most important image on a website, Generally it’s the first image below the menu. Your banner should be large enough to provide visitors an overview of your topic, especially if you use content overlay choices. The CMS will automatically resize this area, however the ideal upload size is 1800 x 1000 pixels.

Shopify Header Image

The max shopify logo size can use 450 x 250 px. However, header images with a height of no more than 120 pixels are recommended.

Shopify Slideshow Image

In Slideshows there are multiple images in the same view by transitioning slideways. The length of a slideshow image is much greater than its width. A 1200 x 400-pixel dimension option is therefore ideal for detailed slideshows.

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 Shopify.

The img_urls available in Shopify 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

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’ }}

Make sure your image should not be bigger than 650×650 pixels. If you upload a square image, and the one side of your original image is longer than the other side in this case, Shopify will resize accordingly so that the longest side will be 650 pixels.

Read this Blog and Find:- Shopify Speed Optimization

Using Named Size Value

Shopify has offered a specific set of sizes for use with the img_url filter. These are as follows:

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

The crop parameter is a brand-new feature introduced by Shopify. You now have the means to fit your rectangle within the square measurements you’ve provided!

By including the crop parameter, you are informing Shopify that you do, in fact, want the image to be resized to the given dimensions. You also tell Shopify how to crop by selecting one of the three options:

Options are:-

• Left
• Right
• Top
• Center
• Bottom

The code will look like this:-

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:

< a href=”{{ product.featured_image.src | product_img_url: ‘750×750’, crop: ‘center’, scale: 2 }}” >< /a >

This will result in a resized image of 1440×1440 pixels. The original image is large enough, then the image can be taken to be 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:

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 src=” picture.jpg” style=”width: 400px; height: 300px” >
• If you want to specify the image dimensions in an external CSS then the code will be:
  #picture.jpg { width: 400px; height: 300px; }

Conclusion

Shopify has an inbuilt system to generate images.This implies if we want multiple versions of the same image based on size or format then this is possible.

We shall take advantage of this and use it across for responsive images and to reduce multiple image creation efforts.

For expert Shopify optimizations services. Contact Us.