Shopify Blog Image Sizes: A Complete Guide for All Image Types

Adding images to your Shopify blog is not exactly rocket science. You just select something that looks good and fits the theme, right? Not quite.

While the process itself is simple, there is some nuance to choosing the most effective images for your blog. The key thing to consider here is image size.

Our legitimacy to write about Shopify blogging:

• We created Bloggle, a Shopify app, to bypass the blog native limitations.
• Our app is used by 2,000+ stores in 60 countries.
• We are rated 4.9/5 on the app store.
• Our users created +55,000 live blogs.
• Many saw a 10x rise in blog SEO traffic and revenue with our guidance on improved UX.

Considering installing an app like Bloggle can change your blog's results & productivity, by handling boring tasks (like image sizing) for you.

In the remainder of this article, we will teach you how to select the correct size for your Shopify blog images.

What is the best image size for Shopify blogs?

The answer, it depends. Let’s see why.

Image size comes in two types, intrinsic and rendered.

Intrinsic size is the size of the original image. If you upload a 1920 x 1080 image, its intrinsic size is 1920 x 1080 pixels. Simple.

Rendered size is the size of the image as it appears when Shopify actually displays it to users. A 1920 x 1080 image can be rendered in different sizes, depending on the circumstance.

We can illustrate the difference between intrinsic and rendered image size with a couple of examples.
The difference between intrinsic and rendered image size is illustrated in the following examples.

We uploaded the following image with an intrinsic size 1920 x 1080 (aspect ratio 16:9) to Shopify.

We then set it as the feature image for our blog post.

‍

We also added the image to the post as an in-content image and selected Product image (480px) from the Image size drop-down menu.

We can now check the rendered size of both images. Let’s check the in-content image first. 

We saved the post and then opened it in a preview window. We then right-clicked the image and selected Inspect from the menu. This launches our browser’s developer mode (Firefox in our case).

As can be seen in the lower right, the image has a rendered size of 480 x 270 pixels. This matches the width specified by the Product image type (480px).

Now let us check how featured images are rendered. We launched the preview window again, this time for our blog as a whole.

The default Shopify theme (Craft) renders our blog posts as a grid of cards. Each card includes a featured image, a title, and an excerpt. The most recent post image is rendered at twice the size compared to earlier posts. We’ve made two dummy posts with the same featured image to check both rendering scenarios.

We used the Inspect tool again. As can be seen, the top image has a rendered size of 1098 x 550 pixels.

Each of the bottom images has a rendered size of 538 x 307 pixels.

As we can see, Shopify has automatically adjusted the size of our original image (1920 x 1080) depending on context. Let’s summarize our findings with a table.

‍

The rendered size of the bigger featured image was reduced to 1098 x 550 pixels. The rendered size of the smaller featured image was reduced even further to 538 x 307 pixels.

Can the rendered size of Shopify images be changed?

The only way to change how featured images are rendered is by customizing the Shopify theme, or by switching to a different theme. 

This is a feature, not a bug. If featured images were rendered at their intrinsic size, they would quickly break the layout of a blog. 

As for in-content images, you can manually determine their rendered size using the Image size drop-down menu. This gives you more freedom in the way in-content images appear, but you are still stuck with predefined sizes.

Alternatively, we can use a Shopify blogging app such as Bloggle to customize image size in greater detail (more on that later).

With all of that in mind, what is the best image size for Shopify blogs?

For featured images, it’s best to upload images that are at least 1100 x 550 in size. Images up to the maximum of 2240x1260 can also work, but they will get resized automatically. 

For in-content images, it's best to upload images matching the appropriate image type specification. Images up to the maximum allowed size can be uploaded, but space can be saved by uploading smaller images with a smaller file size.

Shopify blog image types

If you want more control over how Shopify renders your blog images, you can use an alternative blog editor like Bloggle. Let’s quickly go over how Bloggle renders different blog image types.

Featured image

Featured images are displayed on your main blog page. They represent individual blog posts and are typically arranged as a grid.

To set a featured image in Bloggle, carry out the following:

1. Click Apps from your Shopify dashboard.
2. Select Bloggle from the list of installed apps.
3. Create a new article by clicking Create New Blog, or edit an existing article by clicking Edit.
4. Navigate to the Settings tab in the top left menu.
5. Click Blog Post Settings.
6. Scroll down to the bottom of the menu and click Add Image.
7. Click Upload and select an image.
8. Click Confirm.

Here’s a quick visual summary of this process:

You can upload images of any size as featured images. They will automatically get resized to fit the layout. As mentioned previously, you can edit the layout of your Shopify blog by customizing your theme.

In-content images

Bloggle offers 3 in-content image types: basic images, two-column images, and images + text.

Basic image

To add an image to a blog post, carry out the following:

1. From the article edit screen, navigate to the Content tab and click Add Content.
2. Scroll down to the MEDIAS section and click Image.
3. Click on the placeholder image, select an image, or upload one by clicking Upload.

From here, you can start customizing the image using the following options:

• Image alt – specify the HTML alt tag for the image. Helps screen readers parse your content, and improves SEO.
• Image source – useful for specifying the original source of the image.
• Image link – embeds a custom link within the image, activated when the user clicks the image.
• Image size – adjusts the width and height of the image. You can adjust the size in pixels or by using a percentage ratio.
• Image alignment – useful for positioning images below the max width.
• Image border radius – for rounding out the corners of the image.

In addition to these settings, you can also customize the design and margins of your in-content images. Just navigate to the Design & Margins tab from the editing screen. You can then customize the margins and padding for each side of the image.

Two-column images

The ability to add two-column images is unique to Bloggle. You can use it to create more complex blog post layouts than the default editor allows.

To add two-column images to a blog post, carry out the following:

1. From the article edit screen, navigate to the Content tab and click Add Content.
2. Scroll down to the MEDIAS section and click Two-column images.
3. Under the section, click on the placeholder image, select an image, or upload one by clicking Upload.
4. Repeat the process for the second image.

You can customize two-column images in the same way as regular in-content images. You also have the option to proportionally resize images using the Size of images section.

Text + image

Another feature unique to Bloggle is images combined with anchored text. This helps you further customize your blog posts.

To add text + image content blocks, carry out the following:

1. From the article edit screen, navigate to the Content tab and click Add Content.
2. Scroll down to the MEDIAS section and click Text + image.
3. Add text to the image using the provided text field.
4. Click on the placeholder image, select an image, or upload one by clicking Upload.

You have the same options for customizing as previously outlined. You also have the option to adjust image-to-text positioning through the Positioning section. You can separately adjust the image position for desktop (left or right), and mobile (above or below).

How to fix image size for Shopify blog posts

How do we ensure that our Shopify blog images are the right size? Here are three ways.

1. Use Bloggle

With Bloggle, you can fully customize image size without relying on external tools. The handy preview feature lets you see the changes immediately, so you can fine-tune the look of your blog post images with ease.

Signup for a free 10-day trial - no credit card required.

2. Let Shopify resize it for you

As discussed earlier, Shopify automatically fixes the rendered size of featured blog images. As long as you stay within the maximum allowed image dimensions (2240 x 1260) and file size (less than 3MB), you’re good to go.

As for in-content images, the default blog editor provides the option to select your desired rendered size.

3. Use an external image editing tool

If you want to fix image size yourself, you can do it with any number of third-party image editing tools.

Web-based options include:

• ILoveIMG
• PicResize
• Adobe Free Image Resize

Desktop editors include:

• Adobe Photoshop
• GIMP
• Paint.net

Shopify blog image size guide

Here is the full list of available image sizes for in-content blog images on Shopify.

‍