Problems with images in responsive web has become an important issue. Thus resulting solution, called "Adaptive images" purpose is to come by. This allows the user to load only the images that fit the user's environment at that time. Rather than forcing users to load size. However, this method is quite complex and difficult.
Of the Adaptive Images
adaptive images originated from a group of developers. See the importance of this issue. Together to try and solve the problem. They have to report to the WHATWG to know the solutions to their problems WHATWG proposed that they should set it up as a group. They follow the advice of the WHATWG and the group name ". Responsive Images Community Group (RICG). "RICG solution is to add the html element named "picture" into which the picture element is inspired by the video tag markup that meets the workflow of RICG stage of maturity. specification The issues are incorporated Possible and then see if their solution to solve those problems or not.
During RICG work was Apple employee who is named Edward O'Connor has offered his ideas directly to the WHATWG was perceived as adding srcset named attribute to the img element to be a good choice. than the use of a picture element RICG.
For this reason, Groups of ideas about adaptive images are divided into two groups of developers (people who wrote the code) is most like the way the picture element implementors (the lead. specifications To make available to web browsers) back like the way srcset attribute over.
Shortly thereafter, the WHATWG, whose members are mostly implementors choose to add srcset into the draft of the specifications rather than a picture element of RICG This event is offensive to some developers in RICG because the ideas of Edward O '. Connor did not follow the process as RICG have done from the start, however the 2 solutions as they are developed continuously. And have been added to the draft. W3C eventually
Picture Element
As was told to the picture element of RICG is inspired from the video element, which RICG regarded pattern this authors (the code) is probably familiar with the highlight of the picture element is to support media queries. That means we can set the terms of how you present yourself, the picture element has a fallback for web browsers that do not support them. This is the same with the video element itself.Srcset Attribute
Let's see what his ideas of Edward O'Connor chose to use the same adaptive images with img element instead of creating a new html element, only that he proposed to add another attribute to which it is srcset enough.hint of srcset attribute exists three types, namely w, h and x by x refers to pixel density of the device that is the equivalent. We can choose to display the picture to fit the screen, high resolution retina display already.
W and h is the mean size of the viewport biggest or max-width and max-height enough to see the following example.
Some may wonder how to h is w can be assigned to a unit em or not? The answer is "no" reason is em is a unit in view of the authors, who finally understand what web browsers is px anyway.
Srcset attribute is that it has the advantage that we do not need to write a query that will select the wrong impression. We just put a hint only. The rest is left to decide for yourself whether it's web browsers I use. It will select the "appropriate" in such environments. The Auto Show It is affected by several factors, whether the network speed, latency, including orientation.
Why is the picture element and srcset attribute?
The simple answer here is the 2 solutions are still not fully answer the adaptive images in all use cases often we find that the mobile is smaller and look innocent. That's because most people will reduce the size of the image relative to the size of the screen. They may forget that sometimes. The focal point is not in the center of the image. Determining the size of the container is% based, it may make you feel the importance of the loss. Or smaller, they look innocent when viewed in the small screen."Art Direction" is to prepare the appropriate screen size and it can be used by the crop from the original size. So that the focus of the image will remain intact, although with a smaller screen it. Let's see what the picture element and use case srcset attribute can deal with this?
Some may wonder how media queries can specify device-pixel-ratio is used here Why srcset with? The reason is that the device is device-pixel-ratio greater than 1 is usually the mobile, which may be the speed of the internet connection is not much use srcset the media queries have the advantage that we will let web browsers decide whether users were. I should have a version where if you use a retina display but you use your internet speed 56K fighters took a sharp one version to better times, maybe even little bit blurry. But it takes far less time to load. Do not forget that the second version of the resolution and file size may be larger than 4 times the size of it is multiplied by 2 in breadth and height.
Some people think that the art direction was done srcset attribute it here because it has a hint w, h, was it done, but it certainly will not be the same as the picture element that we have to be custom. Not released to determine which web browsers, we can not guarantee that users will get the image we really intend to let him go.
Why another popular picture element for art direction is that many people do responsive web based for deeper Mobile-First (min-width), which, if we use srcset attribute, then we have to write hint principle Desktop-. First (max-width) allows breakpoints are not synchronized. But if we use the picture element, then we can use media queries at all, whether the principles of what is no problem.
Adaptive Images practical also viewed
Last webkit brought srcset attribute to implement, then the picture element is still predominate. polyfill before Some people might complain that it's all web browsers to support something new. It takes a long time Why he does not do it, the answer is a solution then becomes a joint specification proposed solution will be widely used to the idea say it is, they need to think twice. Because what is specification That means that it will be applied to the entire world on specification becomes a "recommendation" to the various web browsers, it is taken to implement it.Actually, the people who helped to define. specifications These are not the men of anything. They would like developers like us, only that this time, they're already in trouble, he did nothing. He tried to solve the problem We're just waiting to be used to complain to me. I took the time to help them. written specification has to be better than them or not real?
No comments:
Post a Comment