Handling Images in HTML and CSS: Everything you need to know

It is the new era of the internet, which is accessible by everyone and on every device. Days are gone when people used to occasionally surf the internet for specific information. Nowadays, everyone is on pace and is using the internet more than ever. If this would have not been the scenario life for a web developer would have been a lot easier. Web developers earlier did not have to consider how their websites would look on tablets and mobile, cause it didn’t exist back then. 

However, now developers have to work a lot more in improving the aesthetics of the website, which include making it responsive, that is it renders well on a variety of devices or screen sizes ensuring maximum satisfaction to the user.

Why do you need to adjust image size in HTML?

A responsive website has many edges over a non-responsive website. It will be able to function efficiently on a variety of devices or screen sizes without breaking. A responsive website automatically shrinks and expands depending on the screen size it is being viewed upon. A few years back when a web developer gets a task to design a website, it is optional for him to make it responsive, however, in the current scenario the number of people using desktops as well as mobile phones is so high that it is mandatory for a developer to make a responsive website. 

How to change image size in HTML for Responsive Web Design

Whenever you put an image in your HTML file, it comes with its default width and height. The default width and height are only suitable for some screen sizes. Therefore, it becomes mandatory to adjust the size of an image, however, you must always keep in mind a few points. 

Even If you change the width of an image, the height of an image adjusts automatically. Moreover, set the image’s dimensions in relative units and not absolute ones. For example, you must set the width of an image in percentage and not in pixels. If you set the image in pixels, it will keep its dimensions the same in all screens-size, and not make it responsive. 

How to change width and height of image in HTML

You must resize the dimensions of your image in HTML, if your image does not fit in the layout of the webpage. This is very useful and could be easily achieved with the help of using height and width attributes in the img tag. The default value inside these attributes is in pixels.

<img src="photo.jpg" width="600" height="700" />

Changing Image Size in CSS for Responsive Web Design

As we discussed above, changing height and width values in the HTML does not bring many deals to the responsive aspect of the image in a webpage. Therefore, developers widely opt for CSS to achieve responsive web design on images on their webpage.

Now, let’s unlock more power in achieving responsiveness with the help of CSS. 

Step1 Using relative units

If you use relative units, it will make your images fluid, irrespective of the screen size it is viewed in and works the same for all the screens size.  

img {
width: 70%;}

Step 2 Using media queries 

Media queries are only used when you want to give different sizes to your image when it is displayed in different viewports. For example, you want your image width to be 40% when displayed on a desktop and 60% when displayed on mobile phones. Moreover, media queries are one of the most used ways to make your page responsive. Let’s take an example of media queries, where the image will take the width of 100% when it is displayed on devices smaller than 720px.

@media only screen and (max-width: 720px) {
img {
width: 100%;
}
}

Step 3 Using max-width property 

One other feature in CSS is to use the max-width property. It prevents the image width from becoming larger than the value of max-width specified by you. However, it is not widely accepted for making images responsive, especially when your image is being viewed on a variety of devices. 

For an instance, if the size of the image is 500px and the device width is 360px, then the complete image is not visible, due to lack of space.

img {
max-width: 100%;
width: 400px;
}

Although, if you apply the max-width to 100% the image will shrink itself to fit in the layout of the webpage, still, if the screen size increase more than 500px, the size of the image won’t increase, not following the responsiveness law. 

Step 4 Using object-fit property

After a lot of attempts to make the image responsive, the ultimate attempt to bring all the responsive features under one roof is achieved when the object-fit property is introduced. The object-fit property brings the most amount of control when customizing the CSS for responsiveness. 

• contain: It resizes the image to make it fully visible, keeping the original aspect ratio intact. 
• cover: It resizes the image to cover the entire container, keeping the original aspect ratio constant. 
• fill: The image will be filled in the given area, even if it means breaking the original aspect ratio of the image.
• none: The image will remain as it is and will fill the given area.

img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: bottom;
}

How to test Image Responsiveness on Real Devices? 

Testing Responsiveness of Images on Real Devices is a must to ensure it renders correctly on different devices of varying resolutions and screen sizes. Follow the easy steps below to test image responsiveness on real devices:

Step 1: Open BrowserStack Responsive Dashboard and enter the URL of the webpage containing the responsive image. If you have created a website on your local machine, you must host your website to test its responsiveness on BrowserStack Responsive.

Step 2: To check responsiveness, click Check.

Step 3: The user can check how the site appears on a certain device after choosing it.

Conclusion

As the number of mobile users is growing exponentially, the need of making responsive websites will only become more obvious. People are now accessing the web through smartphones and other portable devices, which is only increasing the challenge to bring more features to the responsiveness of the website. 

If your website is responsive, it is automatically inviting more mobile traffic, lowers the bounce rate as per Google SEO rule, and gets more conversions, due to an aesthetic user experience. Moreover, why would you not want your website to be viewed across a variety of devices? 

Try Responsive Testing for Free