Specifying image dimensions to improve the site speed

Question

I'm trying to optimize my images for SEO.

Page Speed currently only detects image dimensions that are specified via the image attributes.

According to above line i should use width and height attribute in image tag for improving the page speed. But I have to responsive the site also, for example i have an image with following width and height.

Screen Size 960 pixel

<img src="" width="250" height="250" />

Then how i will adjust the image size on small screens?

Screen Size 480 pixel

<img src="" width="250" height="250" />

if i add an id or class for adjusting the size on the small screen the it will be correct way or not?

.reduceSize{
   width:150px;
   height:150px;
}

Please guide me i'm wrong or any other suggestion. Also in image tag width and height attribute are necessary for site speed ?

Answer 1

Changing Image dimension through html code wont reduce the image size and wont improve the speed of loading. If you want to load different image size for different screen resolution, you have to use ajax load different images(based on screen size) or other 3rd party image handlers as well as aspJpeg (for windows server) or WideImage (for linux) or find more by searching php image manipulation to resize images dynamically.

You probably will need extra coding to determine the screen size before loading proper images.

Answer 2

May be you can add two different <img> tags. One for mobile device and one for larger screen.

<img class="hide-in-mobile" src="" width="250" height="250" />

In css media queries for mobile devices add

.hide-in-mobile
{
 display:none;
}

and

<img class="show-in-mobile" src="" width="150" height="150" />

in media queries for large screen

.show-in-mobile
{
 display:none;
}