<Picture> element does not work with flickity.

[YKehinde]

It would be amazing to feature responsive images in the slide. e.g. square images for mobile and full images for desktop. Is this already supported or something you might have thought about?

[desandro]

Thanks for this feature request. Add a 👍 reaction to this issue if you would like to see Flickity add support for <picture> for lazyLoad or imagesLoaded. Do not add +1 comments — they will be deleted

[YKehinde]

+1

[rentorm]

+1

[CiaranPark]

+1

[albell]

+1. Some hopefully helpful numbers: Picture support is currently at 45% global. Safari 9 is support still TBD, but srcset/sizes have been in nightlies for awhile. IE Edge supports srcset with density descriptors, and <picture> support is under consideration, which in this case means it is on the roadmap. In the meantime there's the Picturefill polyfill. This is ready for production use.

[eikeco]

+1

[ritchieanesco]

+1

[florentb]

+1

[mhokane]

+1

[raywongjr]

+1

[sambaldwin]

+1

[pinich]

+1

[downFast]

+1

[Chriz74]

+1

[danjayrose]

+1

[spacecat]

+1

[LostKobrakai]

+1. It's sad to see that almost a year later this is still not a thing, especially as browser support is getting better even without polyfill.

[desandro]

It's sad to see that almost a year later this is still not a thing

• Flickity has 19 open feature requests. This request is the seventh highest in terms of comments.
• In the past year, Flickity has had 5 releases, adding multiple features
• In the past year, I have released Masonry v4, imagesLoaded v4, Draggabilly v2, Packery v2, and Isotope v3
• Work on Flickity v2 is happening now

The past year has been very un-sad for Flickity and Metafizzy in general. I realize it can be a bummer when the one issue you're looking for is unresolved. Please consider the larger picture.

[raywongjr]

@marzepani see #172 for srcset

[eheiser]

So, one year later, is this coming in v2? Not trolling, it's a serious question.

[desandro]

Sorry no plans to support this feature currently. <picture> is not supported by Internet Explorer or Android 4. But I may decide to take this on later.

[eheiser]

Cheers man, making due with the lazyload feature to speed things up instead. Awesome work all around!

[ItangSanjana]

<div class="main-carousel">
  <picture>
    <source srcset="x-wide.png" media="(min-width: 600px)">
    <img class="carousel-cell" src="x-narrow.png">
  </picture>
  <picture>
    <source srcset="y-wide.png" media="(min-width: 600px)">
    <img class="carousel-cell" src="y-narrow.png">
  </picture>
</div>

const flkty = new Flickity( '.main-carousel', {
  cellSelector: '.carousel-cell'
});

It worked, sort of.

[drewm]

I'd be keen to see this implemented, as I'd like to able to make webp images available where the browser supports, and for that I'd need to use <picture>.

[ozguruysal]

Hi, Flickity is great and I really like it. Isn't it time to reconsider this feature request? It's almost end of 2018 and Internet Explorer is almost a thing of past now. Like @drewm I'd like to use webp images too as well as lazy loading.

[the-hotmann]

Thanks why I'm here, I just saw this Ticket is much newer so I just want to connect my POST which I just made some mins ago to here.

I think its not much to do to achive a fully integrates <picture> lazyloading.
It almost works, just data-flickity-lazyload-srcset have to be replaced inside <source> tags!
Would love to see this feature!!!

[the-hotmann]

I think the best solution to this would be: using the <template> TAG! (like described here LINK)

The good part about it: it can lazyLoad the whole <picture> TAG at once, not like other solutions just all images inside it.

Would look like this:

<template class="slickity-lazy">
    <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
    <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
    <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
    <img src="https://dummyimage.com/4000x3000">
</template>

The TAG-Name just have to be replaced when ever you want to load its content!

I just made it!
<template> in the source-code but made it work with JS

Here is my DEMO - (change height to see its working)
Selfhosted, so may not online for years

