search

artpolikarpov / fotorama

A simple, stunning, powerful jQuery gallery.
http://fotorama.io
Other
1.58k stars 380 forks source link

picture tag support #550

Open comrade-tea opened 5 years ago

comrade-tea commented 5 years ago

please add picture tag support and opportunity to use it with lazy load

seltix5 commented 4 years ago

that wold be great to use the new WEBP format

jesperbrejning commented 4 years ago

Yes, tag support would be great. How can we implement that? :-)

maximal commented 4 years ago

<picture> tag support is a good option but it has no lazy loading.

It would be great if we somehow had an ability to specify WebP URLs for large images when using thumbnails at the same time.

For example, now I use Fotorama like this:

<div class="fotorama" data-nav="thumbs">
    <a href="/file-1.jpg">
        <picture>
            <source srcset="/file-1_thumb.webp" type="image/webp" />
            <img src="/file-1_thumb.jpg" />
        </picture>
    </a>
    <a href="/file-2.jpg">
        <picture>
            <source srcset="/file-2_thumb.webp" type="image/webp" />
            <img src="/file-2_thumb.jpg" />
        </picture>
    </a>
</div>

So, I’m using WebPs for thumbnails but have no ability to use it for large images, as they are specified by href attribute and I got different URLs for JPGs and WebPs.

This can be solved server-wise by providing one URL for different versions of the image (web server checks for Accept: image/webp header and output WebP image instead of JPG one), then it works fine. But Fotorama could provide functionality to specify different URLs.