Dried food! How to place and process pictures and videos in response web pages


@ Chen Zimu: responsive web design, is a popular web development thought, it is the use of flexible grid system, make the page display mode can be adaptively according to the size of the screen access device. Is expected in 2015, mobile end users will increase from the current 800 million to 1 billion 900 million, which means that we are now a desktop browser and web design, will be on their mobile phone and tablet use showed a very bad experience.

but as the actual situation changes, responsive web design still has a complex set of complications. The remainder of this paper is to elaborate how, in response to the page placement and processing of multimedia elements, such as pictures and videos, the ultimate goal is to help you make a reliable website, can make these elements seamlessly in a variety of hand operation of the loading equipment, to enhance the user experience.

Image processing in

responsive web page design

talks about the response picture processing method first. In response to web design, the problem of image processing is more or less similar to the design of navigation bars in traditional web pages. With the popularization of the new device, the higher pixel density screen makes any flaw "is very obvious, therefore, the core problem of image processing is how to ensure that the website (especially the picture) all aspects can be as flexible as possible, and to ensure that each of the pixels in the screen under fuzzy not high.

pictures show the problem

first, when the web page is responding to the device, there is no specific picture publishing standard. And for this problem, there are a number of options available for you to choose from. However, at this point, the question arises: what should the image do in 3G mode on the mobile device under the retina screen?. In the case of poor Internet speeds, should the size of the picture be automatically optimized (reduced)? This is what is called "art design". The picture provided by the website can be displayed on different screen devices, but it is still far from enough. Users of small screen devices may not be able to see the details of the picture at all. Then, on the basis of "normal display," a single version of the small screen will be displayed, allowing the user to see the details.

suggested that developers should be all the different size of the pictures are pre uploaded to the web page, and set up the CSS and the media inquiry function, will be too large or too small pictures are hidden, let the browser to download the image pixels perfectly matched. However, this is not the case. The browser has downloaded all the relevant pictures before loading the CSS class, which makes the page more bloated and loaded longer.

picture problem possible solution


goes on, make it clear that there is no solution for each screen to be perfect

Leave a Reply

Your email address will not be published.Required fields are marked *