logo Randthemes.com

How to use images in responsive design.

There are several ways to use images in responsive design but today I will say my personal choice on how easily do it.

When you use img tag and past image in you site and you want to use it responsive you put 100% of this image and this is most popular wait to do this.
But there is problem when you speed test your website.Because this image don’t have proper dimension and browser can’t figure what dimension this image. This slows down the loading of the page.
Instead img tag we use simple div and past style and image in this div.

<div style="background-image: url("my_imaage.png"); height: 400px; background-position: center"></div>

Leave a Reply