post: Commin image aspect ratios: scale and sizes

Home

Aspect image ratios: scale and sizes

Working With CSS

  

Articles

CSS Images Web Design

The aspect ratio of an image describes the proportional relationship between its width and its height, commonly expressed as two numbers separated by a colon, for example 16:9.

While it would seem that there is no commonality between the two ratios, and that the images that countless sites use have no pattern, in terms of their portrait / landscape ratios, there are in fact common standards that many sites adhere to.

Ratios tend to merge into common patterns mainly because they just look better. It’s also the case that the stock images – and the cameras they come from – frame the images in these ration and so scale better if keeping the relative proportions.

A useful site for calculating aspect ratios on the fly is: Aspect Ratio Calculator.

Below is a reference of the main image ratios currently used on the web. In the main these are landscape format – x-axis larger than y-axis. Starting point is a width of 300px for landscape and height of 300px for portrait, and then relative heights and widths respectively. The ratios, proportions, and relative image sizes are detailed below with the examples:

Landscape

  • Square – 300px x 300px – 1:1

  • MovieTone – 6:5: 300px x 250px – 1.20:1

  • Computer Display – 5:4 – 300px x 240px – 1.25:1

  • Standard Monitor/Video – 4:3 – 300px x 225px – 1.333:1

  • Film – 11:8 – 300px x 218px – 1.375:1

  • Imax – 300px x 210px – 1.43:1

  • Classic Film / DigitalSLR – 3:2 – 300px x 200px – 1.5:1

  • Widescreen Monitor – 16:10 – 300px x 187px – 1.6:1

  • HDTV / Widescreen – 16:9 – 300px x 168px – 1.778:1

  • CinemaFilm – 300px x 162px – 1.85:1

  • Cinemascope – 21:9 – 300px x 128px – 2.34:1

  • Anamorphic: – 300px x 125px – 2.39:1

  • Ultrawide – 300px x 108px – 2.76:1

Portrait

  • MovieTone – 6:5: 250 px x 300px – 1.20:1

  • Computer Display – 5:4 – 240px x 300px – 1.25:1

  • Standard Monitor/Video – 4:3 – 225px x 300px – 1.333:1

  • Film – 11:8 – 218px x 300px – 1.375:1

  • Imax – 210px x 300px – 1.43:1

  • Classic Film / DigitalSLR – 3:2 – 200px x 300px – 1.5:1

  • Widescreen Monitor – 16:10 – 187px x 300px – 1.6:1

  • HDTV / Widescreen – 16:9 – 168px x 300px – 1.778:1

  • CinemaFilm – 162px x 300px – 1.85:1

  • Cinemascope – 21:9 – 128px x 300px – 2.34:1

  • Anamorphic: – 125px x 300px – 2.39:1

  • Ultrawide – 108px x 300px – 2.76:1

There are other variants, but these are the ratios which I tend to use in my projects – or very close approximations – with the more contemporary widescreen ratios being the most used.

comments powered by Disqus