Images in Responsive Design vs. Google SEO image guidelines

Share this on:

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.

Share this on:
Mike Nuttall

Author: Mike Nuttall

Mike has been web designing, programming and building web applications in Leeds for many years. He founded Onsitenow in 2009 and has been helping clients turn business ideas into on-line reality ever since. Mike can be followed on Twitter and has a profile on Google+.