diff --git a/packages/react/package.json b/packages/react/package.json
index f015d1de1..a2b58d8c4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,6 +21,7 @@
     "previsualization"
   ],
   "dependencies": {
+    "@microlink/mql": "~0.5.5",
     "nanoclamp": "~1.2.11"
   },
   "devDependencies": {
@@ -31,7 +32,6 @@
     "@babel/plugin-transform-react-inline-elements": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
-    "@size-limit/preset-small-lib": "latest",
     "@storybook/addon-a11y": "latest",
     "@storybook/addon-storyshots": "latest",
     "@storybook/react": "latest",
@@ -76,9 +76,7 @@
     "dev": "start-storybook -p 6006",
     "format": "prettier-standard index.js {src,stories,.storybook}/**/*.js --single-quote",
     "lint": "standard",
-    "posttest": "npm run size",
     "pretest": "npm run lint",
-    "size": "npm run build && size-limit",
     "start": "node scripts/start.js",
     "test": "jest --detectOpenHandles"
   },
@@ -98,12 +96,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "size-limit": [
-    {
-      "path": "./dist/microlink.min.js",
-      "limit": "10 kB"
-    }
-  ],
   "standard": {
     "globals": [
       "fetch"
@@ -117,5 +109,7 @@
     "plugins": [
       "jsx-a11y"
     ]
-  }
+  },
+  "umd:main": "dist/microlink.js",
+  "unpkg": "dist/microlink.js"
 }
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 70522afe1..3f2036f15 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -1,29 +1,23 @@
 import nodeResolve from 'rollup-plugin-node-resolve'
 import visualizer from 'rollup-plugin-visualizer'
-import { terser } from 'rollup-plugin-terser'
 import filesize from 'rollup-plugin-filesize'
+import { terser } from 'rollup-plugin-terser'
 import commonjs from 'rollup-plugin-commonjs'
 import replace from 'rollup-plugin-replace'
+
 import babel from 'rollup-plugin-babel'
 import fs from 'fs'
 
 const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 
-const cjs = {
-  exports: 'named',
-  format: 'cjs',
-  sourcemap: true
-}
-
-const esm = {
-  format: 'esm',
-  sourcemap: true
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'styled-components': 'styled',
+  '@microlink/mql': 'mql'
 }
 
-const getCJS = override => ({ ...cjs, ...override })
-const getESM = override => ({ ...esm, ...override })
-
-const commonPlugins = [
+const plugins = ({ compress = false }) => [
   nodeResolve(),
   babel({
     babelrc: false,
@@ -31,62 +25,56 @@ const commonPlugins = [
     ...babelRc
   }),
   commonjs(),
-  filesize()
+  compress && terser({ sourcemap: true }),
+  filesize(),
+  visualizer({ template: 'treemap' }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('production')
+  })
 ]
 
-const configBase = {
-  input: './src/index.js',
-  // \0 is rollup convention for generated in memory modules
-  external: id =>
-    !id.startsWith('\0') && !id.startsWith('.') && !id.startsWith('/'),
-  plugins: commonPlugins
-}
-
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'styled-components': 'styled'
-}
-
-const standaloneBaseConfig = {
-  ...configBase,
+const build = ({ file, format, name, exports }) => ({
   input: './src/index.js',
   output: {
-    file: 'dist/microlink.js',
-    format: 'umd',
-    exports: 'named',
-    globals,
-    name: 'microlink',
-    sourcemap: true
+    file,
+    format,
+    exports,
+    name,
+    globals
   },
-  external: Object.keys(globals)
-}
+  external: Object.keys(globals),
+  plugins: plugins({ compress: file.includes('.min.') })
+})
 
