Some devices might hang up on not having a surrounding tag around the <img>....a bare <img> might not work properly. Also, I wouldn't apply 'auto' to both (or either) height/width. If you define both height/width you may lose the proper aspect ratio and the image could look stretched or scrunched.
Try this, and see if it helps:
Code:
.image {width:95%; margin:2em auto}
.image img {width:100%; max-width:586px}
<p>...</p>
<div class="image"><img alt="" src="../Images/1connection.png"/></div>
The width:100% will make the image fill the width of the container (the <div>) which is set to center on the screen and fill 95% of the width of the screen. The image height will be auto set to display the correct aspect ratio. I also add the
max-width set to the width of your image. While it's not technically a direct 1:1 between max-width pixels and image-width pixels, this helps in preventing small resolution images from getting overblown and fuzzy.