April’s meeting was all about responsive images – what they are, why they are important and how to make it happen.
We used a 10-part discussion on Cloudfour.com as the basis for the discussion. Even though the post was written more than 2 years ago, the what and why are still very relevant. Our SIG was primarily concerned about the resolution switching aspect of responsive images, as compared to the more subjective art direction approach. Both have their merits, but we focused on the more mechanical implementation.
Resolution switching is the most common use case. It refers to any scenario where you all you want to do is provide different sizes of an image and you’re not making any modifications to the content or aspect ratio of the image.
Art Direction is concerned with situations in which you need to make changes to content or aspect ratio of an image based on the size of the image in the page, you’re doing what the RICG refers to as art direction.
Resolution Switching for responsive images concentrates on providing the optimal image to the browser to properly convey the desired image while not overlapping the width of the viewport (browser window) or ignoring performance. Large image sizes, both in terms of file size and image dimensions, can take a very long time to download on non-high speed networks – think your cell phone. Even on a busy wifi network in a coffee shop or shopping mall, a 300 MB image is going to take a while to download, time in which your website visitor may jump to something else offering more immediate gratification.
We spent considerable time on the HTML srcset attribute. (See w3schools.com definition.) A good friend, Sal Ferrarello, put together a nice srcset demo you can find on Github. The slides for his associated presentation are on his website.
We talked briefly about the use of the picture attribute, introduced in HTML5, and how it lets you define more than one image. A good discussion of this can be found on learnmedia.com.
We touched on using your web browser’s developer as a quick test of the responsiveness of your website images.
One method is dragging the left or right edge of the browser window will shrink its width and allow your images to resize, if they are coded in a responsive manner.
In Chrome browser, the developer tools are available using the F12 function key, or by right clicking on the web page, outside of any java elements. There are a set of built in break points to see your website at different viewport widths. Here is an excellent tutorial on it.
Other browsers:
- Firefox: Responsive design mode
- Safari: Responsive Design Mode
- Microsoft Edge: Devtools Emulation
- Microsoft Internet Explorer 11: Devtools Emulation
That is about everything we touched on. Feel free to add your comments below.
