Frontend visual optimization in the retina Era

With the release of the new iPad, the tablet will gradually enter the retina era. In high-resolution devices, the image display effect is usually unsatisfactory. To achieve the best display effect, you need to optimize the image, here are some optimization methods:

I. Replacing images with CSS

This is applicable at any time. Currently, we can use more style sheets to create design results, css3's rounded corners, gradient, model box shadows, and font shadows can help us deal with most visual effects and deliver excellent performance at various resolutions.

CSS button 2. Providing HD images for high-resolution Devices

If an image is required, two sets of images, one set of original size (for general devices) and one set of two times the size (for high-resolution devices) are usually prepared ), the following two methods can be used to call different images based on the device Resolution:

1. Use CSS media queries to load different background images based on different resolutions.
Inline style:

@ Media only screen and (-WebKit-Min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {/* 2x resolution execution style */}

External link style:

<link href="retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/>

2. Use JavaScript to replace the image address, which is suitable for external link images loaded by labels.
First, use window. devicepixelratio to determine whether the resolution is high, and then replace the image address.

For details about this method, refer to the following article on the analysis of the apple.com solution:
Http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
Below is the source code of image_replacer.js mentioned in the article:
Https://gist.github.com/2029936

Iii. Icon Optimization

The unique icon is an essential design element for most websites. The conventional processing method is to use sprite technology and use the CSS media queries method described above to achieve the optimal display effect, in addition, front-end engineers are also exploring some new optimization methods:

1. Icon Fonts
Make the icon into a special font and use the Custom font (@ font-face) of css3 to call

Advantages:

• Small file size, generally 20-50 Kb;
• You can use CSS to change the size and color, add shadows, hover colors, and so on.

Disadvantages:

• High production costs, you need vector graphics processing software and professional font production software;
• It is not easy to maintain. Different browsers support different font formats and require multiple copies.

Some ready-made icon fonts resources can basically meet the general design requirements:

• Modern pictograms
  
• Font-Awesome
  
• Social media icons pack
  
• Pulsarjs @ fontface
• Clickbits web icon System (pay-as-you-go)

If you are interested in the creation method of icon fonts, refer to this Article "css3 icon font full Guide":
Http://www.qianduan.net/css3-icon-font-guide.html

2. CSS icon
Similar to icon fonts, the difference is that CSS is used to create various icons.

Advantages:

• Small file size, equivalent to icon Fonts
• You can also modify the size and color as needed, and add shadows.
• Easy to modify and flexible to call

Disadvantages:

• Limited by browser rendering capabilities, different performance varies in different browsers

Resource:

• Pure css gui icons
  

The creation of CSS icons will be introduced later (digging a hole first =. =)

3. SVG icon
SVG is a scalable vector image. It is called in the same way as JPG, PNG, and other formats. It can be loaded through CSS:

background-image: url(‘sprite.svg‘);

Advantages:

• The file size is small. Because SVG is a graph defined in XML format, it is more compact.
• The image quality will not be compromised during scaling.
• Can be used to dynamically generate images

Disadvantages:

• Limited by browsers, SVG-supported browsers include Internet Explorer 9 +, Firefox 4 +, chrome 4 +, Safari 4 +, and opera 9.5 +.

Iv. Canvas Image Processing

This method is a little biased. An article from zookeeper: simulation of @ 2x images on the retina display screen

Advantages

• Most of the images have better results than the original ones, so you do not need to create @ 2x images.
• Unified maintenance of multiple terminals and progressive enhancement of scripts
• File saves a small amount of bandwidth, 3G still has a certain advantage with edge, not to mention.

Disadvantages

• The effect is really not as good as @ 2x. Of course, if there is a better algorithm, it is hard to say
• Cross-origin error in reading image data from canvas
• The current implementation of sharpening is basically the operation of reading points. It is estimated that large image mobile phones cannot afford it.

Conclusion

It is good to achieve the best visual effect under high resolution, but the loading speed is also an important indicator of user experience. So sometimes we also need to find a balance between high quality and high speed. here we can use navigator. connection to determine the user's network environment. If it is edge, consider whether to provide HD images to the user.

Frontend visual optimization in the retina Era