Move WEB-CSS to replace higher-quality images for retina screens

Source: InternetAnonymoustime: 12-24 10:37:45"Big Small" Reviews: Retian seems to be a trend on screen display, which is a new challenge for web designers, and mobile app designers have learned how to display better quality images for Retina screen devices to improve the user experience; You'll see how to use the CSS3 technique to replace a higher-quality image for the retina screen in a web app

Special Statement: This article is based on Stéphanie Walter's English article "the Mobile web:css Image replacement for Retina Display Devices", the entire translation with our Own understanding and thought, if the translation is not good or wrong place also please peer friends pointing.

There are many devices where "devicepixelratio" is greater than 1.5 or equal to 2 (window.devicepixelratio = physical pixel/dips). My Samsung project is the latest iphone and ipad version set to "Devicepixeratio" equals "2". Retian seems to be a trend on screen display, which is a new challenge for web designers.

Mobile app designers have learned how to display better quality images for Retina screen devices to improve the user experience. They provide two sets of images for normal display and retina screens, and four sets of different size images for Android devices.

The IPhone5 and new ipad have started using Retina screen display technology. In this article, you'll see how to use the CSS3 technique to replace a higher-quality picture of a Retina screen in a web app.

The story behind the code

It all started with the creation of a jquery mobile app for the iphone. The idea was to use a complete "HTML5 jQuery Mobile" application and embed it in the "Native Shell" using "Phonegap".

For this application, I created a tab bar at the bottom, a logo at the top and a copy of the tab bar for iOS. The "header" and "Footer" sections both use the technique of picture replacement text, which displays the logo icon at the top and the corresponding tool tag icon at the bottom.

The story just happened, and when I tested it on my iphone 4s device, I saw that the logo on the top and the icon at the bottom were magnified, and looked blurry, with a very poor visual effect.

DEMO

To better illustrate the problem, I created an iOS-like application on this machine so you can figure out what's going on. Whether you have a retina device, if you want to test can be used on your mobile phone click, the same into you can also click to download the source code. (If you want to imitate to make a simple mobile phone page, this is also an example yo).

As I said, if you load a page on a non-retina device, it looks like a good effect, but when you load a page on a retina device, the picture on the page will be rasterized and look blurry.

Since the pixel scale (devicepixeratio) is 2, this time the picture will also be enlarged twice times, this time caused the picture in the settings display when the image is stretched, rendered out when the blur. Below are some of the rasterized images captured from IPad3, IPhone4, and "Samsung" devices.

Effects under the Samsung (Galaxy Nexus)

The effect under the IPhone4

The effects of IPad 3

Technology of picture substitution

In this case, replacing the image with the retina will have different effects with different techniques.

The first picture we need to replace is the logo at the top. Here, make sure that only the height setting is not set to width.

HTML structure

Copy CodeThe code is as follows:
<div class= "Ui-header" >
</div>
CSS Code

Copy CodeThe code is as follows:
. Ui-header h1{
Color: #fff;
Display:block;
outline:0 none!important;
Overflow:hidden;
margin:0;
Text-align:center;
Text-overflow:ellipsis;
White-space:nowrap;
text-indent:-9999px;
Background:url (img/logo.png) No-repeat Center Center;
height:33px;
}
Please note: Only set height here do not set width

The second is to add a picture to the Delete button. We kept the text, just using the ": Before" pseudo-class to add an "icon" to the button.

HTML structure

Copy CodeThe code is as follows:
<p><a href= "#" > Delete Item </a></p>
CSS Code

Copy CodeThe code is as follows:
. delete:before{
Content: "";
Display:block;
width:20px;
height:20px;
Position:absolute;
left:6px;
Background:url (img/delete.png) no-repeat;
}
Here, both the width and height are set for the element, but no padding is set.

The next step is to add an icon to the download button.

HTML structure

Copy CodeThe code is as follows:
<p><a href= "#" > Download </a></p>
CSS Code

Copy CodeThe code is as follows:
. Download {
Background:rgb (222, 227, 232) URL (img/nuage.png) no-repeat 8px 6px;
BORDER:1PX Solid RGB (199, 206, 212);
padding:25px 0 25px 120px;
font-size:20px;
Color:rgb (144, 160, 176);
text-shadow:0 1px 1px RGB (239, 242, 245);
}
This is the third method of invoking a picture, in which only the padding is set and no width or height is set.

But to make the icon on the footer, we still set the height and width, and there is the inner margin.

HTML structure

Copy CodeThe code is as follows:
<a class= "bubble button" href= "#" > Bubble </a>
CSS Code

