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

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
October 02, 2020

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

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

October 02, 2020
Tweet

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