Compressing and resizing product images in Magento: Step-by-step guide

High-quality product images are the backbone of any successful e-commerce store. They capture attention, build trust, and showcase your products in the best possible light. However, without proper optimization, those beautiful images can become a major liability, slowing down your Magento 2 store and driving customers away.

The good news is you don't have to choose between stunning visuals and a fast website. The key lies in mastering Magento 2 product image compression and resizing. This guide will walk you through everything you need to know about optimizing product images in Magento 2, from its built-in features to leveraging powerful third-party extensions. By the end, you'll have a clear strategy to ensure your site is both visually appealing and lightning fast.

Compressing product images manually before uploading is one of the most straightforward approaches to image optimization in Magento 2. This method allows store owners or content managers to reduce image file sizes without depending on third-party modules or server-side configurations.

How it works:

Before uploading images to the Magento 2 Admin Panel, you use external tools or software to reduce the file size. This does not alter the image dimensions but minimizes the file’s weight by removing unnecessary metadata and optimizing image encoding.

Recommended tools:

• Online Tools (TinyPNG, Squoosh, Compressor.io)

  • Upload your images: Open the tool in your browser and drag-and-drop one or multiple PNG or JPEG files into the upload area.

  • Adjust compression settings (if available):

    • Some tools (like Squoosh) let you choose the output format (JPEG, PNG, WebP) and set the quality level (e.g., 70–80%).

    • Others (like TinyPNG) apply smart lossy compression automatically.

  • Download the optimized files: Once compression is complete, download the images one by one or as a ZIP archive for batch use.

These tools are ideal for non-technical users who need quick results without installing software.

• Desktop applications (Photoshop, GIMP, XnConvert)

  • Open or import the image(s) into the software. You can load a single file or a batch, depending on the tool.

  • Export or convert with compression settings:

    • Choose the target file format (JPEG, PNG, or WebP).

    • Set the desired quality or compression level (e.g., JPEG quality 75, WebP lossy with quality 80).

    • Optionally apply resizing or cropping rules before export.

  • Save or export the optimized images to a destination folder.

These tools are better suited for designers or merchants who manage large image sets or need more customization.

Pros:

• Provides full control over image quality before upload

• Ensures only optimized images enter the Magento media library

• Requires no changes to the Magento system

Cons:

• Time-consuming for large product catalogs

• Does not help with images that are already uploadedThese tools are better suited for designers or merchants who manage large image sets or need more customization.

Magento 2 extensions designed for image compression offer a more scalable and automated solution. These modules are integrated into your Magento system and can optimize images during upload or compress existing images in bulk.

How it works:

Once installed, the extension monitors newly uploaded images or scans the existing media directory. It applies either lossless or lossy compression techniques, depending on your configuration, and can optionally convert images to more efficient formats such as WebP.

Key features typically included:

• Support for bulk image compression

• Options for lossy or lossless compression

• Scheduled or real-time optimization

• WebP conversion and browser fallback settings

Boost your Magento 2 store speed by up to 34% with the BSS Commerce Magento WebP images extension. Automatically convert images to WebP, reduce file sizes, and improve SEO—while keeping full compatibility with all browsers and the Hyvä theme. 

When to use:

This approach is ideal for medium to large Magento stores that deal with a large volume of product images and require consistent optimization without manual intervention.

Pros:

• Saves time by automating the entire compression process

• Reduces overall media size across the store

• Often includes additional features like format conversion and cron jobs

Cons:

• May require a paid extension or usage-based API key (e.g., TinyPNG)

• Some extensions rely on external services with file limits

For technically advanced users or DevOps teams, compressing product images directly on the server via CLI tools offers a powerful and highly customizable method. This is especially useful for Magento 2 stores hosted on VPS or dedicated servers with SSH access.

How it works:

You install and run server-side tools such as jpegoptim, optipng, pngquant, or ImageMagick. These tools allow you to recursively scan and compress images located in the Magento /pub/media/catalog/product directory. The process can be manual or automated via shell scripts and scheduled cron jobs.

Example CLI Command:

bash

find pub/media/catalog/product -type f -name '*.jpg' -exec jpegoptim --max=85 {} \;

This command finds all .jpg files in the product image directory and compresses them to a maximum quality of 85%.

When to use:

This approach is best suited for large-scale Magento installations managed by technical teams or when the store already uses a CI/CD pipeline.

Pros:

• Compresses large volumes of images quickly

• Fully scriptable and customizable

• No Magento-specific extension needed

Cons:

• Requires technical knowledge and SSH access

• No visual interface or preview before compression

• Incorrect usage may lead to over-compression or quality loss

This approach involves creating a custom block class within a module where you can explicitly call Magento’s image helper and set the desired dimensions:

In your block class, inject \Magento\Catalog\Helper\Image and then use its resize() method along with chaining options such as constrainOnly(true), keepAspectRatio(true), keepTransparency(true), and keepFrame(false).

Here's how resizing is triggered:

php

