category oscprofessionals - Blogs - How to Specify Image Dimensions for Shopify Images

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.

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

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

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:

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

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:

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

Latest Posts

6 Comments

  1. สล็อต666 คาสิโนออนไลน์ January 17, 2023 at 6:08 am

    My partner and I stumbled over here from a different
    web address and thought I might as well check things out. I like what I see so i am just following you.
    Look forward to checking out your web page yet again.

  2. in Turkey Law Firm January 25, 2023 at 12:18 pm

    This paragraph presents clear idea designed for the new users of blogging, that actually how
    to do running a blog.

  3. my blog February 23, 2023 at 5:41 pm

    This piece of writing offers clear idea in support of the new visitos of blogging, that genuinely how
    to do ruhning a blog.

  4. my blog February 25, 2023 at 3:04 pm

    I enjoy reading an arrticle that can make men and women think.
    Also, many thanks for allowing me to comment!

  5. my blog February 25, 2023 at 9:18 pm

    I like the helpful information you provide in your articles.
    I’ll bookmark your blog and check again here frequently.

    I am quite sure I wipl learn many new stuff right here!
    Good luck for the next!

  6. cheapest cialis online April 18, 2023 at 7:04 am

    I am now not sure the place you are getting your info,
    however great topic. I needs to spend some time learning much more
    or understanding more. Thanks for magnificent info I used to
    be searching for this info for my mission.

Leave A Comment