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.

Beed0f5ca54ae221655b9f30a1f6fe66?s=128

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

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

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

  4. #smx @jonoalderson <img src="bob.bmp" alt="A sad cat" />

  5. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" />

  6. #smx @jonoalderson .app

  7. #smx @jonoalderson

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

  9. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" /> 500px

  10. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" /> 280px

  11. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" /> ?

  12. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" srcset="bob.jpg x1, cat-2x.jpg

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

  14. #smx @jonoalderson <img src="bob.jpg" alt="A sad cat" srcset="cat-2x.jpg x2, cat-3x.jpg

    x3" />
  15. #smx @jonoalderson <img src="bob.jpg" 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" />
  16. #smx @jonoalderson [what if we want him to be responsive?]

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

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

  19. #smx @jonoalderson

  20. #smx @jonoalderson

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

  22. #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>
  23. #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>
  24. #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>
  25. #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>
  26. #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>
  27. #smx @jonoalderson [what if we want him to be responsive?]

  28. #smx @jonoalderson <style type="text/css"> .bob { width: 100%; height: auto;

    max-width: 500px; } </style>
  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
  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
  31. #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>
  32. #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>
  33. #smx @jonoalderson https://css-tricks.com/aspect-ratio-boxes/

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

  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
  36. #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>
  37. #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>
  38. #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>
  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
  40. #smx @jonoalderson https://github.com/malchata/yall.js/

  41. #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>
  42. #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>
  43. #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>
  44. #smx @jonoalderson <picture style="--aspect-ratio:1/1;"> <img loading="lazy" decoding="async" width="350" height="350" class="lazy"

    src="cat.avif" srcset="cat-small-2x.avif x2" alt="A sad cat"> </picture>
  45. #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>
  46. #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>
  47. #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>
  48. #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>
  49. #smx @jonoalderson <style type="text/css"> .lazy { will-change: opacity; opacity: 0;

    transition: 1s opacity ease-out; } .lazy.loaded { opacity: 1; } </style>
  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
  51. #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>
  52. #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>
  53. #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>
  54. #smx @jonoalderson

  55. #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>
  56. #smx @jonoalderson Jono’s fun example webpage [what if we want

    him to be responsive?]
  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
  58. #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>
  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
  60. #smx @jonoalderson <head> <link rel="preload" as="image" src="/cdn-cgi/image/width=350,height=350,quality =75/cat.jpg" /> </head>

  61. #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>
  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
  63. #smx @jonoalderson click for cats <div> <a href="cats.html">click for cats</a>

    <img src="cat-icon.svg" /> </div>
  64. #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>
  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
  66. #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>
  67. #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
  68. #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
  69. #smx @jonoalderson youtube.com/watch?v=flf2vS0IoRs

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

  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
  72. #smx @jonoalderson Take a breath.

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

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

  75. #smx @jonoalderson My point isn’t, “go learn all of this”

    or “make your images perfect”
  76. #smx @jonoalderson How to make a perfect <img> load a

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

    world
  78. #smx @jonoalderson <style type="text/css"> @font-face { font-family:'Rubik'; src: url('/fonts/rubik.ttf’); }

    </style> Hello world
  79. #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>
  80. #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>
  81. #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>
  82. #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>
  83. #smx @jonoalderson My point isn’t, “fonts are complex”

  84. #smx @jonoalderson

  85. #smx @jonoalderson My point isn’t, “go learn all of this”

    or “make your fonts perfect”
  86. #smx @jonoalderson Deja vu?

  87. #smx @jonoalderson Publishing & optimization suite Telco infrastructure (fibre, security,

    analytics) App store Operating system
  88. #smx @jonoalderson Anticlimactic, eh?

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

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

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

    to be crappy
  92. #smx @jonoalderson Get other people to make your website perfect

    for you
  93. #smx @jonoalderson Telco infrastructure (fibre, security, analytics) Publishing & optimization

    suite App store Operating system
  94. #smx @jonoalderson Get help Win

  95. #smx @jonoalderson Thanks!