$resizedImage = $this->_productImageHelper

    ->init($product, $imageId)

    ->constrainOnly(true)

    ->keepAspectRatio(true)

    ->keepTransparency(true)

    ->keepFrame(false)

    ->resize($width, $height);

You can then render the resized image in your template:

 php

<img src="<?php echo $block->resizeImage($product, 'product_thumbnail_image', 50, 50)->getUrl(); ?>" />

Instead of creating a block, you can resize images right in your template file:

• Use Magento’s image helper available in the template (e.g., _imageHelper).

Call the same resizing chain within the .phtml like this:
php

$resizedImageUrl = $_imageHelper

    ->init($product, 'product_base_image')

    ->constrainOnly(true)

    ->keepAspectRatio(true)

    ->keepTransparency(true)

    ->keepFrame(false)

    ->resize(200, 300)

    ->getUrl();

Then embed the resized image:

php

<img src="<?= $resizedImageUrl ?>" alt="<?= $_product->getTitle(); ?>" />

For cleaner and DRYer code, especially if resizing logic is used across many templates, you can build a helper class:

• Define reusable methods (e.g., resizeImage) that encapsulate the resizing logic.

• Use this helper both in blocks and templates as needed, helping maintain consistent rules (like aspect ratio, compression, watermarking, cropping, etc.).

• This makes resizing centralized, simpler, and easier to update.

Magento 2 allows users to define automatic image resize rules directly in the Admin Panel through the Images Upload Configuration settings. This provides a convenient way to restrict the dimensions of uploaded images without requiring code-level customizations or additional extensions.

How it works:

This method enforces a maximum width and height for any image uploaded through the Magento Admin Panel. If a user attempts to upload an image that exceeds the configured dimensions, Magento will automatically resize the image down to the specified limits while preserving its aspect ratio.

Where to configure

• Log in to the Magento Admin Panel.

• Navigate to: Stores > Configuration > Advanced > System

• Scroll down to the Images Upload Configuration section.

• Set the following parameters:

• Maximum Width: Enter the maximum allowed width in pixels.

• Maximum Height: Enter the maximum allowed height in pixels.

• Click Save Config and clear the cache if needed.

When to use: This method is particularly useful in workflows where:

• Non-technical users (such as merchandisers or content managers) frequently upload product, category, or CMS images.

• The business wants to prevent large, high-resolution files from entering the system and consuming unnecessary storage or bandwidth.

• There is a need to enforce consistent sizing at the point of upload without manual editing or coding.

Key notes

• The resize happens only at the time of upload via the Admin Panel.

• It does not affect images already in the system.

• It does not perform compression—only resizes the dimensions (width and height).

• It applies to all image uploads in the backend, including product, category, and CMS images.

Pros

• Easy to configure via the Admin Panel without technical knowledge.

• Helps standardize image sizes across the store.

• Prevents oversized images from negatively affecting performance.

Cons

• Offers no control over image compression or quality.

• Does not support advanced resizing rules based on image role or context.

• Does not apply to images uploaded via code, import scripts, or API.

1. Does Magento 2 automatically compress product images during upload?

No, Magento 2 does not apply any compression to product images by default. It only resizes them based on display roles (e.g., base, thumbnail), but the file size remains unchanged unless manually optimized or handled via a third-party extension.

2. What is the recommended image format for Magento 2 product images?

JPEG is generally recommended for product images because of its balance between quality and file size. PNG is suitable for transparent images. WebP is ideal for modern performance but requires extension support to serve correctly with fallbacks.

3. Will resizing an image in Magento 2 reduce its file size?

Not necessarily. Resizing changes the image dimensions (width and height), but does not affect the file size significantly unless compression is also applied.

4. Can I convert existing images in my Magento store to WebP format?

Yes. You can use a WebP conversion extension or server-side tools to bulk convert existing JPG/PNG images into WebP. Make sure to enable fallback support for browsers that do not support WebP.

5. What’s the ideal compression setting for product images?

For JPEGs, a quality setting between 70%–85% offers a good balance of visual clarity and file size. For WebP, lossy compression at around 75% works well for most use cases. Always test before applying site-wide.

Optimizing product images through compression and resizing is essential for improving performance in Magento 2. While Magento’s built-in image roles and admin settings offer basic resizing, they don’t reduce file size. To achieve faster load times and better UX, resizing must be paired with proper compression—either manually using tools like TinyPNG and Photoshop, or automatically with WebP Image extensions or server-side scripts.

By choosing the right method based on your store’s size and technical capacity, you can ensure your product images are efficiently sized, lightweight, and visually consistent. A streamlined image optimization workflow not only enhances site speed and SEO but also supports higher conversions and customer satisfaction.

About BSS Commerce

BSS Commerce is a trusted Magento 2 extension provider known for delivering high-quality, reliable, and user-friendly solutions that help merchants optimize and grow their online stores. With over 10 years of expertise in Magento development, BSS Commerce offers a wide range of extensions designed to enhance store performance, user experience, and business operations. Their commitment to excellence and customer satisfaction has made them a go-to partner for Magento store owners worldwide.