Responsive Product Images Issue

[feemish]

In order to have Responsive Product Images, support told me over the phone to edit
Responsive CSS, line 653 (approx)
Change
<actinic:variable name="ProductImageMaxWidth" />px
to
100%
So it looks like this
.product-image > img, .std-product-details img {
min-width:1px;
width:auto !important;
max-width:100%;
height:auto;
margin-right:1em;
}

I did this and it works, large product images now shrink down with the screen size.

However there is a problem when using a small product image.
On shrinking the screen the smaller product images actually resize larger (and therefore blurry).
As you shrink the screen down you can see the images jumping from the correct size to oversize.
I presume this is because they are trying to fill the max width 100% of the table.

For example shrink the screen on this page and see how the product images jump from ok to oversize
.
Username: removed
Password: removed
http://www.arka.org.uk/acatalog/fake-flesh-plugs-tunnels-p1.html


Any clues on how I stop this happening?

[peblaco]

The Product Page images are responsive and images stop at the specified max width in the Settings. There are a few possibilities, ideally make sure all images are a consistent size if possible, or change max width to the size you want to stop at but that would also restrict images of a larger size, or it may require custom work.

Fixes added to 14.0.2 from the release notes:
"Product and fragment images are now always responsive when necessary, regardless of which page they appear on, SD-5303"
"Product images in section pages are now responsive even if they are links, SD-5189"
I think fragment images work but still several issues with product images.

I thought the responsive image problems were fixed in the 14.0.2 patch, but several images still aren't responsive. Recent bugs I noticed:
"Over-enlarged images in the marketing lists. SD-5383" - For product pages if the marketing list has a small image it makes it larger.
"Section images are responsive when column count is 1, but there are problems when subsections are in multiple columns. SD-5388" - I don't think their description is correct because if you set large section images none are responsive.
"Extended info images being over-enlarged - SD-5294" - fix due in a forthcoming release
"Carousel not responsive / when product column count is more than 1 - SD-5361" - fix due in a forthcoming release

Other topics for reference:
24-Nov-2014 - Some features aren't responsive
26-Nov-2014 - Product images don't seem to be responsive
04-Apr-2015 - Section Image "Links" = not responsive
13-Apr-2015 - fragments not showing properly in responsive theme (images on fragments were small)
22-Apr-2015 - Extended Info Image Size Wrong in Tablets
25-Apr-2015 - Smart Responsive Theme Product Images not resizing
01-Jun-2015 - Carousel not responsive on Firefox (Smart Responsive) (when product column count is more than 1)

[feemish]

That list is worrying!

>>>There are a few possibilities, ideally make sure all images are a consistent size if possible

I think this is my only option a the moment.
Most of my images were made using trhe philosophy that the smallest byte size was best, for download speed etc.. so I cropped everything as tight as possible.
Now, with responsive design, it looks like all images are best made a standard size.
Oh well back to photoshop.

[peblaco]

Yes a small size as possible is best. If you want to optimise the page speed further you may want to look at creating small thumbnail images and add them into your product thumbnail field then change layouts for matketing lists which currently display a full size image squashed, to instead display the thumbnail image.

[feemish]

RE Marketing List Images: Good Tip !