How to Resize Product Gallery Images in Magento 2?
Resizing Product Gallery Images in Magento 2 is one of the most important activities to keep storefronts always appealing and responsive. Magento 2 lets you manage the size of images appearing in the gallery with the help of configurations and custom code. By setting up some height-width parameters, you can easily ensure that images are uniform in your store and make it look professional by further optimizing the load times.
Whether you use such PHP code as the catalog:images:resize or any other scripts to edit the size of images programmatically, resizing is all about improving performance and maintaining a good user experience. Only correctly resized images will ensure your site looks great across desktops, tablets, and mobile phones. A typical example of when and how you would want such functionality to be in your store is when you provide highly detailed product images. If your website has a heavy load of high-resolution imagery, image resizing balances things between how good it may look and how fast that picture can load. Update the image dimensions regularly, and then regenerate the thumbnails so that your Magento 2 store can be optimized to give customers a smooth shopping experience.
Step 1: Create the XML file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<images module="Magento_Catalog">
<image id="bundled_product_customization_page" type="thumbnail">
<image id="cart_cross_sell_products" type="small_image">
<image id="cart_page_product_thumbnail" type="small_image">
<image id="category_page_grid" type="small_image">
<image id="category_page_grid-1" type="small_image">
<image id="category_page_list" type="small_image">
<image id="customer_account_my_tags_tag_view" type="small_image">
<image id="customer_account_product_review_page" type="image">
<image id="customer_shared_wishlist" type="small_image">
<image id="gift_messages_checkout_small_image" type="small_image">
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<image id="mini_cart_product_thumbnail" type="thumbnail">
<image id="new_products_content_widget_grid" type="small_image">
<image id="new_products_content_widget_list" type="small_image">
<image id="new_products_images_only_widget" type="small_image">
<image id="product_base_image" type="image">
<image id="product_comparison_list" type="small_image">
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<image id="product_page_image_medium" type="image">
<image id="product_page_image_medium_no_frame" type="image">
<image id="product_page_image_small" type="thumbnail">
<image id="product_page_main_image" type="image">
<image id="product_page_main_image_default" type="image">
<image id="product_page_more_views" type="thumbnail">
<image id="product_stock_alert_email_product_image" type="small_image">
<image id="product_small_image" type="small_image">
<image id="product_thumbnail_image" type="thumbnail">
<image id="recently_compared_products_grid_content_widget" type="small_image">
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<image id="recently_compared_products_list_content_widget" type="small_image">
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<image id="recently_viewed_products_images_names_widget" type="small_image">
<image id="recently_viewed_products_images_only_widget" type="small_image">
<image id="recently_viewed_products_list_content_widget" type="small_image">
<image id="related_products_list" type="small_image">
<image id="hotpicks_products_list" type="small_image">
<image id="review_page_product_image" type="small_image">
<image id="rss_thumbnail" type="thumbnail">
<image id="sendfriend_small_image" type="small_image">
<image id="shared_wishlist_email" type="small_image">
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<image id="upsell_products_list" type="small_image">
<image id="wishlist_sidebar_block" type="thumbnail">
<image id="wishlist_small_image" type="small_image">
<image id="wishlist_thumbnail" type="small_image">
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image product_page_main_image_default product_page_more_views
Step 2: Run the CLI command from the Magento root.
sudo php bin/magento catalog:images:resize
Image resizing in the product gallery within Magento 2 provides for a consistent, responsive, and optimized storefront. You will need to create or edit the view.xml file under the theme directory and specify different image types, such as thumbnails, base images, or category views, with your dimensions. The CLI command catalog:images:resize regenerates thumbnails to reflect updated sizes, making sure images load efficiently without compromising quality.
This approach is good for maintaining site performance, keeping the aesthetic, and ensuring responsiveness across all devices. The regular updating of the image configuration will make your Magento 2 store much more eye-catching, well-optimized, and responsive to customer needs.
For more information about our services, visit: https://mageleven.com/services/