Presnetation of my discovery work on what image ratios to use online for the University of Bath website.

1. Image ratios for
new website happiness
Where we were, where we are, where we’re going.

2. Common aspect ratios
Modern cameras shoot most commonly in 4:3 and 3:2 aspect ratios. Most
smartphones in 3:2.
3:2 is the aspect ratio of 35mm camera film from ‘the old days’.
Instagram and other social media image sharing apps have given prominence to
1:1
Widescreen TV and cinematic film use a 16:9 aspect ratio, which cameras can
emulate by auto cropping the top and bottom from an image
http://photo.stackexchange.com/questions/33713/most-common-aspect-ratio

7. Original alpha aspect ratios
When selecting the aspect ratios for the new site, we needed something that
would work with our vertical rhythm (26 pixel baseline) and also not push
content too far down the page.
We settled on 18:10 as this gave an image that fitted the vertical rhythm when
displayed full size on a desktop.
For person profiles, we opted for 9:10 - essentially half the width of a landscape
image, which also maintained the vertical rhythm of the page.

12. Audit of aspect ratios in fotoware
A sample of recent images uploaded to our university image library:
0.8:1
1:1
1.45:1
3:2
2.2:1
2.28:1
“I crop images to suit the composition of the picture. No hard fast rules. Just

13. Audit of aspect ratios on beta pages
A sample of recent content items with images on beta.bath.ac.uk:
0.86:1
1.35:1
1.37:1
1.48:1
1.54:1
18:10
2:3

14. Summary
We specified a non-standard aspect ratio which fitted our design, but which been
difficult to implement.
The images in our library are also in non-standard ratios - so in most cases we’ll
need to edit them.
Bonus
Flickr doesn’t enforce any aspect ratio - it resizes images based on a set size, but
retains the original ratio.

15. Recommendations
1. For simplicity we should adopt standard aspect ratios.
16:9 better suits our templates over 3:2 (and is very close to 18:10)
1:1 for person profiles is closest to 9:10

16. Recommendations
2. We should provide full dimensions for images in our guidance, e.g.
16:9 is an image that is 1024x576px
Guide to using images on the website

17. Recommendations
3. The size for landscape images should be at least 800x450px, which is
16:9
and uses a default Flickr size (Medium 800px)

18. Recommendations
4. The size for person profile images should be at least 500x500px, which
is 1:1
and uses a default Flickr size (Medium 500px)

19. Recommendations
5. Images should be uploaded to Flickr at the largest size possible, whilst
retaining the correct aspect ratio. This gives us greatest flexibility, and
we
can target specific default sizes in Flickr by adding a suffix, e.g.
_c gives a Medium 800px image
_k gives a Large 2048px image

20. Recommendations
6. We recommend using Pixlr Express to create images at these sizes, and
will
provide simple guidance on how to use it.
https://wiki.bath.ac.uk/display/TransitionGuidance/Editing+images+in+Pixlr

21. Spoilers
1. When updating an image in Flickr, it generates a new URL
2. Person Profile image ratio (1:1) does not work for Landing Page or Collection
content types - we would prefer to phase out portraits altogether in favour
of landscape images of people
3. Getting the new aspect ratios to fit the vertical rhythm is going to be “some
work”