Hướng Dẫn Thay Đổi Kích Thước Ảnh Sản Phẩm Trong Magento 2: Tối Ưu SEO và Trải Nghiệm

Ảnh sản phẩm chất lượng cao là yếu tố then chốt để thu hút khách hàng và tăng doanh số bán hàng trên các trang thương mại điện tử. Trong Magento 2, việc tối ưu kích thước ảnh sản phẩm không chỉ cải thiện trải nghiệm người dùng mà còn đóng vai trò quan trọng trong việc nâng cao thứ hạng SEO. Bài viết này sẽ cung cấp cho bạn hướng dẫn chi tiết về cách thay đổi kích thước ảnh sản phẩm một cách hiệu quả, giúp website của bạn hoạt động mượt mà hơn và thu hút nhiều khách hàng hơn.

Tại Sao Cần Thay Đổi Kích Thước Ảnh Sản Phẩm Trong Magento 2?

Việc sử dụng ảnh sản phẩm có kích thước không phù hợp có thể gây ra nhiều vấn đề cho website của bạn. Ảnh có kích thước quá lớn sẽ làm chậm tốc độ tải trang, ảnh hưởng đến trải nghiệm người dùng và giảm thứ hạng SEO. Ngược lại, ảnh có kích thước quá nhỏ có thể không hiển thị rõ ràng các chi tiết sản phẩm, khiến khách hàng khó đưa ra quyết định mua hàng. Do đó, việc điều chỉnh kích thước ảnh một cách hợp lý là vô cùng quan trọng.

Các Phương Pháp Thay Đổi Kích Thước Ảnh Sản Phẩm Trong Magento 2

Magento 2 cung cấp nhiều phương pháp khác nhau để thay đổi kích thước ảnh sản phẩm. Dưới đây là một số phương pháp phổ biến và hiệu quả nhất:

1. Sử Dụng Block "HelloWorld"

Phương pháp này liên quan đến việc tạo một module tùy chỉnh và sử dụng block "HelloWorld" để thay đổi kích thước ảnh. Bạn sẽ cần inject các đối tượng của `\Magento\Catalog\Model\ProductRepository` và `\Magento\Catalog\Helper\Image` vào constructor của block. Điều này cho phép bạn truy xuất thông tin sản phẩm và thao tác với hình ảnh.

Ví dụ, bạn có thể sử dụng đoạn code sau để lấy thông tin sản phẩm và thay đổi kích thước ảnh:

    
        <?php
        //Lấy đối tượng sản phẩm theo ID
        $id = 'PRODUCT_ID';
        $_product = $block->getProductById($id);

        //Lấy đối tượng sản phẩm theo SKU
        // $sku = 'PRODUCT_SKU';
        // $_product = $block->getProductBySku($sku);
         
        $imageId = 'product_base_image';
        $width = 200;
        $height = 300;
         
        $resizedImageUrl = $block->resizeImage($product, 'product_base_image', $width, $height)->getUrl();
        ?>
        <img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />
    
    

2. Thay Đổi Trực Tiếp Trong Template (.phtml)

Một cách khác để resize ảnh là chỉnh sửa trực tiếp file template (.phtml). Phương pháp này cho phép bạn thay đổi kích thước ảnh cho từng phần cụ thể của trang web. Ví dụ, bạn có thể thay đổi kích thước ảnh hiển thị trên trang chi tiết sản phẩm.

Sử dụng đoạn code sau trong file template:

    
        <?php
        //Lấy đối tượng sản phẩm theo ID
        $id = 'PRODUCT_ID';
        $_product = $block->getProductById($id);

        //Lấy đối tượng sản phẩm theo SKU
        // $sku = 'PRODUCT_SKU';
        // $_product = $block->getProductBySku($sku);
         
        $imageId = 'product_base_image';
        $width = 200;
        $height = 300;
         
        $resizedImageUrl = $_imageHelper
                                ->init($product, $imageId)
                                ->constrainOnly(true)
                                ->keepAspectRatio(true)
                                ->keepTransparency(true)
                                ->keepFrame(false)
                                ->resize($width, $height)
                                ->getUrl();
        ?>
        <img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />
    
    

3. Tạo Helper Class

Việc tạo một helper class giúp bạn tổ chức các hàm resize ảnh có thể tái sử dụng. Trong helper class, bạn có thể định nghĩa các quy tắc và thông số cụ thể cho việc thay đổi kích thước ảnh, chẳng hạn như kích thước, cài đặt nén và các chức năng bổ sung như watermark hoặc cropping.

