I'm designing a website for a friend who is a personal trainer.

He has a dozen or so before-and-after photos of clients but they're all pretty poor quality (people are so crazy about a professional photographer snapping them with their belly out, strangely).

It's pretty crucial that these photo's get used, however, and I was wondering what's the best way (if any) to accommodate them in a modern web design?

  • what does "poor quality" mean in particular? low resolution, shaky, or what? – Lovis Oct 29 '13 at 14:01
  • 4
    You could use an Instagram-Effect ;-) – Lovis Oct 29 '13 at 14:01
  • 5
    Unfortunately, if it's crucial that the photo's get used then you really need good quality photos. That's like building a site around content that you know is badly written - it's possibly worse than not using it. Another analogy "I want you to build me a car. Here, use this rusty metal for the bodywork, but make sure the car is safe and modern-looking". – JonW Oct 29 '13 at 14:32
  • 1
    +1, love the constraints. A silhouette or body-shape should come out clearly though, even if, say, lighting or resolution is low. – JOG Oct 29 '13 at 15:47

As others have said, try to make the photos more consistent, styling them in a same way and point users' attention from the photo itself to the features. See the image. enter image description here


You could shrink the images down, either resize them, or use html/css attributes to represent them smaller, like thumbnail size. Include with testimonials or some meta data if you need to take up any remaining negative space. It's a serious commercial effort, right? Don't fall back on cheezy effects !


Even if they are low quality photos you can work around it by:

  • Using the photos in the original size - even if they are small you can do something with them
  • Fixing the lighting in photoshop -saturation of images can give a sense of sharpness, image/contrast, levels, etc.
  • Croping unnecessary items so they look neat
  • Making all the images have the same "light" - again play with values in photoshop

Sometimes when stuck with using low quality photos I try to reduce them all to the lowest common denominator by making them black and white and adding film grain. Grunge them up in a sense. Black and white can hide some of the flaws, and if you have software that lets you adjust the color filtering during the BW process (like Photoshop does) you can adjust them to have a more similar tone.


From your question it sounds like you don't necessarily have low resolution images, but poor quality images. If you're unable to crop the images to hide some of the things you don't like (such as bellies sticking out), you might want to try adjusting the opacity of the before images to about 50%, so that the after image draws the user's attention more. You could also layer the after image slightly over the before image to solidify the visual dominance of the after photo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.