Images in Responsive Design vs. Google SEO image guidelines
Posted by Mike Nuttall
The problem
We want our websites to do well in Google's search pages so we follow their guidlines. One of which is to put width and height attributes wherever images appear on our screen.
But to accommodate all the different devices that might be viewing our website we want to allow the images to change size with the size of their container.
We do this by using img {max-width:100%;} in our css so the image responds.
The problem is that these two practices conflict. Because now when you re-size the page the width adjusts but the height doesn't so the aspect ratio changes. Not what you want.
The solution
The good news is that there is an easy solution, you just have to add height:auto; to your css: img {max-width:100%;height:auto;} and nice resizing images are restored.