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
Below is the syntax displaying the image in various dimensions.
<img srcset = "image_name width_value(100w)," sizes = "120px,
123px,
120px">
</div>
Examples
The examples below display the image in various dimensions. It is possible to position the image using different preset layouts while specifying both the maximum and minimum width values.
Example 1:
The provided illustration displays the fundamental image dimensions in HTML, where default values can be applied for the main 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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
</div>
</body>
</html>
Output:
The output image shows the basic image size.
Example 2:
The provided illustration demonstrates the fundamental image dimensions in HTML. Various width options can be utilized to specify 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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px, 123px,120px">
<img srcset = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px, 123px,120px">
</div>
</body>
</html>
Output:
The output image shows the basic image size.
Example 3:
The illustration below demonstrates the maximum width of an image size in HTML. Various width dimensions can be applied to the image using precise measurements.
<!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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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:
Below is an example that demonstrates the minimum width for specifying the size of an image in HTML. Various width dimensions can be utilized to precisely determine the size of 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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="(min-width: 100px) 120px, (min-width: 110px) 123px, (min-width: 450px) 120px">
</div>
</body>
</html>
Output:
The image displayed represents the minimum required width for the image.
Example 5:
Below is an illustration demonstrating the maximum and minimum width of image dimensions in HTML. Various width values can be applied to images with precise measurements.
<!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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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 displayed image indicates the maximum and minimum allowable width for images.
Conclusion
Setting the correct size for images is crucial in ensuring an HTML web page can effectively showcase interactive and user-friendly features. Developers leverage HTML tags to adjust image dimensions to suit the intended functionality and enhance visual appeal for users.