A number of carousels claim to handle responsive images but this only seems to be for the case of resizing a large image to fit on smaller screens. The full image is still downloaded. Now that we have the <picture> element and srcset officially ratified and a workable polyfill in picturefill 2 it would be good to make use of this in carousels for serving up a specific image crop at a specified breakpoint and not just resizing one very large one with the wrong crop for smaller viewports. (What the <picture> element aims to provide)
I’ve experimented with the Twitter Bootstrap 3 carousel and have been able to use the srcset attribute successfully but this is mainly just used for swapping out the same image crop for different resolutions and it leaves it up to the browser to decided which is the best one to serve. The chosen image varies between current browsers however and can cause issues.
The <picture> element is designed for the purpose of serving up a different crop and taking the decision out of the hands of the browser. However I’ve not been able to get it to work with the Twitter Bootstrap carousel. I’ve also been unable to find any results on searches where this is used in any other carousel. Is it possible to convert the Boostrap carousel to use the new tag? Has anyone been able to get it to work?
