- Hero: 734 x 400 / total: 1280 / left 546px 42.65625% / right 734px 57.34375%
- 730 x 417 (Ratio 7:4)
- Hero II: Full width, max height of 400px
- 1300 x 400 (Ratio 13:4)
- 2600 x 800 (Ratio 13:4)
- Cards: 346 x 190 / 25:19 ratio
- 350 x 200 (Ratio 7:4)
- Blog (teaser): 350 x 200 / 7:4 ratio
- 350 x 200 (Ratio 7:4)
- Article Full: 730 x 417
- 730 x 417 (Ratio 7:4)
Outliers:
- Text & Image
- 640 x 480 (Ratio 4:3)
- API Cards: 251 x 190
- 250x200 (Ratio 5:4) / 3-column layout, so smaller
Given the above list, the sizes have been normalized. This just means that where minor differences in size where found (10 pixels or less) in the design comps, those numbers were rounded, and consolidated where possible.
- 1460 x 834 (article 2x, hero 2x)
- 730 x 417 (article, hero)
- 700 x 400 (card 2x, teaser 2x)
- 350 x 200 (card, teaser)
- 250 x 200 (api card)
Below 991px, images should span to the width of the browser, and 100vw with srcset via sizes. One of the good things we have going for us here, is that most of our styles (4/5) share the same aspect ratio. That means we can create a few image styles for smaller screen widths for browsers to choose from, that can be shared across the responsive image definition.
Since we're looking to create these styles for screen sizes, I chose to go with more standard sizes.
Our max width is 991 x 556 (mobile max for card, teaser, api), so using that, add a 2x version of max width, and then a couple more for smaller sizes, 640 & 320, with our 7:4 ratio.
- 1982 x 1133 (2x max width)
- 991 × 566 (1x max width)
- 640 x 366
- 320 × 183 (Just use 350 x 200, close enough!)
- Text & Image
- Desktop 2x: 1280 x 960 (2x)
- Desktop 1x: 640 x 480 (1x)
- Mobile max-width: 991 x 566, 100vw fallbacks
- 991 x 743
- 320 x 240
- Desktop 2x: 700 x 400 (2x)
- Desktop 1x: 350 x 200 (1x)
- Mobile max-width: 991 x 566, 100vw fallbacks
srcset @57.34vw:
- Desktop 3x: 2920 x 1669 (need something in between)
- Desktop 2x: 1460 x 834 2x sorta
- Desktop 1x: 730 x 417 1x sorta
- Mobile max-width: 991 x 566, 100vw fallbacks
srcset @100vw:
- Desktop 2x: 1460 x 834
- Desktop 1x: 730 x 417
- Mobile max-width: 991 x 566, 100vw fallbacks
- Desktop 2x: 500 x 400 (2x)
- Desktop 1x: 250 x 200 (1x)
- Mobile max-width: 991 x 566, 100vw fallbacks