# image

## exports

- next-image.js
  - `normalizeNextImage`
- gatsby-image.js
  - `normalizeGatsbyImage`
- dato-image.js
  - `normalizeDatoImage`
  - `DatoImage`

## DONE

- imgix `src` and `srcSet` parsing should be simpler
- automatically handle `height`/`maxHeight` as alternative to `width`/`maxWidth`
- automatically decide between Fixed/Fluid variations, based on props
  - `width` or `height` -> fixed
  - `maxWidth` or `maxHeight` -> fluid
- automatically short-circuit the markup, if the image type is SVG
- use simpler resolution of parameters; see dato blog post on imgix site
- support bg-color as placeholder; fade-in on image-load
- must allow `priority` flag, and then use `Head` to preload

## TODO

- svg sources need a short-circuit
- must accept image-loader blob for local images -- test this
  - https://github.com/boopathi/image-size-loader
- support a BgImage, also with SVG option
  - NOTE: `next/image` has a `fill` option which we would alias to `layout: 'cover'`; not sure how it works
- gif sources can eventually be converted to video
- extract images from raw markdown, and add them to data
    ```graphql
    query MyQuery {
      allUploads(filter: {filename: {matches: {regexp: true, pattern: "(jmwbphoy4pr0ec2ceyter|du4k-4gq7ccnrgvowy38k|ttlo77-54ycts3zasuxpc|qvindliv7yzvd6mnrsaxq|vuxvob3mu6r1ky0xb1z-v|2ldqcxwisrlwoaatqizla|v1pybn2skfqxjpbu6gs4b|iciw5aounstkazozznlne|h5xkcbdap-50caeaq15jf|aszzkqsvuc9ffgtweg57w|79cbkgvwpk6affdisst2|r8vtkkrbf3ia71ekyavzu)"}}}) {
        url
      }
    }
    ```

## IDEAS
- also create a BackgroundImage version
  - potentially also a Sass mixin, to use image-set():
  - [re image-set()](https://twitter.com/equinusocio/status/1390335653708136452?s=20)
- generate own LQIP/SQIP images when gathering static data, using either/or:
  - [transitive-bullshit/lqip-modern](https://github.com/transitive-bullshit/lqip-modern)
  - [axe312ger/sqip](https://github.com/axe312ger/sqip)