0

I'm using 2.3

When i upload product image will be blur on frontend.

But backend is clearly.

How to fix low quality of product image on frontend?

Thank you!

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. 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">

       <media>
<images module="Magento_Catalog">
    <image id="cart_cross_sell_products" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="category_page_grid" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="category_page_grid-1" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="category_page_list" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>

    <image id="new_products_content_widget_grid" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="new_products_content_widget_list" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="product_base_image" type="image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="product_page_image_large" type="image"/>
    <image id="product_page_image_medium" type="image">
        <width>700</width>
        <height>700</height>
    </image>
    <image id="product_swatch_image_large" type="image"/>
    <image id="product_swatch_image_medium" type="image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="product_page_main_image" type="image">
        <width>700</width>
        <height>560</height>
    </image>
    <image id="product_page_main_image_default" type="image">
        <width>700</width>
        <height>560</height>
    </image>
    <image id="product_small_image" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="recently_compared_products_grid_content_widget" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="recently_compared_products_list_content_widget" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="recently_viewed_products_grid_content_widget" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="recently_viewed_products_list_content_widget" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
    <image id="wishlist_thumbnail" type="small_image">
        <width>350</width>
        <height>350</height>
    </image>
</images>
 </media>

       <vars module="Magento_Catalog">

        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">
            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
            <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="transition">
                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
            </var>
            <var name="fullscreen">
                <var name="nav">false</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navarrows">false</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
                <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                </var>
            </var>
        </var>

        <var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

        <var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="nav">dots</var>

                        <var name="allowfullscreen">false</var>
                        <var name="fullscreen">
                            <var name="nav">false</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                            <var name="loop">false</var> <!-- Fullscreen navigation loop (true/false/null) -->
                            <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                            <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                            <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                            <var name="navarrows">false</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
                            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                            <var name="transition">
                                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                                <var name="duration">500</var> <!-- Sets transition duration in ms -->
                            </var>
                        </var>
                    </var>
                </var>
            </var>
        </var>
        <!-- end. Gallery and magnifier theme settings -->

        <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
        <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
        <var name="product_base_image_icon_size">48</var>       <!-- Base product image icon size -->

        <var name="product_list_image_size">166</var>           <!-- New Product image size used in product list -->
        <var name="product_zoom_image_size">370</var>           <!-- New Product image size used for zooming -->

        <var name="product_image_white_borders">0</var>
    </vars>
</view>
  • Have you tried running php bin/magento catalog:image:resize – AJ47 Jan 20 at 15:17
  • Yes. Thank you for the suggested solution. I had tried this solution before receiving your letter though. But can't @AJ47 – niceonelee Jan 20 at 16:00
  • can you please add your image resolution from backend and add frontend code here ? – Aasim Goriya Jan 21 at 6:59
  • Hi, are you meaning the backend image to frontend for use? if yes, how can i do? thank you @AasimGoriya – niceonelee Jan 21 at 11:44
  • Because now very compression very blurry very low quailty @AasimGoriya – niceonelee Jan 21 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.