cancel
Showing results for 
Search instead for 
Did you mean: 

Catalog Product Image Quality

Catalog Product Image Quality

Given to the documentation it's possible to change the image properties in view.xml.

But sadly the quality of the image isn't reflected.

 

So it's only possible to change the values for the properties:

The quality property is missing.

 

Please add the possibility to change the image quality property.

 

 

1 Comment
Established Member

Yes, i wish me same so, more options in view.xml.

 

Following options was good in the view.xml Smiley Happy

 

<crop>{true|width|height}</crop> (if defined, the option <frame> will ignored and <aspect_ratio> can be false or true):

true: Crop the image on width and height

width: Crop the image only on width

height: Crop the image only on height

 

<crop_position>{left|border[,top[,right,[bottom]]]}</crop_position>

left|border: <empty> or the number in pixel to move the starting point from left. If only this value defined, then is this similar to ‘>left,top,right,bottom<’.

[optional] top: <empty> or the number in pixel to move the starting point from top

[optional] right: <empty> or the number in pixel to move the end point from right

[optional] bottom: <empty> or the number in pixel to move the end point from bottom

 

<viewport type=”{w|x}” [scale=”{float}”]>

    <width>{number}</width>

    <height>{number}</height>

</viewport>

Note: width and height will ignored, if in viewport the scale defined.

Note: this should result on ‘->toHtml()’ in a img-Tag with filled srcset-attribute and corresponding images.

 

 

Examples:

 

Example basic image: 3000 x 2000px.

 

<image id="my_cropped_image" type="xxxxxx">
    <width>500</width>
    <height>500</height>
    <crop>true</crop>

    <crop_position>10</crop_position>
</image>

 

Expected result:

  • Resize first the image to 780 x 520px (aspect_ratio = true).
  • Crop the image from this region: left 140px and top 10px with width 500px and height 500px.

 

 

<image id="my_cropped_image" type="xxxxxx">
    <width>500</width>
    <height>500</height>
    <crop>width</crop>

    <crop_position>10</crop_position>
</image>

 

Expected result:

  • Resize first the image to 520 x 347px (aspect_ratio = true).
  • Crop the image from this region: left 10px and top 0px with width 500px and height 347px.

 

 

<image id="my_multisource_image" type="xxxxxx">
    <width>500</width>
    <height>500</height>
    <viewport type="2x">
        <width>1000</width>
        <height>1000</height>
    </viewport >
</image>

 

or equivalent

 

<image id="my_multisource_image" type="xxxxxx">
    <width>500</width>
    <height>500</height>
    <viewport type="2x" scale="2"/>
</image>

 

Expected result:

  • Resize the primary image to 500 x 500px.
  • Resize to a srcset image with 1000 x 1000px.
  • <img src=”primary.ext” srcset=”res1000.ext 2x”/>

 

 

<image id="my_multisource_image" type="xxxxxx">
    <width>500</width>
    <height>500</height>
    <viewport type="640w">
        <width>250</width>
        <height>250</height>
    </viewport >
    <viewport type="1.5x" scale="1.5"/>
    <viewport type="2x" scale="2"/>
</image>

 

Expected result:

  • Resize the primary image to 500 x 500px.
  • Resize to a srcset image with 250 x 250px.
  • Resize to a srcset image with 750 x 750px.
  • Resize to a srcset image with 1000 x 1000px.
  • <img src=”primary.ext” srcset=”res250.ext 640w, res750.ext 1.5x, res1000.ext 2x”/>

 

The feature request headline should be changed to "Catalog Product Images (view.xml) - Options Quality, Crop and Viewport" Smiley Happy