Copy CodeThe code is as follows:
. Ui-footer. button{
Background-color:rgba (187, 185, 185, 0.2);
BORDER:1PX solid RGB (22, 22, 22);
box-shadow:0px 1px 2px Rgba (0.5) inset;
text-indent:-9999px;
padding:10px 15px;
width:40px;
height:40px;
Background-position:center Center;
Background-repeat:no-repeat;
Margin:0 5px;
}
. bubble{
Background-image:url (img/bubble.png);
In the non-retina, we have other options to make the image substitution effect.

pixel (pixel-ratio) query solution

The next step is to get these settings to load better-quality images. I think of the "device-pixel-ratio" media query pixel ratio. I've never used it, but I decided to give it a try, using this property, you need to add some browser vendors ' prefixes.

The idea was simple, and I decided to load a twice-fold picture for the Retina screen device, and when I was an iOS app, I chose the @2x way to load high-quality images for the retina device. That's how I end up doing it.

Copy CodeThe code is as follows:
@media only screen and (-webkit-min-device-pixel-ratio:2),
Only screen and (Min--moz-device-pixel-ratio:2),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1),
Only screen and (Min-device-pixel-ratio:2) {
#myelement {
Background:url ([email protected]) no-repeat;
}
}
You'd think it would be nice to do that, yes, the retina device loads high-quality images, but the problem is that this picture pixel is twice times the size of an image loaded by an ordinary device. This still does not solve the problem. Is the Samsung device display effect, the picture is not blurred, but is not the perfect solution.

borrowing the Background-size property to complete

Now we've loaded the images for the retina device, but we need to address the size of the image display so that the image size is displayed correctly on the Web. To achieve this, we need to borrow the powerful Background-size property and adjust the size of the background image as needed. You only need to set the width using the "percent" or "auto" values.

In the code is very simple to implement, (note: Here with the ID of "#retina" for this case set background-size, of course you can write code according to your own needs).

Don't you remember? When we write a style for the head logo, we do not set the width, only set the height, this is a trick, we just need to give the element's background-size to set the height of the background image and the height of the element, while the width of the auto.

Copy CodeThe code is as follows:
#retina. Ui-header h1{
Background:url (Img/[email protected]) No-repeat Center Center;
Background-size:auto 33px;
}
For the Delete button, it is easier, we set the element width and height at the same time, without setting any padding, we only need to set two value for Background-size to 100%;

Copy CodeThe code is as follows:
#retina. delete:before{
Background:url (Img/[email protected]) no-repeat;
background-size:100% 100%;
}
For the download button picture is a bit of trouble, not to set any width and height of the element, this time can only follow the non-retina image size to set the Background-size value.

Copy CodeThe code is as follows:
#retina. Download {
Background:rgb (222, 227, 232) URL (img/[email protected]) no-repeat 8px 6px;
background-size:70px 68px;
}
For the footer icon, although we set the width and height of the element, we have one inside, so we have to set a definite value for background-size:

Copy CodeThe code is as follows:
#retina. bubble{
Background-image:url (Img/[email protected]);
}
#retina. loupe{
Background-image:url (Img/[email protected]);
}
#retina. folder{
Background-image:url (Img/[email protected]);
}
#retina. Ui-footer. button{
background-size:40px Auto;
}
Now it looks perfect.

What about the picture tag img in HTML?

This is just a way of working with pictures in the style, but we also have images in the HTML structure. Because, you need to know some picture-responsive tricks. However, the use of Retina.js is also a very simple method, only need to load a "@2x" image in the same file directory, and then the same as the JS script to achieve. There is also a Retina Images plugin that can be implemented, but this plugin requires some other settings.

Limitations and conclusions

As you can see from the above case, each case uses a different approach, and if you want to do better, you need to be familiar with the use of the Background-size attribute. Of course you can also hack to implement, loading different pictures for non-visual film and retina settings. I'm not an expert either, nor do I know how to load different pictures for different devices. If you are interested, you can test it.

Background-size is a property of CSS3, which is limited by the browser. Even if you don't use the Background-size attribute, instead of using two different pictures, there are many drawbacks, not easy to maintain, and enough space to load the pictures. So you have to think about which technology to use, even if you have twice times the size of the picture to scale, you have to consider the performance problem.

In summary, this is a good way to solve the clear and smooth retina screen, but whether it is used in a project, should not be used, and depends on your project needs. So this technique is not suitable for everyone.

further exploration

If you want to not load two files and make your icons look good and interesting, you can look at the pictures produced by icon or SVG. You can look at this article, but unfortunately the technology introduced here has not been widely supported.

Translator Sign Language: first translation front-end technology blog, the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!