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.

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!