RWD | Use picture tag and attribute functions to increase art direction flexibility
RWD MEDIA QUERY PICTURE ELEMENT 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.
PICTURE SOURCE IMG ATTRIBUTE FUNCTIONS This strategy or approach uses the HTML picture tag, which offers the developer more options for displaying images. The picture tag allows for a more art direction approach as the developer can display completely different images. Meaning, the images can be different sizes aspect ratios and different visual content.
The picture element is the parent to the img element and as many source elements as required to meet RWD layout needs. The img element includes the typical src="" and alt="" attributes and serves as the default image to display first.
The source element includes the srcset="" and media="" attributes source srcset="" media="". The idea is to call the image you want to display at a width that targets a specific device. Again, you can include as many source tags as the RWD layout requires.