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
Post a Comment