RWD | Add inline img srcset attribute to meet device screen density
RWD MEDIA QUERY + INLINE IMAGE ATTRIBUTE FUNCTIONS
There are many strategies for creating a RWD Responsive Web Design. The approach you decide on will depend on the content and the users needs.
|||||||||||||||||||||||||||||||||||||||
Important: This is a very good solution but there is an issue. This approach does not tell the browser render engine how much space to reserve. Meaning, the width and height needed for the image. For the best performance we should pass along image width and height to the browser so the space can be reserved while the page makes further requests to the server. This video covers how: • RWD | Add inline img srcset and sizes attr...
|||||||||||||||||||||||||||||||||||||||
INLINE-IMAGE+ATTRIBUTE FUNCTIONS This strategy or approach uses more typical inline images for the banners. What is different than the previous strategies we covered is this approach is pure performance based. CSS media queries are in use to detect screen width and img tag attribute functions are in use to detect screen density or image width.
This pure performance approach is meant to detect and display the same image at different screen densities. Meaning to function correctly the same image at different densities or widths must/should be used. I have read using different images can possibly lead to unexpected results. I have not tried to recreate the malfunction; maybe you will and share the outcome.