HTML Images

HTML images are used to display graphics on a web page. Images play a crucial role in making our web pages visually appealing and engaging. Here's an overview of how to use images in HTML:

Images Syntax

Here's the syntax for creating a Images in HTML.

<img src="url" alt="alternatetext">

Adding an Image

To add an image to a web page, you need to use the <img> tag. The “src” attribute is used to specify the URL of the image file. The URL can be a relative URL, or an absolute URL. Here's an example:

<img src="image.jpg" alt="A beautiful landscape">

In this example, the “img” tag is used to display an image file called "image.jpg". The “alt” attribute provides alternative text that will be displayed if the image fails to load or for users with visual impairments.

Adjusting the Size of an Image

You can adjust the size of an image using the “width” and “height” attributes. Here's an example:

Pre-Existing Size Attributes:

<img src="image.jpg" alt="A beautiful landscape" width="500" height="300">

In this example, the “img” tag is used to display an image file called "image.jpg". The “width” attribute is set to 500 pixels, and the “height” attribute is set to 300 pixels.

By Using CSS Style Attributes:

You can also use inline style attribute to adjust the size of a image. It is recommended to use CSS styling when manipulating image size instead of “width” or “height” attribute inside “img” tag in above example.  For example:

<img src="image.jpg" alt="A beautiful landscape" style="width: 500px; height: 300px">

Adding a Caption to an Image

You can add a caption to an image by wrapping it in a <figure> element and using the <figcaption> element to provide the caption text. Here's an example:

<figure>
 <img src="image.jpg" alt="A beautiful landscape">
 <figcaption>A beautiful landscape</figcaption>
</figure>

In this example, the “img tag” is wrapped in a figure element. The "figcaption" element provides the caption text, which will be displayed below the image.

Responsive Images Using HTML “<picture>” Element

The HTML "<picture>" element is used to provide multiple versions of an image and allows the browser to choose the most appropriate one based on factors like screen resolution, viewport size, and device capabilities. It is particularly useful for implementing responsive images.

Here's an example of how the “<picture>” element is structured:

<picture>
	<source srcset="image-large.jpg" media="(min-width: 1200px)">
 	<source srcset="image-medium.jpg" media="(min-width: 800px)">
 	<img src="image-small.jpg" alt="Image description">
</picture>

In the above example, we have three versions of the same image, each targeted at different screen sizes. The “<source>” elements specify the image source using the “srcset” attribute, which allows you to provide a comma-separated list of image URLs along with their respective descriptors, such as sizes, resolutions, or media queries. The “media” attribute is used to specify the conditions under which the image should be used.

In this case, if the viewport width is 1200 pixels or more, the browser will choose “image-large.jpg”. If the width is between 800 and 1199 pixels, it will choose “image-medium.jpg”. Otherwise, it will fall back to “image-small.jpg” as specified by the "<img>" element.

By using the "<picture>" element along with appropriate media queries, you can optimize your website's images for different devices and screen sizes, ensuring a better user experience.

Its Important to keep in mind that you can also create responsive images block by using CSS style media query property. You will learn more about this in CSS course series.

Image Optimization Tips:

It's important to note that images can come in various file formats, such as JPEG, PNG, GIF, and SVG. Each format has its own strengths and best use cases.

• You can resize and compress images to reduce their file size, which helps improve page loading speed.
• Choose the right image format which fulfils your requirement and need.
• You can use CDN and fast cloud storage to deliver the image to your website in a much faster way.

Overall, images are a powerful feature of HTML that allows you to add visual interest and engagement to your web pages.

Watch this Chapter Video on YouTube: