Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

tldr;

Slide 3

Slide 3 text

In your HTML, 
 put width & height attributes on all your images

Slide 4

Slide 4 text

[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 . 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.

Slide 5

Slide 5 text

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 [description] [description]

Slide 6

Slide 6 text

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?

Slide 7

Slide 7 text

[description] Keep it simple . Use the number 
 of pixels that are 
 in the image . 600 pixels wide 470 pixels high

Slide 8

Slide 8 text

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. [description]

Slide 9

Slide 9 text

[description]

Slide 10

Slide 10 text

[description] Just “470” . No unit . No “px” . Just the 
 number of pixels 
 as unitless number.

Slide 11

Slide 11 text

What’s is happening ? What changed?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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. [description] [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.

Slide 17

Slide 17 text

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. [description] [description]

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Started resizing images with CSS

Slide 20

Slide 20 text

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 [description] 600 470

Slide 21

Slide 21 text

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 [description] ? height…. ???? ? how about zero ? calculated width OMG CSS WHAT DO I DO

Slide 22

Slide 22 text

2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Change to interaction of CSS & HTML attributes

Slide 23

Slide 23 text

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 ; } [description]

Slide 24

Slide 24 text

2009-2019 1996-2009 2020+ 1993-1996 fixed broken fixed broken Lots of handy tooling from this era we can use

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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. [description] Browser without support Browser with support

Slide 29

Slide 29 text

Potential Problem.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

[description] img { width: 100% ; } [description] img { width: 100% ; height: auto ; }

Slide 33

Slide 33 text

[description] img { width: 100% ; } [description] img { width: 100% ; height: auto ; } [description] img { width: 100% ; }

Slide 34

Slide 34 text

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 ; }

Slide 35

Slide 35 text

Clearing up misconceptions.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

This has nothing to do 
 with lazy loading.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

60 0 470 X X HTML attributes { width affected by CSS ? ? OMG CSS WHAT DO I DO how about zero?

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

This has no effect on the final page layout.

Slide 43

Slide 43 text

What about “Responsive Images”?

Slide 44

Slide 44 text

Slide 45

Slide 45 text

[description] 50 0 375 = 4 / 3 = 100 0 750

Slide 46

Slide 46 text

[description]

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

[description]

Slide 49

Slide 49 text

Summary.

Slide 50

Slide 50 text

In your HTML, 
 put width & height attributes on all your images

Slide 51

Slide 51 text

[description] img { width: 100% ; height: auto; }

Slide 52

Slide 52 text

THANKS! Jen Simmons @jensimmons