The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!
I've used Picturefill to load a couple of images on my web page. They display correctly in Chrome but don't display at all in Internet Explorer 8.
Here is a sample of my code:
At my work we have our own framework and we're trying to think of the best way to implement responsive images. Images are generated from the backend code and we would like to have a single control that solves all use cases.
Since srcset seems to be…
I'm using Assemble, which currently uses Handlebars 1.3. In my templates I am using the picture element with Picturefill, which uses the current spec syntax:
When wanting to serve the most appropriate image to a users device, the list of potential resources can grow pretty quickly across sizes/ratios/pixel-densities etc.
Using picturefill we can use multiple srcset attributes to target specific assets…
I'm using picturefill as a responsive image workaround and lazysizes for lazy loading images and it works pretty well. Now there are some errors in the console of Internet Explorer (11):
Unable to get property 'push' of undefined or null…
Setting the stage, you're an ecommerce platform selling a product. That product's image exists in several places on the site as follows
In a carousel about 150x150px
On a quick view showing that product's image about 250x250
On that product's page…
I am using the Owl Carousel and Picturefill plugins and I would like to lazy load the main slider images. Any help would be appreciated. In the example url, click on the "Responsive" thumbnail (second image after the YouTube thumbnail). Then…
I have come up against a problem and I'm struggling to find the best solution.
I have a very rectangle-shaped SVG that I have 3 versions of, eg desktop/tablet/phone
Originally, I've been using the element with tags and linking to…
I'm wondering how you would incorporate lazyload.js with Picturefill, when lazyload's image syntax requires the img tag along with data-original, and Picturefill's syntax doesn't have a spot for those.
For example, this is my markup for an image…
When using the HTML and you specify more than one source and each source has a media attribute, does the browser automatically render both sources at the same time or is only one source loaded in unless the screen size is adjusted?
For…
In IE11 the Picturefill library doesn't work with Vue.js. I get the following warning:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I can…
How does one target the srcset property of the source tag within a picture element with jQuery? What is the correct jQuery code to change the value of xxxxxxxxxx.jpg and yyyyyyyyyy.jpg below?
