The display of Web images is compatible under the "Go" Retina screen

Thanks to Apple, it brings the Retina screen revolution, allowing us to enjoy print-grade resolution on the electronic display. Because of the improved resolution, text, Flash, and SVG content in the Web page is more granular than it was originally, but the images in the Web page become unusually blurry and have very serious resolution compatibility issues. Since June 2010, IPhone4 's listing began, the page picture compatibility problem has appeared, after several years of development, equipped with Retina screen more and more electronic products, now Apple has retina technology applied to the Macbook Pro, Web images in the Retin The display compatibility under a screen has become imminent.

Here to share several compatible methods for your reference.

1. Pictures referenced by tags

Let's take a photograph of 300*200px as an example:

1

If you want this image to reach the desired display resolution in the Retina screen, simply export a clear 600*400px image using the source file of the photo, and we'll name it [email protected] and replace the existing image:

1

Replaced with @2x images, the display on the Retina screen is much clearer, and the details are completed. However, in the ordinary screen, the image display needs to be compressed by the browser, some older browsers such as IE6, 7 will display very distorted, while the large size of the picture will occupy more bandwidth, increase the page load time, reduce the user experience. With the help of JS, the picture can be automatically adapted to the normal screen and Retina screen:

1234567891011121314

<script type= "Text/javascript" >$ (document). Ready (function () {if (Window.devicepixelratio > 1) {var images = $ ("Img.photo"); Images.each ( function (i) {var x1 = $ (this). attr (' src '); var x2 = X1.replace (/(. *) (\.\w+)/, "[E-mail Protected]$2"); $ (this). attr (' src ', x2);}); </script>

Retina.js provides a more complete solution that automatically matches the screen resolution and detects if the server has a @2x version of the current picture to decide whether to replace it.

Advantages:

1. Simple operation
2. @2x large-size images are not loaded under the normal screen, saving bandwidth

Disadvantages:

1. Both standard and @2x images are loaded under the Retina screen
2. The picture will be redrawn during display
3. Compatibility issues exist in some older versions of the browser

2. CSS Background Image 2.1 Meta Queries + background-size

We take a logo background image for example, first we define the size of the logo is 100*40px, and then for the #logo set a 100*40px background image logo.png,

12345

#logo {width:100px;height:40px;background:url (./logo.png) 0 0 no-repeat;}

Next, the Meta Queries determines the minimum display pixel ratio of the device, if it is greater than or equal to 1.5, set a 200*80px background image for the #logo [email protected], and then set Background-size to show the background image as L Ogo the size. Here the display pixel than we choose 1.5 as threshold, is compatible with other than Apple's high-resolution devices, such as Samsung's Android Pad.

123456789

@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screens and (min--moz-device-pixel-ratio:1.5),/* Note that the wording here is very special */Only screens and (-O-MIN-DEVICE-PIXEL-RATIO:3/2), only screen and (min-device-pixel-ratio:1.5) { #logo {background-image:url (./[email protected]); background-size:100px Auto;}}

In this way, for normal display devices or browsers that do not support Meta Queries, a standard background image is displayed, and a @2x background is displayed for Retina devices that support meta Queries. (IE6, 7, 8 do not support Meta Queries and Background-size)

If only to be compatible with the current Apple Retina display, you can also directly determine whether the device's display pixel ratio equals 2:

123456

@media only screens and (-webkit-device-pixel-ratio:2), only screens and (-moz-device-pixel-ratio:2), only Screen and (-O-DEVICE-PIXEL-RATIO:2/1), only screen and (Device-pixel-ratio:2) {...}

Advantages:

1. Only the most appropriate picture that matches the current device will be loaded
2. Cross-Browser compatible

Disadvantages:

1. If you have a lot of background pictures, you need to write very verbose code.

2.2 Image-set

We also take the previous logo as an example, the way to achieve the following:

1234	#logo {background:url (./logo.png) 0 0 no-repeat;background-image:-webkit-image-set (URL (./logo.png) 1x, url (./[email Protected]) 2x);}

Advantages:

1. Make the link address of the picture more centralized in the CSS, the maintenance cost of the code is reduced
2. Can allow the browser to obtain a variety of size of the picture file, depending on the screen resolution or some other factors to choose the appropriate image to display, in the image matching can be more intelligent

Disadvantages:

1. Image-set is now just a draft of CSS4, currently only Webkit kernel's Safari 6+ and Chrome 21+ support this property

The final flaw is fatal, expecting the Image-set to be written into the standard, allowing more browsers to support this notation.

3. Use SVG to scale vector graphics

Compared to bitmaps that can only record pixel information, vector graphics are inherently advantageous for compatibility at different resolutions, and most modern browsers now support XML-based SVG format graphics, with simple logos, icons, or special glyphs on the web, which, if converted to vector SVG format, are displayed in The compatibility of Retina is done.

To make SVG format images, you can use Adobe Illustrator or the free alternative software inkscape.

Using the SVG format picture, you can use the HTML tag Reference, or the Background-image, Content:url () property of CSS, as we do with images in other formats, it is important to note that regardless of the form, it is best to define a piece of Size.

1

"

12345678910111213

/* Using background-image */.image {background-image:url (example.svg); background-size:300px 200px;width:300px; height:200px;} /* Using Content:url () */.image-container:before {content:url (example.svg);/* Width and height do not work with Content:u RL () */}

If you need to be compatible with IE6, 7, 8, or some other browser that does not support SVG, you will need to use a copy of the image in PNG format (for the compatibility of the PNG format Alpha channel is not discussed here).

3.1 Tags reference SVG format pictures

In the HTML tag, add a custom property of PNG format picture

1

JQuery and MODERNIZR are then introduced to determine if the current browser supports SVG, and PNG instead of SVG if it is not supported.

12345678

$ (document). Ready (function () {if (! Modernizr.svg) {var images = $ (' img[data-png-fallback] '); Images.each (function (i) {$ (this). attr (' src ', $ (this). Data (' Png-fallback '));});

3.2 CSS background referencing SVG format pictures

Introduce MODERNIZR to rewrite the CSS into the following form:

12345678910

. image {Background-image:url (example.png); background-size:30p0x 200px;}. svg {. image {Background-image:url ( example.svg);}}

For best cross-browser compatibility, avoid raster problems in Firefox and Opera, and make SVG images the smallest possible size of the parent container.

Advantages:

1. Compatible with all device resolutions
2. Low maintenance costs
3. Vector graphs can be infinitely scalable, more future-oriented

Disadvantages:

1. Not suitable for complex graphics, complex vector graphics may cause files to be too large
2. Different antialiasing algorithms may lead to different browsing experiences
3. IE6, 7, 8, early Android browsers, and some other older browsers are unable to provide native support for SVG, using the tag method may cause the browser to download SVG files

4. Favicon

Favicon retina compatibility is relatively easy, perhaps your current Favicon under the retina has been shown very clear, if not, use the ICO editing tool, create an ICO file containing 16*16 and 32*32 two built-in images, replace the existing F Avicon, the browser automatically matches the size of the built-in image based on the size of the resolution.

As for ICO editing tools, ICONXP is recommended under Windows, and Apple's Icon Composer (Graphic Tools in Xcode) is recommended under MAC.

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Reference:

• Towards A Retina Web

The display of Web images is compatible under the "Go" Retina screen