Responsive Image Breakpoints

In our responsive layouts, breakpoints refer to the viewport sizes at which we make changes to the layout or functionality of a page. These typically map to media queries.

Responsive image breakpoints are similar, but slightly different. When I think about image breakpoints, I’m trying to answer two questions:

• How many image sources do I need to provide to cover the continuum of sizes that this image will be used for?
• Where and when should the various image sources be used?

The answers to these questions lead to different breakpoints than the criteria we use to select breakpoints for our responsive layouts. For our layouts, We resize the browser until the page looks bad and then BOOOOM, we need a breakpoint

The main reason why we need multiple image sources has nothing to do with where the images look bad. We want to provide multiple image sources because of performance concerns, different screen densities, etc.

So we can’t simply reuse our responsive layout breakpoints for our images.

Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone (usually the iPhone at 320px and 480px), the tablet (usually the iPad at 768px and 1024px) and finally anything above 1024px.

Wrong!

You're approaching this in the wrong way.

Instead of being concerned with device breakpoints the best practice is to design for your smallest viewport first. As you expand that view there will come a point at which the design looks shit terrible. This is where you add a break point.