CSS and HTML5 Responsive Pictures

What is a responsive picture?

A responsive picture is a user agent that loads different types of images according to the resolution of the output device, without causing a waste of bandwidth. At the same time, when changing the output device type or resolution, the corresponding type of picture can be loaded in time.

CSS3 Responsive Picture

For many IOS developers, it may be a little strange to fit the Retina screen, the traditional CSS3 implementation is by loading a picture with a wide height of twice magnification, and then reducing the size of the background image by a Media Queries by one-fold "background-size : 50% 50%;", for example:

. MoD. HD H3 {background-image:url (http://img02.taobaocdn.com/tps/i2/t10s3jxn4xxxxnbian-105-160.png);/* Normal screen * /}/*-------------Retina-------------*/@media only Screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1),/* Opera */Only screen and (min--moz-device-pixel-ratio:2),/*Firefox 16 ago*/Only screen and (-webkit-min-device-pixel-ratio:2),/*Webkit*/Only screen and (min-RESOLUTION:240DPI),/*Standard*/Only screen and (min-RESOLUTION:2DPPX)/*Standard*/{. mod. HD h3{background-image:url (http://img04.taobaocdn.com/tps/i4/t1947txmjhxxccfooh-210-320.png);background-size:105px 155px;}}

The contrasting effect of two pictures:

There are some issues to be aware of when making @2x pictures:

If similar is the text content of the picture, do not directly from the large picture to zoom to small pictures, so that the text effect will be somewhat distorted, this is the problem of Photoshop rendering. You should adjust the font size and then re-typeset. Can see directly: a Amoy home effect.

The blue box is the effect of directly scaling the image size, the red box is the effect of changing the font size from number 32nd to number 16th.

The  "resolution"  media features used to define device resolution in the

CSS3 media queries , together with two media features, "min-resolution" and  ", respectively max-resolution". This specification stipulates: If query  non-square pixels  (professional terminology, refers to the height and width of pixels, can be understood as "non-square pixels." The pixels in the computer screen and in the high-definition video signal are square (pixel aspect ratio is  1:1). The pixels in the standard-definition digital video signal are not square. For example, the pixel height of the NTSC format is greater than the width, while the pixel width of the PAL format is greater than the height. ) device, the value specified in the "min-resolution" query must be compared to the most sparse size and must be compared with the most dense size in the "max-resolution" query. For "resolution" (no "min-" or "max-" prefixes) the  non-square pixels  device is never queried. In addition, some units are defined in the CSS image level 3"image-resolution" property, such as "dppx", and the browser support is as follows:

features	Chrome	Firefox (Gecko)	IE	Opera	Safari (WebKit)
Basic Features	"1""4" not supported	3.5 (1.9.1) "2"	9	9.5	"1""4" not supported
dppx	"4"	16.0	Unknown	12.10"3"	"4"

• "1"chrome supports private properties "-webkit-min-device-pixel-ratio" and "-webkit-max-device-pixel-ratio".
• "2"firefox 8.0 incorrectly accepted integer values (without units) and 16 started supporting DPPX units.
• "3"change our implementation of the resolution media query to use CSS units.
• "4"david Barr implemented the css3"image-resolution" attribute in Webkit and supported dppx,dpi and DPCM units, which version of Chrome started to support self-testing, believing that Media Queries will soon support it.

Several points to note:

1. "-o-min-device-pixel-ratio" values are fractions such as "2/3",demo, see: Opera Dev Articles
2. Prior to Firefox 16, there were two "-" "min–moz-device-pixel-ratio",min behind the two versions.
3. 1DPPX is equivalent to 96dpi.

Obviously, it is still troublesome to implement "responsive picture" through Media Queries, the maintainability of CSS code is not high, there are some hack flavor. We would prefer a native syntax to choose a different image, thankfully CSS image level 4 implements this native syntax "image-set".

"image-set" Syntax:

<image-set> = Image-set ([<image-set-decl>,]* [<image-set-decl> | <color>]) < image-set-decl> = [<image> | <string>] <resolution>

So the above example we can instead:

Background-image:url (http://img02.taobaocdn.com/tps/i2/t10s3jxn4xxxxnbian-105-160.png);/* Normal screen */ background-image:-webkit-image-set (    URL (http://img02.taobaocdn.com/tps/i2/ T10s3jxn4xxxxnbian-105-160.png) 1x,    URL (http://img04.taobaocdn.com/tps/i4/ T1947txmjhxxccfooh-210-320.png) 2x);/* Retina * /

The unit "x" here is equivalent to the "dppx", and the future unification remains to be discussed. Note that Webkit currently only implements the URL () Form of the value, color, *-gradient () and so on is not supported, and "x" negative value seems to be legitimate.

The following are the "min-device-pixel-ratio" values for some common mobile devices:

-webkit-min-device-pixel-ratio:1.0

• All non-Retina MAC
• All non-Retina IOS devices
• Acer Iconia A500
• Samsung Galaxy Tab 10.1
• Samsung Galaxy S
• Other equipment

-webkit-min-device-pixel-ratio:1.3

• Google Nexus 7

-webkit-min-device-pixel-ratio:1.5

• Google Nexus S
• Samsung Galaxy S II
• HTC Desire
• HTC Incredible S
• HTC Velocity
• HTC Sensation

-webkit-min-device-pixel-ratio:2.0

• IPhone 4
• IPhone 4S
• IPhone 5
• IPad (3rd generation)
• IPad 4
• All Retina displays for Mac
• Google Galaxy Nexus
• Google Nexus 4
• Google Nexus 10
• Samsung Galaxy S III
• Samsung Galaxy Note II
• Sony Xperia S
• HTC One X

-webkit-min-device-pixel-ratio:3.0

• HTC Butterfly
• Sony Xperia S

HTML5 Responsive Picture

css"image-set" solves the problem of the response of the background image, but what about the IMG element in HTML? As I helpless, November 2011 @brucel presented a draft resolution for HTML5:

<picture ><source src=hires.png media= "min-width:800px" ><source src=midres.png media= "Min-width : 480px "><source src=lores.png><!--Unsupported browser downgrade processing--></picture>

At the same time, a number of other ideas have sprung up, so the community discussion groups responsive Images Community Group was born. The latest specification is here: http://picture.responsiveimages.org/(http://www.w3.org/TR/html-picture-element/). As of this time, the most recent update was April 24, 2013, the canonical example:

<picture width= "$" height= "><source media=" (min-width:45em) "srcset=" Large-1.jpg 1x, large-2.jpg 2x " ><source media= "(min-width:18em)" srcset= "Med-1.jpg 1x, med-2.jpg 2x" ><source srcset= "Small-1.jpg 1x, Small-2.jpg 2x "><p>accessible text</p></picture>

You can see that the "srcset" property here is similar to "image-set", and usually the resources inside the "srcset" are fallback features, which means that the first image resource cannot be loaded and can skip loading the back-up resources.

But Apple's Eoconnor proposed a scenario like this:

Admittedly, any new standard of the proposed, there will be a variety of different voices, it is good, as the end of the Web site developers are not too concerned about the implementation of the syntax. If you have any questions, you can also go directly to the HTML5 Chinese interest group to participate in the discussion.

Source: http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/

CSS and HTML5 Responsive Pictures