Anything with a thumbnail and click to enlarge

[IamAlta]

What's the issue?

Feature request.

The idea of AMP is to accelerate the page loads. However, loading an extra large image as a thumbnail defeats the purpose.

Many times, the visitor does not want to see an extra large image, and loading the extra large image results in unnecessary transit bits. Some extra large images cannot stand much compression if it's a detailed image where the customer wants to see the detailing.

amp-carousel and amp-lightbox have these issues. I am unaware of any other functions that might.

The request is to load an small thumbnail then load the larger image from the server if and when the visitor clicks the thumbnail. This can reduce page load times to give the end-user a better experience.

How do we reproduce the issue?

n/a

What browsers are affected?

All browsers

Which AMP version is affected?

Powered by AMP ⚡ HTML – Version 1524089272632

[nainar]

cc @cathyxz

[cathyxz]

This is blocked by #11575. For reference, we have for addressing this in lightbox specifically #12929. Ideally we should be able to achieve this with srcset and sizes, which is another reason to prioritize #11575.

[IamAlta]

Thanks for the suggestion to achieve this with srcset and sizes. It's not immediately intuitive how it'll load a small image with the page load, and then load a larger one when the small image is clicked. I'll research it. Have a wonderful day, @cathyxz!

[cathyxz]

Actually maybe I'm over-complicating this. @IamAlta there might be a few simple ways to achieve this:

1. You can have a small image, on tap open a <amp-lightbox-gallery> of another (hidden) image.
2. You can achieve this with vanilla <amp-lightbox> by putting the larger image in a lightbox and making the small image a tap target.

<amp-lightbox-gallery> is currently launched under an experiment.

srcset and sizes would enable you to specify a srcset and a sizes attribute, defining a src for each device width, and the browser would not load the larger image (this is subject to the browser's native logic) until it needs it. It would be up to components like <amp-lightbox-gallery> to figure out which url to choose based on the image dimensions.

[IamAlta]

@cathyxz,
Thank you. That will work.

I was unaware that you can put the larger image in the lightbox and it won't load until the lightbox is displayed.

REQUEST: Perhaps add that information to your Amp by Example and Amp Project - that an image can go into the amp-lightbox, and it won't load until the button is clicked.

I hesitate to try the amp-lightbox-gallery at this time because we are so close to launch (I hope).

Make it a wonderful day! You certainly deserve it.

[IamAlta]

Oh, @cathyxz,
I assume that I need a separate lightbox container for each thumbnail that has a large image.

[ampprojectbot]

This issue hasn't been updated in awhile. @cathyxz Do you have any updates?

[cathyxz]

This should work out of the box with <amp-lightbox-gallery> if you enter the srcsets correctly.