How to Make Images Responsive in Your Web Pages

Responsive web design is the recent trend. If your website is not responsive, you are already loosing your web traffic. Responsive web design changes the layout according to the screen size of the browser to offer optimized web experience.

In responsive web design, images create trouble if not used properly. In case you are facing trouble with images of your website, you must know how to make images responsive in your web pages. In this article, I will be explaining how to make images responsive.

How to Make Images Responsive

To make images responsive, you must stop using the fixed width property in images. If you use the fixed width in the image, it will be always of the same width in all kind of screen sizes. Below is the example of fixed width image.

<img src="images/sample.jpg" width="590" height="420" />

In can also be like this.

<img src="images/sample.jpg" style=“width:590; height:420" />

There can also be the CSS rules in the external CSS file to decide the fixed width and height.

Here is how to fix?

To fix this issue, stop using the fixed height and width via html or css. If you are using width in css, you must use media query to change the width of the image depending on the screen size. The easiest way is to use the rule max-width with image width in percentage. This will use the relative width depending on the screen size. So, image will be of 100% size on the screen. In case you do not want to use the image in the whole width of the screen, you can reduce the percentage width.

You can use something like this

<img src="images/sample.jpg" width=“100%” height=“auto” />

or use it with style

<img src="images/sample.jpg" style=“width:590; height:420" />

You can also use with CSS stylesheet.

<img src="images/sample.jpg" style=“width:590; height:420" />
<style>

img {
max-width: 100%;
height: auto;
}
</style>

The best practice will be the use of CSS and decide the width of the image. You can either go with 100% width or you can use varying image widths with media queries. With Media Query, you can set different image size for different screen sizes. The CSS rules will tell the browser to adjust the image size.

If you are not comfortable with HTML or CSS, I recommend you to hire a web designer.