$30 off During Our Annual Pro Sale. View Details »

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

Jen Simmons
October 02, 2020

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

Jen Simmons

October 02, 2020
Tweet

More Decks by Jen Simmons

Other Decks in Technology

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

    View Slide

  2. tldr;

    View Slide

  3. In your HTML, 

    put width & height attributes



    on all your images

    View Slide



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

    View Slide

  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


    alt="[description]
    "


    width="600
    "


    height="470">


    alt="[description]">

    View Slide

  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?

    View Slide



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

    View Slide

  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.


    alt="[description]
    "


    width="600
    "


    height="470">

    View Slide



  9. alt="[description]
    "


    width="600
    "


    height="470">

    View Slide



  10. alt="[description]
    "


    width="600
    "


    height="470">
    Just “470”
    .


    No unit
    .


    No “px”
    .


    Just the 

    number of pixels 

    as unitless number.

    View Slide

  11. What’s is happening
    ?


    What changed?

    View Slide

  12. View Slide

  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.

    View Slide

  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.

    View Slide

  15. This is not the first time 

    we’ve had this problem.

    View Slide

  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.




    alt="[description]">


    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.

    View Slide

  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.




    alt="[description]">


    width="600
    "


    height="275
    "


    alt="[description]">

    View Slide

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

    View Slide

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

    View Slide

  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


    alt="[description]
    "


    width="600
    "


    height="470">
    600
    470

    View Slide

  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


    alt="[description]
    "


    width="600
    "


    height="470">
    ?
    height….



    ????
    ?


    how about



    zero
    ?
    calculated width
    OMG CSS



    WHAT DO



    I DO

    View Slide

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

    View Slide

  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
    ;


    }


    alt="[description]
    "


    width="600
    "


    height="470">

    View Slide

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

    View Slide

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

    View Slide

  26. View Slide

  27. View Slide

  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.


    alt="[description]
    "


    width="600
    "


    height="470">
    Browser without
    support
    Browser with
    support

    View Slide

  29. Potential Problem.

    View Slide

  30. View Slide

  31. View Slide



  32. alt="[description]">
    img
    {


    width: 100%
    ;


    }


    alt="[description]
    "


    width="600
    "


    height="470">
    img
    {


    width: 100%
    ;


    height: auto
    ;


    }

    View Slide



  33. alt="[description]">
    img
    {


    width: 100%
    ;


    }


    alt="[description]
    "


    width="500
    "


    height="400">
    img
    {


    width: 100%
    ;


    height: auto
    ;


    }


    alt="[description]
    "


    width="500
    "


    height="400">
    img
    {


    width: 100%
    ;


    }

    View Slide

  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
    ;


    }

    View Slide

  35. Clearing up
    misconceptions.

    View Slide

  36. Always works the same way
    .


    Not just on slow connections.

    View Slide

  37. This has nothing to do 

    with lazy loading.

    View Slide

  38. This is not the CSS propert
    y


    `aspect-ratio` .

    View Slide

  39. View Slide

  40. 60
    0


    470
    X


    X
    HTML attributes
    { width affected by CSS
    ?
    ?
    OMG CSS



    WHAT DO



    I DO
    how about zero?

    View Slide

  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

    View Slide

  42. This has no effect on



    the final page layout.

    View Slide

  43. What about
    “Responsive



    Images”?

    View Slide

  44. >



    View Slide



  45. alt="[description]
    "


    srcset="images_500.jpg 500w,






    image_1000.jpg 1000w"



    width="500" height=“375" >
    50
    0


    375
    = 4 / 3 =
    100
    0


    750

    View Slide

  46. >





    srcset="image_1000.jpg"
    >





    srcset="image_500.jpg"
    >


    >




    alt="[description]"
    >



    View Slide

  47. View Slide

  48. >





    srcset="image_1000.jpg" width="1000" height="500"
    >





    srcset=“image_500.jpg" width="500" height="375"
    >


    >




    alt="[description]"
    >



    View Slide

  49. Summary.

    View Slide

  50. In your HTML, 

    put width & height attributes



    on all your images

    View Slide



  51. alt="[description]
    "


    width="640
    "


    height="480">
    img { width: 100%
    ;


    height: auto; }

    View Slide

  52. THANKS!
    Jen Simmons
    @jensimmons

    View Slide