responsive design - Without Image dimension affect site speed -


i designing responsive website. in responsive web designing cannot specify image width , height in "img" tags. without width , height site slow. there solution this?

you can duplicate image, 1 large screen , 1 small screens ( thumbnail ).

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

css:

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

and can display:none small img large screen , on responsiveness can display:block;

the browser doesn't render elements display none, can trick.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

c++ - End of file on pipe magic during open -