RWD | Add inline img srcset and sizes attributes to meet device screen width
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.
|||||||||||||||||||||||||||||||||||||||||||||||
This approach deals with the image width and height shortcoming of the device density strategy • RWD | Add inline img srcset attribute to m... . However, we now need to remove the src="" attribute and add an additional img attribute function. Not really a big deal. So the idea is we only use srcset="" for images and replace the screen density attribute value with a width value. Then, the sizes="" attribute is added to the element.
|||||||||||||||||||||||||||||||||||||||||||||||
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.