Image processing in responsive web design

Responsive web design, is a popular web development idea, it is the use of flexible grid system, so that the Web page display mode can be accessed according to the device's screen size specifications and adaptive. The number of users on the mobile side is expected to grow from 800 million to 1.9 billion in 2015, which means that the pages we currently design for desktop browsers will have a very bad experience with their phones and tablets.

But with the change of practical application, there are a series of complicated complications in the design of responsive web pages. The rest of this article explains how to place and process multimedia elements, films and videos in a responsive web page, ultimately to help you make a Web site that allows these elements to seamlessly load and run on a variety of handheld devices to enhance the user experience.

Image processing in responsive web design

First of all, the response of the image processing method. In the responsive web design, the problem of image processing is more or less similar to the navigation bar design in traditional Web pages. With the popularity of new mobile devices, the higher pixel density of the screen makes any one of the flaws of the page appear to be extremely obvious, so the core issue of image processing is how to ensure that the site (especially the picture) in all aspects of the flexibility, and ensure that each pixel will not be blurred under the high split screen.

Problems with picture display

First, when a webpage responds to a device, it does not have a specific image publishing standard. And there are a number of options available for you to choose from for this issue. However, at this point, the problem arises: in 3G mode, the mobile device in the retina screen should be treated like how. In the case of poor speed, should the size of the picture be automatically optimized (lowered)? This is the so-called "art design" problem. The images provided on the website can be displayed on different screen devices, or it is far from enough. The user of a small screen device may not be able to completely see the details of the picture, then, it should be "normal display" on the basis of a separate version for this small screen, so that users see the details.

It has been suggested that developers should be all the different sizes and sizes of images are pre-uploaded to the site page, and set up a good CSS and media query function, will be too large or too small images are hidden, so that the browser download pixel exactly match the image. However, the actual situation is not the case, the browser before loading the CSS class, it has all the relevant pictures are downloaded, which makes the page more bloated, load time longer

Possible solutions to picture problems

Before continuing with the discussion, make it clear that there is no solution for the perfect display of pictures on every screen. However, we are able to continuously explore more feasible solutions and improve the accuracy as much as possible, and here are some possible solutions for the image problems of responsive Web pages :

Bootstrap

If you start designing a responsive Web site, but you have no clue how to do it, then you should try bootstrap CSS framework. With bootstrap, you can easily reach your goals. More importantly, the styles provided by bootstrap and the classes extended on the underlying HTML elements will make the image's response easier to implement.

Focal Point

Focal Point is a framework that helps you "grow" pictures and control focus. This technique uses only CSS, and developers simply need to add a class containing the target image to the corresponding tag.

CSS Sprites

If the load time is the first thing you need to consider (it should be), then you can choose a CSS sprite, especially if you need to fit a device with a retina screen. When you fit a Web page for a high-resolution screen (such as an Apple's Retina screen), you typically add larger image resources and use media query in CSS to identify and fit the dimensions. However, the number and size of files increases dramatically and increases the number of CSS selectors in your code, referencing more files.

This can be improved if you use a CSS sprite. You can include the pictures you want on your page in a larger image for your selector to refer to. With just one HTTP request, you can get multiple picture footage locally. The photo class footage referenced by the tag is not suitable for use with CSS sprites, but the icon footage and button styles you use in the header and footer are much more useful with CSS sprites.

Keep in mind that all of these feasibility scenarios for dealing with images have their limitations. For example, the adaptive Image scheme, which requires the combination of Apache and PHP, so it is good for content management, but it is unlikely to be perfect for the site platform or host server. In addition, adaptive images depend on the need for the server to get the picture size through the. htaccess file, which means that the captured picture is not on its own server, and the script in the. htaccess is powerless. In addition, the script is not able to detect bandwidth, and if you have a 3G version of the ipad Air access to such sites, loading speed may be miserable. Most importantly, it does not solve the "art design" problem, it just adjusts the size of the original image. So, for all of this, you need to experiment to find the most appropriate solution.