Image ratios fornew website happinessWhere we were, where we are, where we’re going.

Common aspect ratiosModern 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

Original alpha aspect ratiosWhen 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.

Audit of aspect ratios in fotowareA 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 what looks right.” – Nic Delves-Broughton, University Photographer

Audit of aspect ratios on beta pagesA 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

3:2

SummaryWe 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.

BonusFlickr doesn’t enforce any aspect ratio - it resizes images based on a set size, but retains the original ratio.

Recommendations1.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

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

Recommendations 3. The size for landscape images should be at least 800x450px, which is 16:9

and uses a default Flickr size (Medium 800px)

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)

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

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

Spoilers1.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”