Magento – Magento 2.3.0 product image cache resizing images to look very bad

image resizingmagento2magento2.3product-images

i have uploaded images to magento 2.3 and when i look on product page i can see it been resizing to different size with white lines.
look at original image that has been uploaded: https://babybeddingdesign.r.worldssl.net/pub/media/catalog/product/d/u/dumbo_bedding_set.jpg

the one seen on my site: https://babybeddingdesign.r.worldssl.net/pub/media/catalog/product/cache/9d08971813a040f8f96067a40f75c615/d/u/dumbo_bedding_set.jpg

link to the item: https://babybeddingdesign.com/dumbo-crib-bedding-collection-crib-bedding-set

all my products also old ones have been resizing. what is the problem with Magento 2.3?

Best Answer

In etc/view.xml of your current theme, you can update product image size

Make sure you resize with the expect ratio.

Use additional tag <frame> to prevent white borders on image. Use this code as example:

<image id="product_page_main_image" type="small_image">
    <width>460</width>
    <height>460</height>
    <aspect_ratio>true</aspect_ratio>
    <frame>false</frame>
</image>

Check all other tags, not just a tag with the id product_page_main_image check others too.

<frame>false</frame> was an issue in previous versions, it was not working in old 2.x versions and reported earlier

Note: If you still getting white border issue, then you need to use the below fix until it's offically released:

After creating a plugin to convert the string value to an integer (which properly casts to a boolean), the image frame is not added. For details see this

public function beforeSetKeepFrame($image, $keep)
{
    if (is_string($keep)) {
        $keep = (strtolower($keep) === 'true') ? 1 : 0;
    }
    return [$keep];
}

Related Solutions

Magento – Magento resizing images for cache and making them bigger

I found where Magento is saving the file, it actually re-saving it with a higher compression/image quality than was used in PS, thus the file is getting bigger. I can fix it but it would mean overriding a Magento core file.

This is the file responsible for increasing the image quality: app/code/core/Mage/Catalog/Model/Product/Image.php

class Mage_Catalog_Model_Product_Image extends Mage_Core_Model_Abstract
{
    protected $_width;
    protected $_height;
    protected $_quality = 90;

    /** CODE OMMITED **/

    /**
     * Set image quality, values in percentage from 0 to 100
     *
     * @param int $quality
     * @return Mage_Catalog_Model_Product_Image
     */
    public function setQuality($quality)
    {
        $this->_quality = $quality;
        return $this;
    }

    /** CODE OMMITED **/

    /** This function resizes the image**/
    /**
     * @return Varien_Image
     */
    public function getImageProcessor()
    {
        if( !$this->_processor ) {
//            var_dump($this->_checkMemory());
//            if (!$this->_checkMemory()) {
//                $this->_baseFile = null;
//            }
            $this->_processor = new Varien_Image($this->getBaseFile());
        }
        $this->_processor->keepAspectRatio($this->_keepAspectRatio);
        $this->_processor->keepFrame($this->_keepFrame);
        $this->_processor->keepTransparency($this->_keepTransparency);
        $this->_processor->constrainOnly($this->_constrainOnly);
        $this->_processor->backgroundColor($this->_backgroundColor);
        $this->_processor->quality($this->_quality);
        return $this->_processor;
    }

At the beginning of the file the quality level is hardcoded to 90 and then applied in getImageProcessor(). By commenting out $this->_processor->quality($this->_quality); temporarily I can see that the issue goes away.

Why would Magento do this? This seems like it should be a common issue too. Is the best solution just to create a class override for this core Magento file?

Magento – How Magento generates Product Images Cache

Product cache images are the default feature of Magento.

This is cache images are created on basically at the category and product pages are loaded at frontend.

And frontend cache images size depend on theme setting https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/themes/theme-images.html

Also using the command line php bin/magento catalog:image:resize you can generate the cache issue.

Best Answer

Related Solutions

Magento – Magento resizing images for cache and making them bigger

Magento – How Magento generates Product Images Cache

Related Topic