-const prodPlugins = [
-  replace({
-    'process.env.NODE_ENV': JSON.stringify('production')
+export default [
+  build({
+    format: 'umd',
+    file: 'dist/microlink.js',
+    name: 'microlink'
+  }),
+  build({
+    format: 'umd',
+    file: 'dist/microlink.min.js',
+    name: 'microlink'
   }),
-  terser({
-    sourcemap: true
+  build({
+    format: 'esm',
+    file: 'dist/microlink.m.js',
+    exports: 'named'
   }),
-  visualizer({ template: 'treemap' })
+  build({
+    format: 'esm',
+    file: 'dist/microlink.m.min.js',
+    exports: 'named'
+  }),
+  build({
+    format: 'cjs',
+    file: 'dist/microlink.cjs.js',
+    exports: 'named'
+  }),
+  build({
+    format: 'cjs',
+    file: 'dist/microlink.cjs.min.js',
+    exports: 'named'
+  })
 ]
-
-const standaloneProdConfig = {
-  ...standaloneBaseConfig,
-  output: {
-    ...standaloneBaseConfig.output,
-    file: 'dist/microlink.min.js'
-  },
-  plugins: standaloneBaseConfig.plugins.concat(prodPlugins)
-}
-
-const serverConfig = {
-  ...configBase,
-  output: [
-    getESM({ file: 'dist/microlink.m.js' }),
-    getCJS({ file: 'dist/microlink.cjs.js' })
-  ]
-}
-
-export default [standaloneProdConfig, serverConfig]
diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
index 3220ae7b7..57ebaea07 100644
--- a/packages/react/src/components/Card/CardContent.js
+++ b/packages/react/src/components/Card/CardContent.js
@@ -7,12 +7,11 @@ import CardText from './CardText'
 import { media, isLarge, isSmall, isNil } from '../../utils'
 
 const REGEX_STRIP_WWW = /^www\./
+const BADGE_WIDTH = '16px'
+const BADGE_HEIGHT = '12px'
 
 const getHostname = href => {
-  if (isNil(href)) {
-    return ''
-  }
-
+  if (isNil(href)) return ''
   const { hostname } = new URL(href)
   return hostname.replace(REGEX_STRIP_WWW, '')
 }
@@ -79,11 +78,11 @@ const Footer = styled('footer')`
   `};
 `
 
-const PoweredByBadge = styled('span').attrs({ title: 'microlink.io' })`
+const PoweredBy = styled('span').attrs({ title: 'microlink.io' })`
   background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center
     center;
   display: block;
-  margin-left: 14px;
+  margin-left: 15px;
   transition: filter 0.15s ease, opacity 0.15s ease;
 
   &:not(:hover) {
@@ -91,23 +90,16 @@ const PoweredByBadge = styled('span').attrs({ title: 'microlink.io' })`
     opacity: 0.75;
   }
 
-  ${({ cardSize }) => {
-    const badgeWidth = !isSmall(cardSize) ? '22px' : '18px'
-    const badgeHeight = !isSmall(cardSize) ? '16px' : '13px'
-
-    return css`
-      min-width: ${badgeWidth};
-      width: ${badgeWidth};
-      background-size: ${badgeWidth};
-      height: ${badgeHeight};
-    `
-  }}
+  min-width: ${BADGE_WIDTH};
+  width: ${BADGE_WIDTH};
+  background-size: ${BADGE_WIDTH};
+  height: ${BADGE_HEIGHT};
 `
 
 export default ({ title, description, url, cardSize, className }) => {
   const isSmallCard = isSmall(cardSize)
   const formattedUrl = useMemo(() => getHostname(url), [url])
-  const onPoweredByClick = useCallback(e => {
+  const handleOnClick = useCallback(e => {
     e.preventDefault()
     window.open('https://www.microlink.io', '_blank')
   })
@@ -127,7 +119,7 @@ export default ({ title, description, url, cardSize, className }) => {
       )}
       <Footer cardSize={cardSize} className='microlink_card__content_url'>
         <CardText useNanoClamp={false}>{formattedUrl}</CardText>
-        <PoweredByBadge cardSize={cardSize} onClick={onPoweredByClick} />
+        <PoweredBy onClick={handleOnClick} />
       </Footer>
     </Content>
   )
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 4102f841d..c7f32ed87 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types'
 import { CardWrap, CardMedia, CardContent, CardEmpty } from './components/Card'
 
 import {
-  defaultApiParameters,
   isNil,
-  createApiUrl,
-  fetchFromApiUrl,
+  getApiUrl,
+  fetchFromApi,
   getUrlPath,
   imageProxy,
   someProp,
@@ -51,7 +50,7 @@ function Microlink (props) {
     isLoadingUndefined ? true : loadingProp
   )
   const [cardData, setCardData] = useState({})
-  const apiUrl = useMemo(() => createApiUrl(props), [props])
+  const [apiUrl, apiUrlProps] = useMemo(() => getApiUrl(props), [props])
 
   const isLazyEnabled = useMemo(
     () => isLazySupported && (lazy === true || isObject(lazy)),
@@ -73,11 +72,11 @@ function Microlink (props) {
       setLoading(true)
       const fetch = isFunction(setData)
         ? Promise.resolve({})
-        : fetchFromApiUrl(apiUrl, props.apiKey)
+        : fetchFromApi(props.url, apiUrl, apiUrlProps)
 
       fetch.then(({ data }) => mergeData(data))
     }
-  }, [apiUrl, canFetchData, setData, props.apiKey])
+  }, [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']])
 
   const mergeData = useCallback(
     fetchData => {
@@ -179,8 +178,7 @@ Microlink.defaultProps = {
   media: ['image', 'logo'],
   muted: true,
   playsInline: true,
-  size: 'normal',
-  ...defaultApiParameters
+  size: 'normal'
 }
 
 Microlink.propTypes = {
@@ -202,6 +200,6 @@ Microlink.propTypes = {
   url: PropTypes.string
 }
 
-export { imageProxy, createApiUrl, fetchFromApiUrl }
+export { imageProxy, getApiUrl, fetchFromApi }
 
 export default Microlink
diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
index 3ed93dfc2..b7b95d9ce 100644
--- a/packages/react/src/utils/index.js
+++ b/packages/react/src/utils/index.js
@@ -1,6 +1,5 @@
-/* global fetch */
-
 import { css } from 'styled-components'
+import { fetchFromApi, getApiUrl as createApiUrl } from '@microlink/mql'
 
 const REGEX_HTTPS = /^https/
 const REGEX_LOCALHOST = /http:\/\/localhost/
@@ -31,48 +30,24 @@ export const media = {
   `
 }
 
-const apiValue = (key, value) => (value === true ? `${key}` : `${key}=${value}`)
-
-export const defaultApiParameters = {
-  contrast: false,
-  prerender: 'auto',
-  screenshot: false,
-  video: false
-}
-
-export const createApiUrl = props => {
-  const { apiKey, url: targetUrl, prerender, contrast, media } = props
-  const takeScreenshot = media.includes('screenshot')
-  const hasVideo = media.includes('video')
-
-  const alias = apiKey ? 'pro' : 'api'
-  let url = `https://${alias}.microlink.io/?url=${encodeURIComponent(
-    targetUrl
-  )}`
-
-  if (hasVideo) {
-    url = `${url}&${apiValue('video', hasVideo)}`
-  }
-
-  if (!isNil(contrast) && contrast !== defaultApiParameters.contrast) {
-    url = `${url}&${apiValue('palette', contrast)}`
-  }
-
-  if (!isNil(prerender) && prerender !== defaultApiParameters.prerender) {
-    url = `${url}&${apiValue('prerender', prerender)}`
-  }
-
-  if (takeScreenshot) {
-    url = `${url}&${apiValue('screenshot', takeScreenshot)}`
-  }
-
-  return url
-}
-
-export const fetchFromApiUrl = (apiUrl, apiKey) => {
-  const headers = apiKey ? { 'x-api-key': apiKey } : {}
-  return fetch(apiUrl, { headers }).then(res => res.json())
-}
+export const getApiUrl = ({
+  apiKey,
+  url,
+  prerender = 'auto',
+  contrast = false,
+  media,
+  ...opts
+}) =>
+  createApiUrl(url, {
+    apiKey,
+    video: media.includes('video'),
+    screenshot: media.includes('screenshot'),
+    palette: contrast,
+    prerender,
+    ...opts
+  })
+
+export { fetchFromApi }
 
 export const isLarge = cardSize => cardSize === 'large'
 
@@ -80,7 +55,7 @@ export const isSmall = cardSize => cardSize === 'small'
 
 export const imageProxy = url => {
   if (!url || REGEX_LOCALHOST.test(url) || REGEX_HTTPS.test(url)) return url
-  return `https://images.weserv.nl/?url=${encodeURIComponent(url).replace(
+  return `https://images.weserv.nl/?url=${encodeURI(url).replace(
     'http://',
     ''
   )}`
diff --git a/packages/vanilla/index.html b/packages/vanilla/index.html
index 927e6a018..fed204362 100644
--- a/packages/vanilla/index.html
+++ b/packages/vanilla/index.html
@@ -31,6 +31,7 @@
 
     .codecopy,
     pre {
+      max-height: 58px;
       max-width: 600px;
       margin: auto;
     }
@@ -107,6 +108,7 @@ <h1 class="f4 black tc">custom</h1>
 <script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/styled-components@4/dist/styled-components.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.min.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {
diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
index 6c4c8f3b1..6a43e4611 100644
--- a/packages/vanilla/package.json
+++ b/packages/vanilla/package.json
@@ -20,8 +20,7 @@
     "previsualization"
   ],
   "dependencies": {
-    "@microlink/react": "^4.2.2",
-    "dom101": "latest"
+    "@microlink/react": "^4.2.2"
   },
   "devDependencies": {
     "husky": "latest",
diff --git a/packages/vanilla/rollup.config.js b/packages/vanilla/rollup.config.js
index 98379e444..4475bf4c4 100644
--- a/packages/vanilla/rollup.config.js
+++ b/packages/vanilla/rollup.config.js
@@ -1,45 +1,70 @@
 import nodeResolve from 'rollup-plugin-node-resolve'
+import visualizer from 'rollup-plugin-visualizer'
+import filesize from 'rollup-plugin-filesize'
+import { terser } from 'rollup-plugin-terser'
 import commonjs from 'rollup-plugin-commonjs'
 import replace from 'rollup-plugin-replace'
-import { terser } from 'rollup-plugin-terser'
-import filesize from 'rollup-plugin-filesize'
+
+const plugins = ({ compress = false }) => [
+  commonjs(),
+  nodeResolve(),
+  compress && terser({ sourcemap: true }),
+  filesize(),
+  visualizer({ template: 'treemap' }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('production')
+  })
+]
 
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled'
+  'styled-components': 'styled',
+  '@microlink/mql': 'mql'
 }
 
-const prodPlugins = [
-  replace({
-    'process.env.NODE_ENV': JSON.stringify('production'),
-    __VERSION__: require('./package.json').version
-  }),
-  terser({
-    sourcemap: true
-  })
-]
-
-const standaloneBaseConfig = {
+const build = ({ file, format, name, exports }) => ({
   input: './src/index.js',
   output: {
-    file: 'dist/microlink.js',
-    format: 'umd',
-    globals,
-    name: 'microlink',
-    sourcemap: true
+    file,
+    format,
+    exports,
+    name,
+    globals
   },
   external: Object.keys(globals),
-  plugins: [nodeResolve(), commonjs(), filesize()]
-}
-
-const standaloneProdConfig = {
-  ...standaloneBaseConfig,
-  output: {
-    ...standaloneBaseConfig.output,
-    file: 'dist/microlink.min.js'
-  },
-  plugins: standaloneBaseConfig.plugins.concat(prodPlugins)
-}
+  plugins: plugins({ compress: file.includes('.min.') })
+})
 
-export default [standaloneProdConfig]
+export default [
+  build({
+    format: 'umd',
+    file: 'dist/microlink.js',
+    name: 'microlink'
+  }),
+  build({
+    format: 'umd',
+    file: 'dist/microlink.min.js',
+    name: 'microlink'
+  }),
+  build({
+    format: 'esm',
+    file: 'dist/microlink.m.js',
+    exports: 'named'
+  }),
+  build({
+    format: 'esm',
+    file: 'dist/microlink.m.min.js',
+    exports: 'named'
+  }),
+  build({
+    format: 'cjs',
+    file: 'dist/microlink.cjs.js',
+    exports: 'named'
+  }),
+  build({
+    format: 'cjs',
+    file: 'dist/microlink.cjs.min.js',
+    exports: 'named'
+  })
+]