Responsive Design may be here to stay but there are many issues that need to be addressed when it comes to making images responsive. Although responsive images automatically resize itself upon the viewport size (which is technically easy), one problem users face is that the image vocal point will become barely visible when the image becomes too small.
The ideal consensus among web developers is that the actual dimension should be responsive too. The browser should be able to load smaller or larger images in accordance to the viewport size. That way we can direct and deliver the best image proportion rather than the shrunken image (as shown).
This is where the HTML5
picture element comes in. The
picture allows us to provide multiple image sources and control the delivery through Media Queries.