What’s the difference between the HTML width / height attribute and the CSS width / height property on the img element?

by

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

This seems to be the most beneficial effect in my opinion.

More Related Contents:

  1. How to apply Hovering on html area tag?
  2. CSS property as SASS mixin value [duplicate]
  3. CSS indentation not working [closed]
  4. Cut Corners using CSS
  5. Change Select List Option background colour on hover
  6. What to use in place of ::ng-deep
  7. CSS Grid Layout not working in IE11 even with prefixes
  8. How to center elements on the last row in CSS Grid?
  9. Is there an equivalent to background-size: cover and contain for image elements?
  10. Using margin:auto to vertically-align a div
  11. Position: absolute and parent height?
  12. Responsive CSS Trapezoid Shape
  13. How can I set the max-width of a table cell using percentages?
  14. make div’s height expand with its content
  15. CSS Background Opacity [duplicate]
  16. Flex items not respecting margins and box-sizing: border-box
  17. Why cannot change checkbox color whatever I do? [duplicate]
  18. Align the form to the center in Bootstrap 4 [duplicate]
  19. CSS for changing color of last word in h1
  20. CSS box shadow around a custom shape?
  21. floating elements are outside of containing blocks?
  22. canvas default size
  23. How to have two items on opposite sides on the same line
  24. How to make text vertically and horizontally center in an HTML page
  25. CSS Rounded corners
  26. Increase cursor size in HTML body
  27. 100vh height when address bar is shown – Chrome Mobile
  28. Sticky footer with flexbox
  29. Making a flex item float right
  30. What does “semantically correct” mean?

Leave a Comment