# next/image | NextImage

## todos

api choices needed
- manual `sizes` prop
- `maxWidth: 'auto'` or `maxWidth: 'native'`, to set containment
-

options
- `fixed`
  -
- `intrinsic`
  -
- `responsive`
  -
- `fill`
  - place the Image as direct child of something with it's own sizes
  - inner img is forced to that shape with absolute position and object-fit cover
  - outputs the image otherwise as if unconstrained
  - also allows an `objectPosition` argument

## refs
- [Lee Robinson on Twitter: How to get the best image performance (Updated 2021)](twitter.com/leeerob/status/1352264153411497993)
- [Next.js Image Component and Image Optimization - YouTube](www.youtube.com/watch?v=h0gj4gOjz44&feature=youtu.be)
[CodeSandbox](https://codesandbox.io/s/nextimage-custom-loader-datocms-mljsd?file=/pages/about.js)
[next/image | Next.js](https://nextjs.org/docs/api-reference/next/image)
[https://image-component.nextjs.gallery/layout-fixed](https://image-component.nextjs.gallery/layout-fixed)
[https://image-component.nextjs.gallery/layout-intrinsic](https://image-component.nextjs.gallery/layout-intrinsic)
[https://image-component.nextjs.gallery/layout-responsive](https://image-component.nextjs.gallery/layout-responsive)
[https://image-component.nextjs.gallery/layout-fill](https://image-component.nextjs.gallery/layout-fill)
[https://image-component.nextjs.gallery/background](https://image-component.nextjs.gallery/background)
- [reactjs - How can I add a fade-in animation for Nextjs/Image when it loads? - Stack Overflow](https://stackoverflow.com/questions/65546293/how-can-i-add-a-fade-in-animation-for-nextjs-image-when-it-loads)
- [Fade in when loading next/image : nextjs](https://www.reddit.com/r/nextjs/comments/lwx0j0/fade_in_when_loading_nextimage/?utm_source=amp&utm_medium=&utm_content=post_body)