Small images, big layouts

There are a few good solutions in responsive design when it comes to scaling down big images but I’m finding small original images are becoming problematic.

small-pics

There are a few good solutions in responsive design when it comes to scaling down big images but I’m finding small original images are becoming problematic.

Not in the same way big (dimension and file size) images are but simply because now I can design for bigger screen sizes I find myself working making more use of width in designs and often max out around 1260px but in a recent project I ended up making the design decision to run with the 960.gs based layout for wireframes/visuals simply because the client didn’t have photo stock of their products big enough to make it look reasonable any bigger.

It’s a question I’m quick to ask early in a project as it’s easy to go lurching into wireframes/visuals/prototypes assuming you’ll be working with shiny, high quality/resolution photos but the reality often is that you have to work with what you’ve got and I’m sure we’ve all mailed a client asking for bigger photos than the 400*300, grainy photos they have only to be told that’s all that is available.

Now your problem isn’t how to serve smaller, lower file size photos to smaller devices, it’s how the hell you make them look good above the 800*600px resolution they were probably initially slotted into. That glorious sprawling responsive layout you’ve set to scale up into the 1200+ px zone could suddenly look rubbish with tiny (relatively speaking) photos and make no mistake, these are what many clients will unfortunately supply.

Photos will hold us back

David Bushell writes about SVG being a great solution to resolution independence and mentions it being ideal for logos and icons (agreed) but for the most part, it’s not going to be logos and icons that really cause too many problems as things like SVG represent another great step forward. How on earth we’re going to deal with being supplied small, low resolution of people wearing mullets and shellsuits as screens and pixel-per-inch counts increase in size?

In many cases, people will probably “advise” their client simply that they should get bigger photos/assets, to make sure the design works – that’s just poor planning if you’ve reached that point. It would be great if a client comes back and supplies high resolutions photos but I can assure you for any larger websites out there, you’ll be working with a lot of constraints, this is likely to be one. It’s a great time to try and push clients to update their photos but don’t get halfway a project before you realise what you’ll be working with.

Thanks to things like adaptive images and quality server side resizing, I’m happy to take the biggest images possible as obviously making an image smaller, is a hell of a lot easier than making 200% bigger!

Posted 3 years ago on · Permalink