Images are notoriously one of the most challenging aspects of responsive web design. Today we’ll look at how the “picture” element, a solution to the problem of responsive images, can be used right now. First, the Problem The days of fixed-width, pixel perfect website design are well and truly behind us. In the present day of widescreen monitors, internet TVs, multiple sized tablets and smart phones our designs now have to cater for everything from 320px wide up to potentially as high as 7680px wide. Along with this multi-resolution landscape comes a need for images to stretch or shrink to fit these wildly varying requirements. This can prove to be something of a problem given that, with the exception of vector graphics, the vast …

Original Article Can Be Found Here:

Quick Tip: How to Use HTML5 “picture” for Responsive Images – Tuts+ Web Design Tutorial