Using the HTML width & height attributes to improve web page loading

Transcript

1. Jen Simmons web technologies evangelist at Apple. using the width

   and height attributes in HTML to improve the page loading experience / to reduce “layout shift” oct 2 / 2020

2. tldr;

3. In your HTML, 
 put width & height attributes on

   all your images

4. <img src="file.jpg " alt="[description] " width="600 " height="470"> Morbi mollis

   volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos . Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et.

5. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

   vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros <img src="file.jpg " alt="[description] " width="600 " height="470"> <img src="file.jpg " alt="[description]">

6. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

   vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos . Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos . Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. How do you know HOW BIG ? What width ? What height?

7. <img src="file.jpg " alt="[description] " width="600 " height="470"> Keep it

   simple . Use the number 
 of pixels that are 
 in the image . 600 pixels wide 470 pixels high

8. This is metadata 
 for the image file . This

   is not about layout. Or sizing. CSS handles layou t and sizing . This is HTML. 
 This is content data. <img src="file.jpg " alt="[description] " width="600 " height="470">

9. <img src="file.jpg " alt="[description] " width="600 " height="470">

10. <img src="file.jpg " alt="[description] " width="600 " height="470"> Just “470”

    . No unit . No “px” . Just the 
 number of pixels 
 as unitless number.

11. What’s is happening ? What changed?

12. None

13. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et.

14. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et.

15. This is not the first time 
 we’ve had this

    problem.

16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in

    tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <img src="file.jpg " alt="[description]"> <img src="file.jpg " width="600 " height="275 " alt="[description]"> Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. *this was a problem in the 1990s & 2000s, too. Solved in HTML3.0.

17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in

    tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. *this was a problem in the 1990s & 2000s, too. Solved in HTML3.0. <img src="file.jpg " alt="[description]"> <img src="file.jpg " width="600 " height="275 " alt="[description]">

18. 2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken

19. 2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Started resizing

    images with CSS

20. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. img { } fixed-width design <img src="file.jpg " alt="[description] " width="600 " height="470"> 600 470

21. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. img { width: 100% ; height: auto ; } before Dec 2019 <img src="file.jpg " alt="[description] " width="600 " height="470"> ? height…. ???? ? how about zero ? calculated width OMG CSS WHAT DO I DO

22. 2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Change to

    interaction of CSS & HTML attributes

23. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. X = calculated width now in 2020… height 60 0 470 X Y = Y img { width: 100% ; height: auto ; } <img src="file.jpg " alt="[description] " width="600 " height="470">

24. 2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Lots of

    handy tooling from this era we can use

25. 2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken

26. None
27. None

28. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi

    vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros mi tincidunt elit, nec porta neque est ut turpis. Nullam urna ante, mollis commodo urna non, congue tempus lectus. Praesent tincidunt pellentesque turpis, quis dignissim erat convallis ac. . Proin arcu ex, viverra sit amet porttitor eu, condimentum in nisl. Etiam vel Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris pharetra, purus ut porttitor pellentesque, eros Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean sollicitudin enim sem, sed volutpat mauris volutpat et. <img src="file.jpg " alt="[description] " width="600 " height="470"> Browser without support Browser with support

29. Potential Problem.

30. None
31. None

32. <img src="file.jpg " alt="[description]"> img { width: 100% ; }

    <img src="file.jpg " alt="[description] " width="600 " height="470"> img { width: 100% ; height: auto ; }

33. <img src="file.jpg " alt="[description]"> img { width: 100% ; }

    <img src="file.jpg " alt="[description] " width="500 " height="400"> img { width: 100% ; height: auto ; } <img src="file.jpg " alt="[description] " width="500 " height="400"> img { width: 100% ; }

34. img { width: 100% ; height: auto ; } img

    { width: 50% ; height: auto ; } img { min-width: 100% ; height: auto ; } img { height: 100% ; width: auto ; } img { height: 20vw ; width: auto ; } img { min-height: 100% ; width: auto ; }

35. Clearing up misconceptions.

36. Always works the same way . Not just on slow

    connections.

37. This has nothing to do 
 with lazy loading.

38. This is not the CSS propert y `aspect-ratio` .

39. None

40. 60 0 470 X X HTML attributes { width affected

    by CSS ? ? OMG CSS WHAT DO I DO how about zero?

41. please solve for Y & use that value for height

    in the first paint 60 0 470 X Y = X Y HTML attributes { width affected by CSS

42. This has no effect on the final page layout.

43. What about “Responsive Images”?

44. <img srcset > <picture>

45. <img src="image_500.jpg " alt="[description] " srcset="images_500.jpg 500w, image_1000.jpg 1000w" width="500"

    height=“375" > 50 0 375 = 4 / 3 = 100 0 750

46. <picture > <source media="(min-width:1200px)" srcset="image_1000.jpg" > <source media="(min-width:800px)" srcset="image_500.jpg" >

    <source srcset="image_200.jpg" > <img src="image_200.jpg " alt="[description]" > </picture>
47. None

48. <picture > <source media="(min-width:1200px)" srcset="image_1000.jpg" width="1000" height="500" > <source media="(min-width:800px)"

    srcset=“image_500.jpg" width="500" height="375" > <source srcset="image_200.jpg" width="200" height="200" > <img src="image_200.jpg " alt="[description]" > </picture>

49. Summary.

50. In your HTML, 
 put width & height attributes on

    all your images

51. <img src="file.jpg " alt="[description] " width="640 " height="480"> img {

    width: 100% ; height: auto; }

52. THANKS! Jen Simmons @jensimmons