markdown 响应式图像

Posted 2021-05-05

- How to Build Responsive Images with srcset: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
  - Device-pixel ratio: number of device pixels per CSS pixel

- Responsive Images: https://cloudfour.com/thinks/responsive-images-101-definitions/
  - Resolution Switching: provide different sizes of an image and you’re not making any modifications to the content or aspect ratio of the image
    - Resolution switching uses srcset
      - `<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">`: Display density descriptors are best for fixed width images 
      - `<img src="cat.jpg" alt="cat" srcset="cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">`: Flexible images is where srcset’s width descriptors shine.
        - The sizes attribute is required any time you use srcset width descriptors. 
      - `<img src="cat.jpg" alt="cat"
  srcset="cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">`: We’re telling the browser what size the image will be in relation to the size of the viewport. 
      - https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/
      - Polyfill for to help older browsers understand the new syntax: https://scottjehl.github.io/picturefill/
      - Image Resizing Services and Projects: https://docs.google.com/spreadsheets/d/1e4qdGEoq7tqDCnY7iSSnl3OFoWkzhRfVAly-73A3uCc/edit#gid=0
      - Responsive Images Audits: https://cloudfour.com/thinks/responsive-images-audits/
  - Art Direction: Whenever you need to make changes to content or aspect ratio of an image based on the size of the image in the page

- The srcset attribute demo: https://webkit.org/demos/srcset/

- Responsive images: https://internetingishard.com/html-and-css/responsive-images/
  - Example with an image in a color in a 1x device and in a 2x device. 

- Responsive Images: If you’re just changing resolutions, use srcset: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
  - Example 1:
    - Device with a screen width of 320px and is a 1x (non-retina) display
    - Images: small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide)
      ```
      500 / 320 = 1.5625
      1000 / 320 = 3.125
      2000 / 320 = 6.25
      ```
      - Since I'm a 1x display, 1.5625 is the closest to what I need
  - Example 2:
    - A 320px display but it's a retina (2x) display
      - I'm going to use the 3.125 image.
  - That's already useful. You're letting the browser do the work of figuring out what's best for it rather than you trying to figure it out.
  ```
  <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
  ```
  - Sizes: `sizes="(min-width: 800px) 50vw, 100vw"`: If the browser window is wider than 800px, this image is probably going to be displayed about half the size of that. If it's smaller, it'll probably be full-width