respimg

Name Modified Size
README.md3 years ago1.35 KB
pic-large.jpg3 years ago45.04 KB
test.html3 years ago1.14 KB
test.js3 years ago3.13 KB

Responsive Images

The Proposal for Responsive Images describes a syntax which allows a user agent to choose an appropriate version of an image from several candidates. This is accomplished by adding a set of attributes to <img>, named src1, src2, etc. Collectively, these are the srcN attributes.

The grammar for these attributes are:

<srcn-attribute> = <media-query>? [ <x-based-urls> | <viewport-urls> ]
<x-based-urls> = [ <url> <resolution>? ]#
<viewport-urls> = <size-viewport-list> ; <size-based-urls>
<size-viewport-list> = <image-size> [ <viewport-size> <image-size> ]*
<image-size> = <integer> | <percentage>
<viewport-size> = <length>
<size-based-urls> = [ <url> <integer> ]#

This prollyfill attempts to mimic that functionality. It is in the earliest stages.

Proposal for RespImg Syntax

Status of the Prollyfill

Successfully parsing MQ4 media queries, which are grouped queries inside parenthesis (), separated by and. They do not account for screen, print, etc. which may be removed in MQ4.

Successfully parsing viewport urls.


All of these contributions to the Proposal for Responsive Images are dedicated to the public domain with no copyright.