Responsive Images on the Web
The usual way we still use large images that are suitable for large screens and will be shrunk when viewed on a small screen, this is a simple solution but there are 2 big problems, firstly we see the image. The small size but the real size is a large image that is wasting bandwidth and increasing the page loading time, secondly because it is not the actual size of the image, so of course it will look dimmer and the details will be small. In this article we will discuss solutions to this problem.
CSS properties about wallpapers
For example if we choose a solution that uses 2 html images one for large screens and one for small screens, it will meet the image quality requirements. For example:
1 2 3 4 5 6 7 8 9 | img.smallscreen {display: none; } @media only screen and (max-width: 320px) { img { display: none; } img.smallscreen { display: inline; } } |
1 2 | <img src = "largeimage.jpg"> <img class = "smallscreen" src = "smallimage.jpg> |
This solution will use css to hide inappropriate images and display images that match the screen size. The major drawback of this method is that your browser still returns many images and it only hides unnecessary images so this method does not save website traffic but is also increased.
Instead of using the above solution, we can use the background for a certain solid element like div or span. For example:
1 2 3 4 5 6 7 8 | #image { background-image: url (largeimage.jpg); } @media only screen and (max-width: 320px) { #image { background-image: url (smallimage.jpg); } } |
1 | <div id = "image"> </div> |
However, this simple solution still has major limitations that we do not yet have the source image returned in the HTML document which means that the image is not dynamic, this solution only supports the part Improve the interface to get the best images with different screen resolutions.
Use HTML5
Use the <picture> tag in conjunction with the <source> tag
This is similar to <video> or <audio> tags. The <source> element has tags that contain optional attributes like type and media. For example:
1 2 3 4 5 6 7 | <picture> <source src = image800.png media = "min-width: 800px"> <source src = image480.png media = "min-width: 480px"> <source src = image320.png> <! - Where browsers do not support picture -> elements <img src = image800.png alt = "angry pirate"> </picture> |
This solution is really clear and capable of powerful customization, but one thing is not good is that for each image we have a multitude of <source> elements with different media if your site has many images. it is clear that the amount of HTML code will pretty much increase the capacity of the HTML document.
Use the srcset attribute
W3C now has a draft of this attribute which is really useful because the src attribute currently does not meet the requirements, with srcset we can simplify writing css media query, the image path has The binding to the context will be loaded depending on the screen size. For example:
1 | <img src = "image300.png" srcset = "image150.png 600w, image100.png 480w" alt = ""> |
On the normal image300 image will be loaded but if the screen is less than or equal to 600px then the image150 will be loaded, 600w here also means the media query is max-width: 600px, similar to 480w. In web responsive we usually leave viewpost as device-width but we also know that the pixel unit of CSS on the browser has a certain aspect ratio with the pixel of the device. For example, usually the desktop screen or the device of apple does not have retina will have a ratio of 1, with devices with apple retina will have a ratio of 2 ie the resolution of the device will be 2 times resolution on the browser. In case to determine that the device is a desktop that does not have a clear width, it is useful to rely on the resolution ratio between the device and the browser. For example:
1 | <img src = "image.jpg" srcset = "image0.jpg 720w, image721.jpeg 1280w, image1281.jpg 1x" alt = ""> |
Above image0 is loaded when the browser width is less than or equal to 720px, similar for 1280w, and in case the size is larger than 1280px if the browser and device resolution have a ratio of 1, the image will load is image1281, this will be suitable for desktop screens, and image.jpg for the browser case does not yet support the srcset attribute.
So we can see that the solution using <picture> and the solution using srcset attribute have the same purpose and can be used independently, there have been many discussions about which solution is better but you can combine both solution. For example:
1 2 3 4 5 | <picture> <source media = "(min-width: 45em)" srcset = "large-1.jpg 1x, large-2.jpg 2x"> <source media = "(min-width: 18em)" srcset = "med-1.jpg 1x, med-2.jpg 2x"> <img src = "fallback.jpg" alt = "" /> </picture> |
Let's wait for the W3C to officially announce, the browsers start to support you and me to use these necessary solutions. During this time we are still in need of an alternative solution and the developers have quickly developed solutions with javaScript plugins, in the next article we will learn the solutions using javaScript.
Articles refer to page: ( https://css-tricks.com/responsive-images-css/ )
Thank you for watching!