Without Image dimension affect site speed

Question

I am designing a responsive website. In responsive web designing we cannot specify the image width and height in "img" tags. But without width and height the site is very slow. Is there any solution for this?

Answer 1

You can duplicate the image, one for large screen and one for small screens ( thumbnail ).

<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/>
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/>

Css:

.show-for-large {display:block;}
.show-for-small {display:none;}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .show-for-large {display:none;}
  .show-for-small {display:block;}
}

And you can display:none the small img for large screen and on responsiveness you can do display:block;

The browser doesn't render the elements with display none, so this can be a trick.