One of the reasons why it is important to define height and width in tags is for browsers to size the actual <img> elements on the page before CSS and image resources are loaded. Without explicitly supplying height and width, the <img> element will initially render at 0x0 until the browser can determine its size based on the file. This can result in a visual reflow of the page once the image loads, especially if there are multiple images on the page. By setting the height and width via attributes, a physical space is allocated for the image in the correct dimensions, allowing content to load asynchronously without disrupting the user experience.

For mobile-responsive design, it is common practice to specify a width (or max-width) only and set the height as auto. This allows for easier adjustment of image width through media queries for different screen widths, while letting the browser handle the image height and aspect ratio. Although some reflow may occur, this approach enables support for a wide range of screen sizes, often outweighing any negatives.

In instances where the image size is unknown ahead of time (such as dynamically loaded image sources or changing images during page execution), using CSS alone may be more appropriate.

Ultimately, weighing the trade-offs and understanding which strategy best aligns with your goals is crucial in determining the most effective approach.

Although using inline styles is acceptable, you may find it more beneficial to incorporate an external CSS file into your webpage. By doing so, you can establish a class for images (such as 'Thumbnail', 'Photo', 'Large', etc) and assign them a consistent size. This will come in handy when you have images that need to be placed the same way on various pages.

For example:

Include this in your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Add this to your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />

In css/style.css:
img.thumbnail {
   width: 75px;
   height: 75px;
}

If you prefer to use inline styles, it's recommended to specify the width and height using the style attribute for better readability.

Definitely not both options combined. In my opinion, the choice between CSS and HTML for styling images comes down to personal preference. If I have many images of the same size, I would opt for CSS to streamline the code.

.my_images img {width: 20px; height:20px}

In the long run, CSS may prove to be more advantageous due to the deprecation of HTML attributes and the increasing popularity of vector image formats like SVG. With this shift, it becomes feasible to scale images using units other than pixels, such as % or em.

<img id="myUniqueImageId" src"uniqueImage" width="120" height="120" />

Including width and height attributes in the image tag is a beneficial habit. By doing this, space is reserved for the image when the page loads, preventing any layout disruptions even if the image loading process takes longer than expected.

Choice 1. Simple and straightforward. What you see is what you get, making calculations easy.

Choice 2. It's too cluttered to do inline unless you want a site that can expand. If you used the width:86em, modern browsers handle this well for my needs. Personally, I would only consider using something like this if I were creating a thumbnail catalog.

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}

<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

Choice 3. Too complicated to keep up with.

Utilizing the contentEditable feature for rich text editing on my app has been quite the journey. I recently discovered a peculiar issue when inserting and resizing images within the editor.

<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>

Surprisingly, certain inserted images had an unexpected "rogue" style attribute and parameter attached to them. However, this only seemed to affect the rendering in IE7, where the image was displayed at the intended 55px x 55px size.

Upon exporting the content to a MS Word document, I noticed that all resized images reverted back to their original dimensions. It turns out that MS Word disregards the inline styles and reverts to the default image size specified in the HTML attributes.

After some investigation, I developed a JavaScript function to extract the style width and height values and transfer them to the img tag directly before saving the content to the database. This resolved the sizing discrepancies encountered during export.

Cheers!

Oh, one more thing... My recommendation is to keep both attributes directly under the img tag rather than using the style attribute.