Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to build a perfect <img>

How to build a perfect <img>

Let's talk about how to build the perfect element. I want to show you how complex, something as simple as putting an image on a webpage can be.

I’m sure you’ve seen an HTML image tag before. You've probably used image tags; either directly through HTML, or via a CMS.

I’m sure that you think the way you do that is perfectly reasonable, and that whatever approach you’re using meets best practices; more or less.

Or if you’re not the one implementing it, your team of highly qualified, expert developers who do it on your behalf, do so in a way that isn’t monstrously wrong.

You’d be surprised.

Jono Alderson

April 14, 2022
Tweet

More Decks by Jono Alderson

Other Decks in Marketing & SEO

Transcript

  1. #smx @jonoalderson <picture> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x"> <source

    media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  2. #smx @jonoalderson <picture> <source media="(orientation: landscape)" srcset="cat-landscp.jpg, cat-landscp-2x.jpg 2x"> <source

    media="(orientation: portrait)" srcset="cat-portrait.jpg, cat-portrait-2x.jpg 2x"> <img src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  3. #smx @jonoalderson <picture> <source type="image/jpeg" srcset="cat-large.jpg, cat-large-2x.jpg 2x"> <source type="image/avif"

    srcset="cat-small.avif, cat-small-2x.avif 2x"> <img src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  4. #smx @jonoalderson <picture> <source media="(-webkit-min-device-pixel-ratio: 1.5)" src="cat-large-dpi_1_5.jpg"> <source media="(-webkit-min-device-pixel-ratio: 2)"

    src="cat-large-dpi_2.jpg"> <img src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  5. #smx @jonoalderson <picture> <source media="(orientation: landscape)" type="image/jpeg" srcset="cat-large-a.jpg, cat-large-a-2x.jpg 2x">

    <source media="(orientation: landscape) AND (min-width: 1200px)" type="image/jpeg" srcset="cat-large-b.jpg, cat-large-b-2x.jpg 2x"> <source media="(orientation: portrait) AND (min-width: 800px)" type="image/jpeg" srcset="cat-large-c.jpg, cat-large-c-2x.jpg 2x"> <source media="(orientation: landscape)" type="image/AVIF" srcset="cat-large-a.avif, cat-large-a-2x.avif 2x"> <source media="(orientation: landscape) AND (min-width: 1200px)" type="image/AVIF" srcset="cat-large-b.avif, cat-large-b-2x.avif 2x"> <source media="(orientation: portrait) AND (min-width: 800px)" type="image/AVIF" srcset="cat-large-c.avif, cat-large-c-2x.avif 2x"> <img src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  6. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean semper suscipit efficitur. Cras lectus metus, tincidunt at tellus quis, eleifend ultrices urna. Jono’s fun example webpage
  7. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage
  8. #smx @jonoalderson <picture> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x"> <source

    media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img width="500px" height="500px" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  9. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img width="350px" height="350px" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  10. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage
  11. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" width="350px" height="350px" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  12. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="eager" width="350px" height="350px" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  13. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" width="350" height="350" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  14. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage
  15. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy" src="placeholder.jpg" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  16. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy" src="cat-low-res.jpg" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  17. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" class="lazy" width="350" height="350" src="data:image/png;base64,iVBORw0KGgoAAAANSU hEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42 mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  18. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">

    <source media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" class="lazy" width="350" height="350" src="data:image/png;base64,iVBORw0KGgoAAAANSU hEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42 mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture>
  19. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x"><source

    media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg g==" width="350" height="350" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture> <noscript> <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x"><source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img decoding="async" width="350" height="350" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture> </noscript>
  20. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" data-srcset="cat-large.jpg, cat-large-2x.jpg 2x"><source

    media="(min-width: 450px)" data-srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img loading="lazy" decoding="async" class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg g==" width="350" height="350" data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture> <noscript> <picture style="--aspect-ratio:1/1;"> <source media="(min-width: 800px)" srcset="cat-large.jpg, cat-large-2x.jpg 2x"><source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small-2x.jpg 2x"> <img decoding="async" width="350" height="350" src="cat-small.jpg" srcset="cat-small-2x.jpg x2" alt="A sad cat"> </picture> </noscript>
  21. #smx @jonoalderson <html class="no-js"> <head> <script>document.documentElement.classList.remove("no -js")</script> <style type="text/css"> .no-js

    .lazy { display: none; } </style> </head> <body> <picture>[...]</picture> <noscript>[...]</noscript> </body> </html>
  22. #smx @jonoalderson <style type="text/css"> .lazy { will-change: opacity; opacity: 0;

    transition: 1s opacity ease-out; } .lazy.loaded { opacity: 1; } </style>
  23. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage
  24. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy"

    src="data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA DUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAA ABJRU5ErkJggg==" data-src="cat-small.jpg" alt="A sad cat" data-srcset="cat-250.jpg 250w, cat-300.jpg 300w, cat-400.jpg 400w, cat-500.jpg 500w, cat-600.jpg 600w, cat-800.jpg 800w, cat-1000.jpg 1000w" sizes="(max-width: 500px) 100vw, 500px"> </picture>
  25. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy"

    src="data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA DUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAA ABJRU5ErkJggg==" data-src="cat-small.jpg" alt="A sad cat" data-srcset="cat-250.jpg 250w, cat-300.jpg 300w, cat-400.jpg 400w, cat-500.jpg 500w, cat-600.jpg 600w, cat-800.jpg 800w, cat-1000.jpg 1000w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </picture>
  26. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <source media="(prefers-color-scheme: dark)" data-srcset="cat-250-dark.jpg 250w cat-300-dark.jpg

    300w, cat-400-dark.jpg 400w, cat-500-dark.jpg 500w, cat-600-dark.jpg 600w, cat-800-dark.jpg 800w, cat-1000-dark.jpg 1000w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> <img loading="lazy" decoding="async" class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA AAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwA EhQGAhKmMIQAAAABJRU5ErkJggg==" width="350" height="350" data-src="cat-small.jpg" alt="A sad cat" data-srcset="cat-250.jpg 250w, cat-300.jpg 300w, cat-400.jpg 400w, cat-500.jpg 500w, cat-600.jpg 600w, cat-800.jpg 800w, cat-1000.jpg 1000w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </picture>
  27. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <img loading="lazy" decoding="async" class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU gAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8B

    QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" data-src="/cdn-cgi/image/width=350,height=350,quality=75 /cat.jpg" alt="A sad cat" width="350" height="350" data-srcset="/cdn-cgi/image/width=250,height=250,quality =75/cat.jpg 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </picture>
  28. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage 1200px 300px
  29. #smx @jonoalderson <picture> <source media="(min-width: 1200px)" data-srcset="/cdn-cgi/image/width=1200,height=300,quality=75/cat.j pg 1200w, /cdn-cgi/image/dpr=2,width=1200,height=300,quality=75/cat.jpg

    2400w" sizes="100wv" height="300" width="1200" style="--aspect-ratio:4/1;"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy" alt="A sad cat" style="--aspect-ratio:1/1;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE AAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhK mMIQAAAABJRU5ErkJggg==" data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jp g 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </picture>
  30. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage 1200px 300px 280px
  31. #smx @jonoalderson <head> <link rel="preload" as="image" imagesrcset="/cdn-cgi/image/width=250,height= 250,quality=75/cat.jpg 250w, /cdn-cgi/image/width=300,height=300,quality=75/

    cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75 /cat.jpg 400w" imagesizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px" /> </head>
  32. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage 1200px 300px 280px
  33. #smx @jonoalderson click for cats <style type="text/css"> .cat-icon::after { --icon:

    url(data:image/svg+xml,[SVG_GOES_HERE]); line-height: 1.25rem; display: inline-block; width: 1.25rem; height: 1.25rem; content: ""; background: currentColor; -webkit-mask-image: var(--icon); -webkit-mask-size: 1.25rem 1.25rem; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; background-size: 100% 100%; } </style>
  34. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage 1200px 300px 280px click for cats
  35. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <a href="cat.html"> <img loading="lazy" decoding="async" class="lazy"

    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA BCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAA BJRU5ErkJggg==" data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" alt="A sad cat, linking to a page about cats" width="350" height="350" data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </a> </picture>
  36. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <a href="cat.html"> <img loading="lazy" decoding="async" class="lazy"

    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA BCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAA BJRU5ErkJggg==" data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" alt="A sad cat" width="350" height="350" data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> <span class="caption">A sad cat. Photo by <a href="https://unsplash.com/@snowboardinec">Max Baskakov</a> </span> </a> </picture> A sad cat. Photo by Max Baskakov
  37. #smx @jonoalderson <figure> <picture style="--aspect-ratio:1/1;"> <a href="cat.html"> <img loading="lazy" decoding="async"

    class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg g==" data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" alt="" width="350" height="350" data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw - 20px), 500px"> </a> </picture> <figcaption>A sad cat. Photo by <a href="https://unsplash.com/@snowboardinec">Max Baskakov</a></figcaption> </figure> A sad cat. Photo by Max Baskakov
  38. #smx @jonoalderson Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per... Jono’s fun example webpage 300px click for cats A sad cat. Photo by Max Baskakov A sad cat. Photo by Max Baskakov
  39. #smx @jonoalderson <style type="text/css"> @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap;

    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); } </style>
  40. #smx @jonoalderson <link rel="preload" as="font" type="font/woff2" href="/fonts/rubik-latin-400.woff2?ver=1606167081" /> <style type="text/css">

    @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:fallback; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); } </style>
  41. #smx @jonoalderson <link rel="preload" as="font" type="font/woff2" href="/fonts/rubik-latin-400.woff2?ver=1606167081" /> <style type="text/css">

    body, input, button, select, textarea { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; } @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:optional; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); } </style>
  42. #smx @jonoalderson <style type="text/css"> @font-face { font-family: "Rubik-fallback-Arial"; size-adjust: 97.38%;

    ascent-override: 99%; letter-spacing: -0.0135em; src: local("Arial"); } body, input, button, select, textarea { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, Rubik-fallback-Arial, sans-serif; } </style>