picture

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #llm #android #docker #nodejs #java #windows #kubernetes #security #openai

(★ 47)

Responsive images based on the 'picture' element proposal. See http://picture.responsiveimages.org/.

picture Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

picture
=======

Responsive images based on the 'picture' element proposal. See http://picture.responsiveimages.org/.

##Why?
* **Browser support**: Tested in IE 6-9, Chrome, Firefox, Opera, Safari, iOS and Android
* **Speed**: Uses native or polyfilled matchMedia to evaluate each ``````
* **Size**: 2.27KB minified (1.02KB gzipped)

###Picture example patterns

#####```noscript``` fallback which requires data-alt attribute on data-picture element.

```

#####```img``` fallback with the lowest size/quality src which does not require data-alt attribute on data-picture element as long as it is present on the img element.

```

<img src="lib/my_low.jpg" alt="img alt" />

```

#####```noscript``` fallback which requires data-alt attribute on data-picture element. data-picture element has data-srcset attribute.

```

 <noscript>
 <img src="lib/my_low.jpg" alt="my fallback content" />
 </noscript>

```

#####```img``` fallback with the lowest size/quality src which does not require data-alt attribute on data-picture element as long as it is present on the img element. data-picture element has data-srcset attribute.

```

 <img src="lib/my_low.jpg" alt="img alt" />

```

#####```noscript``` fallback which requires data-alt attribute on data-picture element. data-picture element has data-src attribute.

```

 <noscript>
 <img src="lib/my_low.jpg" alt="my fallback content" />
 </noscript>

```

```

 <img src="lib/my_low.jpg" alt="img alt" />

```

We've chosen to use a ```span``` as our picture element because it's not as common as ```div```s, meaning it will be faster when requesting an element collection and return less results to loop over.

Fallback for users without javascript enabled will see the ```noscript``` content.

###Future improvements
* Supported v2.2.0 ~~```picture``` ```data-srcset``` attribute support (supercedes ```src``` attribute and ```source``` elements)~~
* Supported v2.2.0 ~~```picture``` ```data-src``` attribute support (supercedes ```source``` elements)~~
* Supported v2.2.0 ~~```source``` ```data-srcset``` attribute support~~
* Supported v2.2.0 ~~Content negotiation based on the previous 3 ways of setting image content~~
* ```picture``` ```data-media``` attribute support (currently matched media query)
* Supported v2.2.0 ~~```picture``` ```data-current-src``` attribute support (current src url)~~
* ```picture``` ```data-width``` attribute support
* ```picture``` ```data-height``` attribute support

###Dependencies
None, unless a polyfill is required for window.matchMedia with listener support. If your project requires support of IE <= 9 or iOS <= 5.0 or Opera <= 12, try https://github.com/weblinc/media-match. It's another of our projects focused on performance, near full CSS3 feature support and broad browser compatibility.

picture

picture Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

picture

picture Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README