Dưới đây là một ví dụ về helper class:

    
        <?php
        Namespace Mageplaza\Helloword\Helper;
        use Magento\Framework\App\Filesystem\DirectoryList;
        class Image extends \Magento\Framework\App\Helper\AbstractHelper
        {
            /**
            * Custom directory relative to the "media" folder
            */
            const DIRECTORY = 'Mageplaza_Helloword/posts';

            /**
            * @var \Magento\Framework\Filesystem\Directory\WriteInterface
            */
            protected $_mediaDirectory;

            /**
            * @var \Magento\Framework\Image\Factory
            */
            protected $_imageFactory;

            /**
            * Store manager
            *
            * @var \Magento\Store\Model\StoreManagerInterface
            */
            protected $_storeManager;

            /**
            * @param \Magento\Framework\App\Helper\Context $context
            * @param \Magento\Framework\Filesystem $filesystem
            * @param \Magento\Framework\Image\Factory $imageFactory
            * @param \Magento\Store\Model\StoreManagerInterface $storeManager
            */
            public function __construct(
                \Magento\Framework\App\Helper\Context $context,
                \Magento\Framework\Filesystem $filesystem,
                \Magento\Framework\Image\AdapterFactory $imageFactory,
                \Magento\Store\Model\StoreManagerInterface $storeManager
            ) {
                $this->_mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
                $this->_imageFactory = $imageFactory;
                $this->_storeManager = $storeManager;

                parent::__construct($context);
            }
            /**
            * First check this file on FS
            *
            * @param string $filename
            * @return bool
            */
            protected function _fileExists($filename)
            {
                if ($this->_mediaDirectory->isFile($filename)) {
                    return true;
                }
                return false;
            }
            /**
            * Resize image
            * @return string
            */
            public function resize($image, $width = null, $height = null)
            {
                $mediaFolder = self::DIRECTORY;
                $path = $mediaFolder . '/cache';
                if ($width !== null) {
                    $path .= '/' . $width . 'x';
                    if ($height !== null) {
                        $path .= $height ;
                    }
                }
                $absolutePath = $this->_mediaDirectory->getAbsolutePath($mediaFolder) . $image;
                $imageResized = $this->_mediaDirectory->getAbsolutePath($path) . $image;
                if (!$this->_fileExists($path . $image)) {
                    $imageFactory = $this->_imageFactory->create();
                    $imageFactory->open($absolutePath);
                    $imageFactory->constrainOnly(true);
                    $imageFactory->keepTransparency(true);
                    $imageFactory->keepFrame(true);
                    $imageFactory->keepAspectRatio(true);
                    $imageFactory->resize($width, $height);
                    $imageFactory->save($imageResized);
                }
                return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . $path . $image;
            }
        }
    
    

Kích Hoạt Tính Năng Resize Ảnh Trong Magento 2

Magento 2 cung cấp tính năng resize ảnh tích hợp sẵn, cho phép bạn cấu hình các thông số như chất lượng ảnh, kích thước tối đa và hình ảnh placeholder.

• Đăng nhập vào trang quản trị Magento.
• Đi tới Stores > Settings > Configuration.
• Trong mục Advanced, chọn System.
• Mở rộng mục Images Upload Configuration.
• Bỏ chọn Use system value để có thể chỉnh sửa các cài đặt.
• Đặt Enable Frontend Resize thành Yes.
• Chọn giá trị Quality từ 1-100% (khuyến nghị 80-90%).
• Đặt Maximum Width và Height cho ảnh.
• Nhấn Save Config để lưu các thay đổi.

Mô Tả Các Trường Cấu Hình

Dưới đây là mô tả chi tiết về các trường cấu hình quan trọng:

• Quality: Xác định chất lượng JPEG của ảnh sau khi resize. Giá trị thấp hơn sẽ giảm kích thước file.
• Enable Frontend Resize: Cho phép resize ảnh trên trang chi tiết sản phẩm, duy trì tỉ lệ khung hình.
• Maximum Width: Chiều rộng tối đa của ảnh sau khi resize.
• Maximum Height: Chiều cao tối đa của ảnh sau khi resize.

Sử Dụng Hình Ảnh Placeholder

Hình ảnh placeholder là những ảnh tạm thời được hiển thị trong khi ảnh thật đang tải. Điều này giúp cải thiện trải nghiệm người dùng bằng cách giảm thời gian chờ đợi. Bạn có thể thiết lập hình ảnh placeholder mặc định hoặc sử dụng các hình ảnh khác nhau cho từng loại ảnh (base, small, thumbnail).

Để thiết lập hình ảnh placeholder:

• Đi tới Stores > Settings > Configuration.
• Trong mục Catalog, chọn Catalog, sau đó click vào Product Image Placeholders.
• Cho từng loại ảnh, click Choose File và tải ảnh lên.
• Nhấn Save Config.

Kết Luận

Việc thay đổi kích thước ảnh sản phẩm trong Magento 2 là một bước quan trọng để tối ưu hóa website của bạn. Bằng cách làm theo các hướng dẫn trong bài viết này, bạn có thể cải thiện tốc độ tải trang, nâng cao trải nghiệm người dùng và tăng thứ hạng SEO cho website của mình. Hãy nhớ lựa chọn phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn để đạt được kết quả tốt nhất.