Skip to content

Instantly share code, notes, and snippets.

@jacine

jacine/Notes.md

Created February 7, 2020 02:08
Show Gist options
  • Save jacine/cb11830d71f93f3c4d178eddc2cf4ab8 to your computer and use it in GitHub Desktop.
Save jacine/cb11830d71f93f3c4d178eddc2cf4ab8 to your computer and use it in GitHub Desktop.
Download ZIP
Kickstart Responsive Image Notes
Raw
Notes.md

Responsive Images

  • 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

Responsive Images

Normalized sizes from comps

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)

Mobile Max width

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 (~640px) Ratio: 4:3

  • 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

Card/Teaser (350px) Ratio: 7:4

  • Desktop 2x: 700 x 400 (2x)
  • Desktop 1x: 350 x 200 (1x)
  • Mobile max-width: 991 x 566, 100vw fallbacks

Hero (~730px) Ratio 7:4

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

Full Content (Article) Ratio: 7:4

srcset @100vw:

  • Desktop 2x: 1460 x 834
  • Desktop 1x: 730 x 417
  • Mobile max-width: 991 x 566, 100vw fallbacks

API (250px) Ratio: 5:4

  • Desktop 2x: 500 x 400 (2x)
  • Desktop 1x: 250 x 200 (1x)
  • Mobile max-width: 991 x 566, 100vw fallbacks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment