Images, Page 3

Many techniques for cropping image thumbnails on the front-end require explicit dimensions, which is less than ideal for responsive design.

In January, Cloudinary released a free tool for generating responsive image breakpoints that was based on some of the ideas I had for picking breakpoints based on performance budgets. Today they’ve…

Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand…

As a follow-up to my post discouraging the use of icon fonts, I recently wrote about the SVG icon process we’ve been using at Cloud Four. While most of the feedback I received…

Update (July 2019): Our process has changed quite a bit since this article was written. Check out our latest update! When I wrote about why you shouldn’t use icon fonts in your next…

Responsive image breakpoints have vexed me for nearly four years. They have been my personal koan—my unsolvable problem—until today. See a couple of years ago, I had a crazy idea to pick…

Fun fact: Cloud Four’s design team really digs SVG. Our enthusiasm for the image format accumulated gradually over many months, thanks in large part to Sara Soueidan’s tireless documentation of its most mysterious features…

Phew. We made it! We’ve come to the end of the Responsive Images 101 series. Before we part ways with this series, I want to pass along some tips, resources and final thoughts on where…

I’ve dreaded writing this installment of the Responsive Images 101 series. Selecting image breakpoints is something everyone will face, and frankly, I have no good answers for you. But sooner or later, we will all…