[the-hotmann]

@desandro may you have a look at this. Would be awesome if you could implement this into Slickity as I use it with <picture> tag and it cant lazyLoad..

[the-hotmann]

I just made another DEMO which works with vanilla JavaScript and DeepCopy.

DEMO 1: LINK
DEMO 2: LINK

Both now also have a delay in the function of 500ms to make it more visible to the eye and better noticeable in the Dev-Console under Network.
I personaly like DEMO 2 more. But both of them require a html like this:

<div class="carousel-wrapper">
    <div class="carousel carousel-main">
        <picture>
            <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
            <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
            <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
            <img src="https://dummyimage.com/4000x3000">
        </picture>
        <picture>
            <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
            <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
            <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
            <img src="https://dummyimage.com/4000x3000">
        </picture>
        <template id="slickity-lazy">
            <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
            <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
            <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
            <img src="https://dummyimage.com/4000x3000">
        </template>
        <template id="slickity-lazy">
            <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
            <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
            <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
            <img src="https://dummyimage.com/4000x3000">
        </template>
        <template id="slickity-lazy">
            <source srcset="https://dummyimage.com/2560x1440 1x, https://dummyimage.com/5120x2880 2x" media="(min-height: 1440px)">
            <source srcset="https://dummyimage.com/1280x960 1x, https://dummyimage.com/2560x1920 2x" media="(min-height: 960px)">
            <source srcset="https://dummyimage.com/640x480 1x, https://dummyimage.com/1280x960 2x" media="(min-height: 0px)">
            <img src="https://dummyimage.com/4000x3000">
        </template>
    </div>
</div>

Notice: the DOM/HTML now decides what and how many are lazyloaded, not "lazyLoad": 2 anymore..

Now the first two are getting loaded instantly and the other should get converted short befor coming to the viewport. At least thats how I think it would work. ANd yes I know IDs should be unique, we can change them to classes but for the demo its working

[kbav]

With WebP browser support now > 50% US and > 80% global, and file size savings in the neighborhood of 30% compared to lossy JPEG, Google is increasingly pushing for use of WebP in its site auditing tools. (See https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fflickity.metafizzy.co under "Serve images in next-gen formats".)

I'm sure none of this is news to you @desandro, but I'm currently wrestling with how to to improve some site audit scores on a site that uses Flickity everywhere (I originally built the site and am very vocal in my support for this wonderful library!) yet when it came time for a different developer to add a slider around a set of massive hero images that use <picture> for art direction and WebP support, they instead used a different slider plugin, since Flickity does not support picture. As a result, the site has two different slider plugins running. 🙃

I saw the old issue (#172) where the writer/maintainer of Lazysizes (@aFarkas — another excellent project!) helpfully chimed in on a combo method for using it with Flickity, but his demos aren't up-to-date with Flickity v2 and no longer work.

The Chrome team is working on browser-native image lazyloading, but the feature remains behind an Experimental Feature flag.

I know that I have some options between Lazysizes and several of the comments/suggestions above, but I'm writing all this out to ask for at least a recommended way forward to be documented for Flickity. Thank you for your consideration. 🙇

[aeu]

Hi - I'd like to add a comment supporting the request for this feature. Page speed and mobile optimization is and is important to us and our clients, and responsive picture elements are very helpful to achieve that goal. I have been using this library for years and I like it very much. I would greatly like to see it continue being awesome.

[koshkin-na]

+1

[patrickschaper]

This is a very small merge request that fixes the issue and includes a small unit test.Merge Request: #1109

This feature is important as srcset attribute cannot handle pixel density and viewport width at the same time.

[sadeghbarati]

https://github.com/ds300/patch-package

[desandro]

Flickity v3 support <picture> in its lazyLoad feature. imagesLoaded v5, released in 2022, supports <picture>.

Thanks for your patience with this one. I still need to update documentation.

[aeu]

@desandro - this is great, thank you.