Image Sizing

[harpkit]

Moving from Suivant to Shadows (v2) in a dev environment and using the new branches feature in Miva 10. (Also testing out Colossus because, with new branches feature, I can do that kind of thing.)

In Shadows - the image machine seems to function differently. It is doing two things that don't make sense to me.

1) On the PROD pages - Images are being enlarged to fill bounding box dimensions. I have some old images that are pretty small and they are being stretched to fit bounding box. Looks bad. For example I have an image that is 105 x 200px and it is being scaled up to 500 x 952px

2) Product images are being scaled so that the width matches the bounding box and the height is scaled in relation to that. In the above example, the bounding box is set to 500 x 500px. But instead of scaling up the larger dimension (the height), it is giving preference to the width and ignoring the height. It seems like the bounding box should scale largest dimension to fit and scale the other dimension in relation to that.

Is something wrong here or is this just how images are treated in Shadows?

[Matt Zimmermann]

Hi Matt,

The images are set to scale proportionality based on width, with a max value of 100%, and automatically in height. To best utilize the new image layouts in Shadows, I would recommending updated product photography and uploading images which are in the 960x960 range.

[harpkit]

Thanks, Matt.

I agree that I need to update my product photography:)

But the scaling up of smaller images doesn't make sense and I don't see this behavior in Suivant or Colossus.

[Matt Zimmermann]

Hi Matt,

The smaller images, to the best of my knowledge, should remain their size assuming you are using image management to control them on the page. You should be able to correct for it via CSS if needed.

[lesliekirk]

You don't want to try and upsize a smaller image. It's always been best practices to start large. Then, in the case of the Image Machine, let it do its thing based on the size you'd like your smaller images. I know that it's come up in discussions as to what size the largest image should be. I use a wide range from 800 by 800 to 1200 x 1200.

[harpkit]

I created a new branch in my dev site and applied the Shadows v2 Framework. Smaller images are still being upsized in the new branch as well. It seems like this is an issue within Shadows v2. I don't see this behavior using Suivant or Colossus. If there is some custom CSS that will fix this, I'd love to know what it is...

[Matt Zimmermann]

HI Matt,

You could try adding "width: auto;" to the image. However, this is not something you would want to do globally, only to the affected images.

[harpkit]

Matt Zimmermann - all things being equal - I'd rather not fix this issue by adding custom css to every picture that is smaller than 500x500px or updating all my product photography. I have quite a few smaller images and need to spend my time updating the html in theproduct descriptions to work with the css classes in Shadows. I would rather figure out what is causing this issue. You mentioned in an earlier post that you don't believe smaller images should be enlarged by image machine in Shadows. Is this true for sure? If so, then something on my site is causing the issue and I'll probably need a little help to figure out what it is.

[harpkit]

For the record, Alexander in Miva Support figured it out. Sounds like there may be a bug in Shadows V2.

The fix was to change one line of code in the PROD > Product Display Layout

Changed this:

<img id="main_image" class="x-product-layout-images__image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" loading="lazy" width="&mvte:product_display_imagemachine:image_width;" height="&mvte:product_display_imagemachine:image_height;">

To this -

<img id="main_image" class="x-product-layout-images__image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" loading="lazy">

[Matt Zimmermann]

Hi Matt,

The use of the width and height attributes was added to help with the cumulative layout shift section of web vitals. The assumption being that a store, when upgrading, would use best practices to make images of uniform sizing. If this is not the case, then the removal of those attributes may be necessary, however CLS will be impacted.