Practical Responsive Images v1.1

About the book

In this pocket guide we’ll consider the cost and value of images, review image formats and historic practices, and explore some of the new features and tools available to us, such that we can be in a position to undertake a practical approach to responsive images. 

** This is the October 2017 revision, and is a free update for purchasers of the first version (just send me your email address and I'll provide a download code **

Testimonials

"Clear, concise and easy to follow it’s now right at the top of my reading lists at the Belfast School of Art." : Christopher Murphy

"We all know that unnecessarily large images are a problem but how many of us really know how to deal with them? Thankfully Ben does and over 80 pages he takes us from the img elements humble beginnings to a look at what solutions are available in today's Responsive world. Throw in workflows for automating your image compression as well as an action plan to thin out your website and this could be the best £8 you spend today. Highly recommended.": Keir Whitaker (Shopify)

What am I buying?
The book comes in three digital formats - ePub, mobi, and PDF, and you get all three with your purchase.  (due to the constraints of each format, the design layout is much tighter in the PDF) .This is not a physical product.

Topics include:
1. The cost of images

A picture is worth a thousand words, but its cost can be so much greater. From a page-weight perspective, if we were to replace all of our site’s image content with textual content, just how far could we make those kilobytes stretch?

2. A little background

While JPG, PNG, GIF are well established and can be created in most image editors, some of the newer formats are less widely supported.

3. srcset, sizes & the picture element

One of the technical challenges for implementing responsive images effectively was working in conjunction with image pre-loading behaviours.

4.Today’s solutions 

The picture element and srcset /sizes attributes give us some great new image controls, but just how well supported are they today and what can we do about supporting older browsers and future-legacy- browsers?

5. The next challenge

As a by-product of these more sophisticated mechanisms for embedding our image content into our websites, a new problem arises.

*Originally published by Five Simple Steps, this is the October 2017 revision