CSS and HTML5 responsive pictures

With the gradual popularization of Retina screens, there is a growing need for images to be adapted in the web. How to make the image in a magnified twice times the Retina screen display is still clear, once plagued the web developer, fortunately CSS3 and HTML5 have been focused on changing this situation. So what exactly is a responsive picture?

What isresponsive 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.

CSS Responsive Pictures

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 screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1),/* Opera */
Only screen and (min–moz-device-pixel-ratio:2),/* before Firefox 16 */
Only screens 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://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png);
BACKGROUND-SIZE:106PX 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 directly see the effect of the first page

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 CSS3 media Queries, which defines the device resolution, is a "resolution" medium feature that derives two media features, namely "min-resolution" and "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, such as "dppx", are defined in the CSS image Level 3 Image-resolution property, and the browser support is as follows:

features	Chrome	Firefox (Gecko)	IE	Opera	Safari (WebKit)
Basic Features	Not supported [1]"4"	3.5 (1.9.1) [2]	9	9.5	Not supported [1]"4"
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: http://dev.opera.com/articles/view/ an-introduction-to-meta-viewport-and-viewport/
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-dec l> = [<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

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, a draft of HTML5 was presented in November 2011 @brucel:

<picture alt= "" >
<source src=hires.png media= "min-width:800px" >
<source src=midres.png media= "min-width:480px" >
<source src=lores.png>
<!– Unsupported Browser demotion 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/. As of this time, the most recent update was January 7, 2013, the canonical example:

<picture width= "500″height=" 500″>
<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:

Foo-superduperhires.jpg 6.5x "
alt= "decent alt text for foo." >

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.

Summary

Originally wanted to write the first article of the New Year happy some, but there seems to be no slot point. The draft of the HTML5 response picture has just begun, but the outlook is still good. What we can do now is to use the Image-set property value in CSS, because most of the Retina screen's browsers are based on the Webkit kernel, and if you have special needs, you can use Media Queries.

CSS and HTML5 responsive pictures