HTML Image Size

HTML image size is used to resize the image on the web page. The image size uses size elements with values to fix width. The image connects with the browser using sizes in html. It becomes responsive image size according to the web page screen. We can see the following essential points for the primary image sizes on the web page.

A screen size of 0 to 710 pixels is used with a small image size. We can use A 120-pixel layout.
A screen size of 711 px to 991 pixels is utilized with a tiny image. We can use A 193-pixel layout.
A screen size of 992 or more pixels is utilized with a tiny image. We can use A 278-pixel layout.

Syntax

The following syntax shows the image with the different sizes.

<img srcset = "image_name width_value(100w)," sizes = "120px,
123px,
120px">
</div>

Examples

The following examples show the image with the different sizes. We can place the different default layouts with maximum and minimum width sizes.

Example 1:

The following example shows the essential image size in html. We can use default values for the primary image sizes.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see images in the required size </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  400w," sizes="120px,
123px,
120px">
</div>
</body>
</html>

Output:

The output image shows the basic image size.

Example 2:

The following example shows the basic image size in html. We can use different width sizes with the exact sizes for the image.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the difference between the size of the image as per requirement </p>
<div class = "container">
<img srcset = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  550w," sizes="120px, 123px,120px">
<img srcset = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  850w," sizes="120px, 123px,120px">
</div>
</body>
</html>

Output:

The output image shows the basic image size.

Example 3:

The following example shows the maximum width of the image size in html. We can use different width sizes with the exact sizes for the image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the maximum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  750w," sizes="(max-width: 400px) 120px, (max-width: 410px) 123px, 120px">
</div>
</body>
</html>

Output:

The output image shows the max width image size.

Example 4:

The following example shows the minimum width of the image size in html. We can use different width sizes with the exact sizes for the image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the minimum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  750w," sizes="(min-width: 100px) 120px, (min-width: 110px) 123px, (min-width: 450px) 120px">
</div>
</body>
</html>

Output:

The output image shows the minimum width image size.

Example 5:

The following example shows the maximum and maximum width of the image size in html. We can use different width sizes with the exact sizes for the image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the maximum and minimum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f 750w," sizes="((min-width: 10em) and (max-width: 20em)) 3em,
((min-width: 30em) and (max-width: 40em)) 3em,
(min-width: 40em) 4em">
</div>
</body>
</html>

Output:

The output image shows the maximum and minimum width image size.

Conclusion

The image size is essential for the HTML web page to display interactive and user-friendly functions. The developer uses HTML tags to set images according to function and make them eye-catching for the users.

Next TopicHTML Internal Link

← prev next →