Implementing Responsive Images

I have been avoided implementing responsive images for a while simply because most browsers aren’t support it yet. Furthermore, I am too lazy to cut up various versions of the same image. Nevertheless, I spent a few hours over the weekend reading and researching for the simplest solution to jazz up my portfolio. Since most of the works I am doing are responsive web design, I want to showcase some screenshots of the sites I have done. Wouldn’t it be nice to show visitors the mobile screenshot of they browse through my portfolio on smartphone, tablet screenshot if they use a tablet and desktop if they use a computer? So I cut up three different sizes for each site I want to showcase.

I read through a handful of articles on responsive images including Eric Portis’s “Responsive Images in Practice,” Jason Grigsby’s “Don’t use <picture> (most of the time)” and Yoav Weiss’s “Native Responsive Images.” Looking at Can I Use, SRCSET is only supported in Chrome and Opera. In order to get responsive images to work across browsers, I needed Picturefill. The deal-breaker for me with Picturefill is that it doesn’t work with the fallback SRC.

In the past few days, I have been thinking whether I should use it or not. Today, I decided to go forward with it since it is my personal site. I am now using native support for responsive image with the hope that it will work in the future when more browsers are implementing it. Check out the work.