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

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
October 02, 2020
Technology
2
700

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

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

October 02, 2020
Tweet

More Decks by Jen Simmons

See All by Jen Simmons
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
11
890
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
32
63k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
2
520
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
8
1.2k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
3
200
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
1
130
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
0
150
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
7
580

Other Decks in Technology

See All in Technology
E783e2d26dc6388730b73ced1348c638?s=48 vkbaba
0
180
93fc2d713bc4d0e9c594bf8c9e6bcc62?s=48 oztick139
0
120
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
620
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
1
170
1d8947ec45ce78c83251f4d076abe329?s=48 rpabank
0
140
Dc3f88b2c2c4210e3068d94ce7c25bf2?s=48 terkel
16
4k
1e8c5eaf563f965d3ba48b0054b1d955?s=48 shoichiron
8
3.5k
32018c62accb6edf57251e04308d4216?s=48 cdsap
2
100
1b177b37d966f573b1df5d7218a5f560?s=48 k2wanko
1
210
457ada693e168bd1102fec3914040b5d?s=48 uipath_friends
0
140
D5a8875907107294786ee8cba72c7f4c?s=48 torufuru
1
510
Cf18e42df2acc7a1fc1700bcd8e76487?s=48 syrusakbary
0
230

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
10
440
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.2k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
110k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
11
3.9k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
740
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
200
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
11
710

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