[Quoth]

Here is classic difference:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

This is trivial client side image map code that needs no javascript and allows an interactive image. You could make a click & point plot your own adventure with images rather than text.

It won't work on most ereaders, in ebooks, sadly.

This also often won't work (fine for web sites)

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

For ereaders it needs to be an image inside p or div tags using class="centred"
Example makes ALL images 50%, so you'd have a class for each size.

img {
height: auto;
width: 50%
}

.centred {
display: block;
margin-left: 0;
margin-right: 0;
text-align: center;
}