How to Resize Images in Magento 2: view.xml, CLI, and Async Methods

Key Takeaways

• Magento 2 offers four image resize methods: Admin Panel config, view.xml theme config, CLI command, and async queue processing.

• The view.xml file controls all product image dimensions per theme and is the primary method for resize configuration.

• For large catalogs, use async queue processing or the frontend crawl method. Adobe reports the crawl approach processes 100,000+ images in under 8 hours versus 6 days with the standard CLI.

• WebP and AVIF formats require third party extensions. Magento 2.4.8 does not include native next generation image format conversion.

What is Magento 2 Image Resize?

Magento 2 image resize = The built in system that generates multiple image sizes from a single upload for different storefront locations. You upload one high resolution product photo, Magento creates all needed variations.

Perfect for: Store owners optimizing page speed, developers configuring product catalogs, agencies managing large image libraries

Not ideal for: Stores using headless frontends with custom image pipelines

Magento stores product images in the pub/media/catalog/product directory. When a product page loads, the system checks if resized versions exist for each image role. If not, it generates them on the fly, which slows down page loads.

The image resize system uses five role types defined in your theme's view.xml file:

Pre generating all resized images before launch or after bulk imports prevents on the fly processing and keeps your storefront fast.

Configure Image Upload Settings in Admin Panel

The Admin Panel controls how Magento handles image uploads. This is the simplest method and applies to all uploaded images.

Path: Stores > Settings > Configuration > Advanced > System > Images Upload Configuration

This method resizes images at upload time. It does not affect images already in your media catalog. For existing images, use the CLI command covered below.

Image Placeholders

Placeholders display temporary images while product images load or when no image is assigned.

Path: Stores > Settings > Configuration > Catalog > Catalog > Product Image Placeholders

Upload placeholder images for each role: Base Image, Small Image, and Thumbnail. You can use the same image for all three or upload role specific placeholders.

Configure Image Dimensions in view.xml

The view.xml file is the primary method for controlling product image sizes across your storefront. Every image ID maps to a specific location (category grid, product page, cart) with defined dimensions.

File location: <theme_dir>/etc/view.xml

For custom themes, copy the file from your parent theme:

vendor/magento/theme-frontend-blank/etc/view.xml
vendor/magento/theme-frontend-luma/etc/view.xml

XML Structure

Each image definition uses this format:

<media>
    <images module="Magento_Catalog">
        <image id="category_page_grid" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="product_page_image_large" type="image">
            <width>700</width>
            <height>700</height>
        </image>
    </images>
</media>

Image Properties

Common Image IDs Reference

After editing view.xml, flush the cache and regenerate images:

bin/magento cache:flush
bin/magento catalog:images:resize

Resize Images via CLI

The Magento CLI provides the catalog:images:resize command to regenerate all product images based on your view.xml configuration.

Basic Command

bin/magento catalog:images:resize

This command processes every product image for every role defined in view.xml. On large catalogs, it can take hours or days because it runs in a single thread and reprocesses images that are already resized.

When to Run

Run this command after:

• Changing image dimensions in view.xml
• Importing products with new images
• Switching or updating your theme
• Clearing the pub/media/catalog/product/cache/ directory

Performance Expectations

For catalogs with more than 10,000 product images, the basic CLI command is too slow. Use async queue processing instead.

Async Image Resizing for Large Catalogs

Adobe Commerce 2.4 introduced async image resizing through message queues. This method processes images in parallel across multiple threads and servers.

Step 1: Start Queue Consumers

Launch queue handlers on each web server. Adobe recommends running two consumers per physical CPU core:

for i in $(seq 1 $((2 * $(nproc --all)))); do
    bin/magento queue:consumers:start media.storage.catalog.image.resize &
done

Step 2: Queue Resize Jobs

bin/magento catalog:images:resize --async

This queues all resize operations instead of executing them in line. The running consumers process the queue in parallel.

Step 3: Monitor Progress

pgrep -fl media.storage.catalog.image.resize

