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
    How to make a
    perfect website

    View Slide

  2. #smx @jonoalderson
    Photo by Max Baskakov on Unsplash

    View Slide

  3. #smx @jonoalderson
    src="bob.bmp" />

    View Slide

  4. #smx @jonoalderson
    alt="A sad cat" />

    View Slide

  5. #smx @jonoalderson
    alt="A sad cat" />

    View Slide

  6. #smx @jonoalderson
    .app

    View Slide

  7. #smx @jonoalderson

    View Slide

  8. #smx @jonoalderson
    youtube.com/watch?v=F1kYBnY6mwg

    View Slide

  9. #smx @jonoalderson
    alt="A sad cat" />
    500px

    View Slide

  10. #smx @jonoalderson
    alt="A sad cat" /> 280px

    View Slide

  11. #smx @jonoalderson
    alt="A sad cat" />
    ?

    View Slide

  12. #smx @jonoalderson
    alt="A sad cat"
    srcset="bob.jpg x1,
    cat-2x.jpg x2" />

    View Slide

  13. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-2x.jpg x2"
    />

    View Slide

  14. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-2x.jpg x2,
    cat-3x.jpg x3" />

    View Slide

  15. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-1-35x.jpg
    x1.35 cat-1-5x.jpg
    x1.5, cat-2x.jpg x2,
    cat-3x.jpg x3" />

    View Slide

  16. #smx @jonoalderson
    [what if we want him
    to be responsive?]

    View Slide

  17. #smx @jonoalderson
    style="background:
    url(bob.jpg)" />

    View Slide

  18. #smx @jonoalderson
    alt="A sad cat"
    style="object-fit: cover"
    />

    View Slide

  19. #smx @jonoalderson

    View Slide

  20. #smx @jonoalderson

    View Slide

  21. #smx @jonoalderson
    [what if we want him
    to be responsive?]

    View Slide

  22. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  23. #smx @jonoalderson

    srcset="cat-landscp.jpg, cat-landscp-2x.jpg
    2x">
    srcset="cat-portrait.jpg, cat-portrait-2x.jpg
    2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  24. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.avif, cat-small-2x.avif 2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  25. #smx @jonoalderson

    media="(-webkit-min-device-pixel-ratio:
    1.5)" src="cat-large-dpi_1_5.jpg">
    media="(-webkit-min-device-pixel-ratio: 2)"
    src="cat-large-dpi_2.jpg">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  26. #smx @jonoalderson

    srcset="cat-large-a.jpg, cat-large-a-2x.jpg 2x">
    type="image/jpeg" srcset="cat-large-b.jpg, cat-large-b-2x.jpg 2x">
    type="image/jpeg" srcset="cat-large-c.jpg, cat-large-c-2x.jpg 2x">
    srcset="cat-large-a.avif, cat-large-a-2x.avif 2x">
    type="image/AVIF" srcset="cat-large-b.avif, cat-large-b-2x.avif 2x">
    type="image/AVIF" srcset="cat-large-c.avif, cat-large-c-2x.avif 2x">


    View Slide

  27. #smx @jonoalderson
    [what if we want him
    to be responsive?]

    View Slide

  28. #smx @jonoalderson
    <br/>.bob {<br/>width: 100%;<br/>height: auto;<br/>max-width: 500px;<br/>}<br/>

    View Slide

  29. #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

    View Slide

  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

    View Slide

  31. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">

    View Slide

  32. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">

    View Slide

  33. #smx @jonoalderson
    https://css-tricks.com/aspect-ratio-boxes/

    View Slide

  34. #smx @jonoalderson
    https://css-tricks.com/aspect-ratio-boxes/

    View Slide

  35. #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

    View Slide

  36. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    height="350px" src="cat-small.jpg"
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  37. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    height="350px" src="cat-small.jpg"
    srcset="cat-small-2x.jpg x2" alt="A sad cat">

    View Slide

  38. #smx @jonoalderson

    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350"
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">

    View Slide

  39. #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

    View Slide

  40. #smx @jonoalderson
    https://github.com/malchata/yall.js/

    View Slide

  41. #smx @jonoalderson

    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    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">

    View Slide

  42. #smx @jonoalderson

    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    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">

    View Slide

  43. #smx @jonoalderson

    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    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">

    View Slide

  44. #smx @jonoalderson

    width="350" height="350" class="lazy"
    src="cat.avif" srcset="cat-small-2x.avif x2"
    alt="A sad cat">

    View Slide

  45. #smx @jonoalderson

    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    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">

    View Slide

  46. #smx @jonoalderson


    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">




    srcset="cat-small-2x.jpg x2" alt="A sad cat">


    View Slide

  47. #smx @jonoalderson


    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">




    srcset="cat-small-2x.jpg x2" alt="A sad cat">


    View Slide

  48. #smx @jonoalderson


    document.documentElement.classList.remove("no<br/>-js")
    <br/>.no-js .lazy {<br/>display: none;<br/>}<br/>


    [...]
    [...]


    View Slide

  49. #smx @jonoalderson
    <br/>.lazy {<br/>will-change: opacity;<br/>opacity: 0;<br/>transition: 1s opacity ease-out;<br/>}<br/>.lazy.loaded {<br/>opacity: 1;<br/>}<br/>

    View Slide

  50. #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

    View Slide

  51. #smx @jonoalderson

    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">

    View Slide

  52. #smx @jonoalderson

    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">

    View Slide

  53. #smx @jonoalderson

    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">
    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">

    View Slide

  54. #smx @jonoalderson

    View Slide

  55. #smx @jonoalderson

    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">

    View Slide

  56. #smx @jonoalderson
    Jono’s fun example webpage
    [what if we want him
    to be responsive?]

    View Slide

  57. #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

    View Slide

  58. #smx @jonoalderson

    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;">
    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">

    View Slide

  59. #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

    View Slide

  60. #smx @jonoalderson

    src="/cdn-cgi/image/width=350,height=350,quality
    =75/cat.jpg" />

    View Slide

  61. #smx @jonoalderson

    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"
    />

    View Slide

  62. #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

    View Slide

  63. #smx @jonoalderson
    click for cats

    click for cats


    View Slide

  64. #smx @jonoalderson
    click for cats
    <br/>.cat-icon::after {<br/>--icon: url(data:image/svg+xml,[SVG_GOES_HERE]);<br/>line-height: 1.25rem;<br/>display: inline-block;<br/>width: 1.25rem;<br/>height: 1.25rem;<br/>content: "";<br/>background: currentColor;<br/>-webkit-mask-image: var(--icon);<br/>-webkit-mask-size: 1.25rem 1.25rem;<br/>-webkit-mask-repeat: no-repeat;<br/>-webkit-mask-position: center center;<br/>background-size: 100% 100%;<br/>}<br/>

    View Slide

  65. #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

    View Slide

  66. #smx @jonoalderson


    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">


    View Slide

  67. #smx @jonoalderson


    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">
    A sad cat. Photo by href="https://unsplash.com/@snowboardinec">Max Baskakov



    A sad cat. Photo by Max Baskakov

    View Slide

  68. #smx @jonoalderson
    <figure>


    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">


    <figcaption>A sad cat. Photo by href="https://unsplash.com/@snowboardinec">Max Baskakovfigcaption>
    figure>
    A sad cat. Photo by Max Baskakov

    View Slide

  69. #smx @jonoalderson
    youtube.com/watch?v=flf2vS0IoRs

    View Slide

  70. #smx @jonoalderson
    cloudinary.com/blog/evolution_of_img_gif_without_the_gif

    View Slide

  71. #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

    View Slide

  72. #smx @jonoalderson
    Take a breath.

    View Slide

  73. #smx @jonoalderson
    My point isn’t,
    “images are complex”

    View Slide

  74. #smx @jonoalderson
    developers.google.com/web/fundamentals/design-and-ux/responsive/images

    View Slide

  75. #smx @jonoalderson
    My point isn’t,
    “go learn all of this”
    or
    “make your images perfect”

    View Slide

  76. #smx @jonoalderson
    How to make a
    perfect
    load a font

    View Slide

  77. #smx @jonoalderson
    href="https://fonts.gstatic.com">
    href="https://fonts.googleapis.com/css2?family=Rub
    ik&display=swap" rel="stylesheet">
    Hello
    world

    View Slide

  78. #smx @jonoalderson
    <br/>@font-face {<br/>font-family:'Rubik'; src: url('/fonts/rubik.ttf’);<br/>}<br/>
    Hello
    world

    View Slide

  79. #smx @jonoalderson
    <br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>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;<br/>src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>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;<br/>src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259,<br/>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'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF,<br/>U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>

    View Slide

  80. #smx @jonoalderson

    <br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:fallback; unicode-range:U+0000-00FF, U+0131,<br/>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,<br/>U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>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;<br/>src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259,<br/>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'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF,<br/>U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>

    View Slide

  81. #smx @jonoalderson

    <br/>body, input, button, select, textarea {<br/>font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;<br/>}<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:optional; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>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'),<br/>local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@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,<br/>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'),<br/>local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@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,<br/>U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@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,<br/>U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>

    View Slide

  82. #smx @jonoalderson
    <br/>@font-face {<br/>font-family: "Rubik-fallback-Arial";<br/>size-adjust: 97.38%;<br/>ascent-override: 99%;<br/>letter-spacing: -0.0135em;<br/>src: local("Arial");<br/>}<br/>body, input, button, select, textarea {<br/>font-family: -apple-system, BlinkMacSystemFont, avenir next,<br/>avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto,<br/>noto, Rubik-fallback-Arial, sans-serif;<br/>}<br/>

    View Slide

  83. #smx @jonoalderson
    My point isn’t,
    “fonts are complex”

    View Slide

  84. #smx @jonoalderson

    View Slide

  85. #smx @jonoalderson
    My point isn’t,
    “go learn all of this”
    or
    “make your fonts perfect”

    View Slide

  86. #smx @jonoalderson
    Deja vu?

    View Slide

  87. #smx @jonoalderson
    Publishing & optimization suite Telco infrastructure
    (fibre, security, analytics)
    App store
    Operating system

    View Slide

  88. #smx @jonoalderson
    Anticlimactic, eh?

    View Slide

  89. #smx @jonoalderson
    “We can do this
    ourselves”

    View Slide

  90. #smx @jonoalderson
    Stop trying to
    make a perfect
    website

    View Slide

  91. #smx @jonoalderson
    Stop accepting that
    it’s normal for your
    website to be crappy

    View Slide

  92. #smx @jonoalderson
    Get other people to
    make your website
    perfect for you

    View Slide

  93. #smx @jonoalderson
    Telco infrastructure
    (fibre, security, analytics)
    Publishing & optimization suite
    App store
    Operating system

    View Slide

  94. #smx @jonoalderson
    Get help
    Win

    View Slide

  95. #smx @jonoalderson
    Thanks!

    View Slide