How to Resize Product Images in Shopify

Product images are one of the biggest factors in driving conversions for an online store. A high-quality image can make the difference between a sale and a bounce. However, if your images are too large, they can slow down your site, negatively impacting user experience and SEO. On the other hand, if they’re too small or stretched, they might appear pixelated and unprofessional.

That’s why resizing product images properly in Shopify is crucial. Whether you’re a Shopify merchant looking to improve page load speeds or ensure a consistent aesthetic across your store, resizing your product images the right way will help.

Resizing Product Images Using Shopify Admin

Shopify’s built-in image editor allows merchants to make basic size adjustments to product images. However, the tool does not offer bulk resizing, detailed aspect ratio control, or optimization features for mobile-specific adjustments.

Step-by-Step Guide to Resizing Images in Shopify

  • Log in to Shopify Admin, then go to Products. Select the product containing the image you want to resize.
  • Click on the product image. You’ll see a new screen open with the product image you selected. Click on the crop and transform option on the right to manually resize. If you know the exact pixels, then you can select resize.
Adjusting image size in Shopify admin
  • Use the crop tool to adjust the image size. Click Apply when finished.
  • Click Save to update the image in your product listing.

Best Practices for Image Optimization in Shopify

Follow recommended image dimensions:

  • Product images: 2048 x 2048 pixels for high-resolution displays.
  • Thumbnails: 600 x 600 pixels.
  • Collection pages: 1200 x 1200 pixels.

Avoid excessive resizing within Shopify Admin:

  • Shopify’s built-in compression can reduce image quality.

Use external tools for bulk resizing:

  • Shopify does not support batch resizing. External tools like TinyPNG, Bulk Resize Photos, or Photoshop can help resize multiple images before uploading.

Common Issues and How to Fix Them

  • Blurry images after resizing: Shopify automatically compresses images, sometimes reducing quality. Uploading a larger, high-quality image can help maintain sharpness.
  • Stretched or distorted images: Shopify auto-crops images to fit certain layouts. Using consistent aspect ratios across all products can help avoid distortions.
  • Slow page speeds due to large image files: Before uploading, compress images using a tool like TinyPNG or JPEG-Optimizer to reduce file size without losing quality.

While Shopify’s resizing tool works for simple edits, merchants who need more control over image layouts and responsiveness may find Shogun’s image editing features more useful.

Using Shogun to Resize Product Images (and More)

Shogun Page Builder offers full control over image dimensions, aspect ratios, placement, and responsiveness—ensuring that product images look polished across all devices.

How to Resize Images in Shogun

  • In your Shopify store, navigate to Apps and then select Shogun Landing Page Builder and open a page for editing.
  • Drag an Image Element onto your product page. Click on the image to access editing options.
Selecting image element in Shogun
  • Adjust the width and height manually in the “dimensions” section for both desktop and mobile. Maintain aspect ratios or customize dimensions based on layout needs.
Adjusting image size in Shogun
Easily Resize and Optimize Product Images

Resize, optimize, and arrange product images effortlessly with Shogun’s drag-and-drop page builder.

Start Resizing Images Now

Accessing High-Quality Stock Images with Shogun’s Unsplash Integration

Not every Shopify merchant has access to professional product photography. High-quality images can be expensive to produce, requiring professional lighting, cameras, and post-production editing. This is where Shogun’s Unsplash integration comes in, providing store owners with a vast selection of free, high-resolution stock images to enhance their product pages.

How Unsplash Works Within Shogun

Shogun integrates directly with Unsplash, a leading platform for free, high-quality stock photography. Unlike traditional stock photo websites that require merchants to download images separately and then upload them into Shopify, Shogun allows users to access Unsplash’s library without leaving the page editor.

Unplash integration with Shogun

Merchants can:

  • Search for images by keywords related to their products or brand aesthetic.
  • Instantly add images to any section of their product pages.
  • Resize and style the images within Shogun’s Visual Editor to ensure they align with their brand identity.

When to Use Unsplash for Ecommerce Stores

Unsplash is particularly useful for:

  • Enhancing product pages with lifestyle images: If you sell furniture, clothing, or accessories, you can find lifestyle images that showcase how the products might look in real-life settings.
  • Adding professional banners or hero images: Large, high-quality hero images can be used on landing pages to create a strong first impression.
  • Filling in gaps for missing product images: If you don’t have custom product photos for every SKU, Unsplash can provide temporary, high-quality visuals to maintain a polished look.

Beyond Resizing: Enhancing Product Pages with Shogun

While resizing images is essential, proper page design and layout also play a critical role in conversions. Shogun helps merchants optimize product pages by offering:

  • Customizable layouts: Drag-and-drop image placements for a visually appealing product page.
  • A/B testing: Test different product image sizes and positions to determine what leads to better conversions.
  • Mobile optimization: Resize and arrange images specifically for mobile users, preventing distortions or misaligned elements.

How Brands Use Shogun for Image Optimization

Shopify merchants use Shogun to enhance the way they display product images, ensuring that visuals are both high-quality and optimized for performance across all devices. Unlike Shopify’s built-in image editor, which provides only basic resizing, Shogun allows for precise control over image placement, size, and responsiveness. This flexibility helps brands create visually engaging product pages that drive conversions.

1. Displaying Larger, High-Resolution Images on Desktop for Immersive Browsing

Ecommerce shoppers rely heavily on visuals when making purchasing decisions. For desktop users, larger, high-resolution images can enhance the browsing experience, making products appear more lifelike and appealing.

  • Brands selling fashion, furniture, or luxury goods often use full-width images to showcase textures, patterns, and fine details.
  • Electronics and tech brands use zoomable high-res images to allow customers to see every detail of a product before buying.
  • Shogun’s customizable layouts make it easy to arrange product images in a grid, carousel, or fullscreen display to create a more engaging experience.

2. Using Smaller, Fast-Loading Images on Mobile to Improve Speed and Usability

Mobile commerce continues to grow, and slow-loading pages can lead to higher bounce rates and lost sales. While large images look great on desktop, they can negatively impact load times on mobile devices.

With Shogun, brands can:

  • Automatically adjust image sizes for mobile users to ensure
  • without sacrificing quality.
  • Use mobile-specific image versions to create a better shopping experience on smartphones.
  • Implement lazy loading, so images load only when they come into view, reducing initial page load time.

For example, an apparel brand might use full-width lifestyle images on desktop while displaying compact, compressed product images on mobile to maintain fast site performance.

3. A/B Testing Different Image Placements to Determine the Best-Performing Layouts

The placement of product images can significantly impact conversion rates. Where and how images appear on a product page can affect user engagement and purchasing decisions.

Shogun enables brands to:

  • Test different product image layouts (e.g., side-by-side vs. stacked vs. grid format).
  • Experiment with hero images, lifestyle images, and close-up shots to determine what drives the most sales.
  • Measure performance based on real-time customer behavior, helping brands make data-driven design decisions.

For instance, a beauty brand might A/B test whether a product performs better when the first image is a lifestyle shot versus a close-up of the product packaging.

Full Control Over Image Optimization with Shogun

By using Shogun, Shopify merchants gain end-to-end control over product image presentation:

  • Resize, crop, and reposition images to fit their brand’s aesthetic and page layout.
  • Ensure optimal display across desktop, tablet, and mobile screens.
  • Enhance visual storytelling by integrating lifestyle and branded images seamlessly.

 

Back to blog