The HTML <img> element can have the width / height attribute, and it can also have the CSS width / height properties:
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
What's the difference between the HTML attribute and CSS property and should they have the same effect?
When width and height are used in the <img> tag as :
<img src="xxx.img" width="25" height="25">
then width and height attributes are called presentational attributes.
And when width and height are used in the <img> tag as :
<img style="width: 16px; height: 16px">
then width and height are said to be defined using inline CSS styles
So we can define width and height for an <img> tag as presentational attributes or using inline CSS styles, in both the ways we will get same result.
But the only difference between defining width and height for an <img> as presentational attributes and by using inline CSS styles is, defining width and height as presentational attributes is the weakest way to define width and height for <img> tag whereas defining width and height using inline CSS style is the strongest way of defining width and height for the <img> tag.
So if we define width and height in both ways (that is as presentational attributes and by using inline CSS styles) then the definition for width and height using inline CSS style will override the definition of width and height as presentational attributes
So basically presentational attributes on <img> tag is a good idea but presentational attributes are also weak and are usually overridden by inline CSS styles
For reference check this
I can see a difference... Check the following code snippet out stolen from: http://jqueryui.com/resources/demos/button/icons.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- redefine source of background-image -->
<style>
.ui-icon { width: 64px; height: 64px; }
</style>
<script type="text/javascript" >
$(function(){
$("img").button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
});
</script>
</head>
<body>
<img width="32px" height="32px"> <!-- size of img tag -->
</body>
</html>
This is the result:
