Skip to content

Instantly share code, notes, and snippets.

@jacine

jacine/Notes.md

Created February 7, 2020 02:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jacine/cb11830d71f93f3c4d178eddc2cf4ab8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jacine/cb11830d71f93f3c4d178eddc2cf4ab8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jacine created this gist Feb 7, 2020.
    85 changes: 85 additions & 0 deletions Notes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    # 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