Step 4: Stop Consumers When Done

pkill -f media.storage.catalog.image.resize

Alternative: Frontend Crawl Method

The fastest approach uses web crawling to trigger image generation through the cache layer. Visiting one cached image URL triggers Magento to generate all sizes for that product in the background.

Adobe's catalog image resizing best practices report this method processes 100,000 images in under 8 hours, compared to 6 days with the standard CLI command.

For production stores with large catalogs, this method combined with managed Magento hosting that provides multi server infrastructure delivers the best results.

Image Optimization Beyond Resizing

Resizing alone is not enough for optimal page speed. Modern image optimization includes format conversion, lazy loading, and CDN delivery.

WebP and AVIF

Magento 2.4.8 does not convert images to WebP or AVIF. Uploading WebP files works if your PHP installation supports the format, but automatic server side conversion from JPG or PNG to next gen formats requires third party extensions:

Lazy Loading

Magento does not add the loading="lazy" attribute to product images by default. To enable browser native lazy loading, add loading="lazy" to <img> tags in your theme templates or use a lazy loading extension from Adobe Commerce Marketplace.

For above the fold images (hero images, first visible products), do NOT use lazy loading. This hurts Largest Contentful Paint (LCP) scores.

CDN for Image Delivery

Serving images through a CDN like AWS CloudFront reduces latency for global customers. Configure this in Stores > Configuration > General > Web > Base URLs for static and media content.

A proper CDN setup combined with optimized image sizes and full page cache keeps your store fast under load.

Troubleshooting Common Issues

FAQ

1. What is the default image quality in Magento 2?

Magento compresses uploaded images to 80% quality by default. You can change this in Stores > Configuration > Advanced > System > Images Upload Configuration. Adobe recommends 80 to 90% for the best balance between file size and visual quality.

2. Where is the view.xml file located in Magento 2?

The file is at <theme_dir>/etc/view.xml. For the Luma theme: vendor/magento/theme-frontend-luma/etc/view.xml. For custom themes, create your own view.xml in your theme directory instead of editing vendor files.

3. How do I resize images for a specific product only?

Magento's built in CLI resizes all product images at once. To resize images for specific products, use a custom script with the \Magento\Catalog\Helper\Image class or install a module like staempfli/magento2-module-image-resizer from GitHub.

4. Does Magento 2 support WebP images?

Magento 2.4.8 accepts WebP uploads if your PHP installation supports the format. It does not convert existing JPG or PNG files to WebP or AVIF. For automatic next gen format conversion, install a third party extension from Adobe Commerce Marketplace.

5. How long does catalog:images:resize take?

Processing time depends on catalog size. A store with 1,000 products finishes in under 30 minutes. Catalogs with 100,000+ images can take 3 to 6 days using the standard command. Use async queue processing or the frontend crawl method to cut this to under 8 hours.

6. What image dimensions should I use for product photos?

Upload source images at 2000 x 2000 pixels minimum for zoom support. The view.xml file controls how these get resized for display. Common sizes: 700 x 700 for product detail, 240 x 300 for category grid, 75 x 75 for thumbnails.

7. Why do my images look blurry after resizing?

The source image is too small. Magento's constrain setting (true by default) prevents enlarging images smaller than the target dimensions. Upload product photos at a minimum of twice the largest display size defined in your view.xml.

8. How do I clear the image resize cache?

Delete the pub/media/catalog/product/cache/ directory and run bin/magento catalog:images:resize to regenerate all cached images. On production, consider using async resizing or the frontend crawl method to avoid extended processing times.

9. Can I resize images during product import?

Magento does not resize images during CSV import. After import, run bin/magento catalog:images:resize to generate all required sizes. For automated workflows, add this command to your import scripts.

10. What is the difference between constrain and frame in view.xml?

Constrain prevents small images from being enlarged beyond their original dimensions. Frame adds padding (white space) around images to match target dimensions without cropping. Set frame to false if you prefer cropped images over padded ones.