Images

Adding Images

To add an image in HTML, you use the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image if it cannot be displayed.

<img src="path/to/image.jpg" alt="Description of image">

we also use width and height attribute to define the width and height of the image.Value can be set in pixels or percentage.

<img src="path/to/image.jpg" alt="Description of image" width="500" height="600">

Image from Another Folder and Image from Another Website

To add an image from another folder, you need to specify the relative path to that folder. For example, if your image is in a folder named "images" located in the same directory as your HTML file, you would use:

<img src="images/image.jpg" alt="Description of image">

To add an image from another website, you can use the full URL of the image:

<img src="https://www.example.com/image.jpg" alt="Description of image">

Animated Image

Animated images can be added using the same <img> tag. The most common format for animated images is GIF. Here is an example:

<img src="path/to/animated.gif" alt="Description of animated image">

Image Float

You can use CSS to float images to the left or right of the text. Here is an example of how to float an image to the right:

<img src="path/to/image.jpg" alt="Description of image" style="float: right;">

This will allow the text to wrap around the image.And the float property has two more values left and center usedd to make it float in center and left of the website.

Common Image Formats

Some common image formats used in web development include:

JPEG (Joint Photographic Experts Group) - Best for photographs and images with many colors.
PNG (Portable Network Graphics) - Supports transparency and is best for images with text, logos, and graphics.
GIF (Graphics Interchange Format) - Supports animation and is best for simple graphics and animations.
SVG (Scalable Vector Graphics) - Best for vector images and graphics that need to scale without losing quality.

Image Maps

An image map is an image with clickable areas. You can define these areas using the <map> and <area> tags. Here is an example:

<img src="path/to/image.jpg" usemap="#imagemap" alt="Description of image">
            <map name="imagemap">
            <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">
            <area shape="circle" coords="337,300,44" href="link2.html" alt="Link 2">
            </map>

the map element has a attribute named name which specifies the name of the image map

Area Element

The <area> element is used within an image map to define the clickable areas. The shape attribute specifies the shape of the area (rectangle, circle, or polygon), and the coords attribute defines the coordinates of the area.

<area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">

this element uses these attributes :-

shape: Defines the shape of the clickable area (rect, circle, poly).
coords: Specifies the coordinates for the shape.
href: The URL to navigate to when the area is clicked.
alt: Alternative text for the area.

JavaScript in Image Map

You can also use JavaScript with image maps to create interactive effects. For example, you can use the onclick attribute to trigger a JavaScript function when an area is clicked:

<area shape="rect" coords="34,44,270,350" href="#" onclick="myFunction()" alt="Link 1">

In this example, when the area is clicked, the JavaScript function myFunction() will be executed.

Background Image on an HTML Element

You can set a background image for any HTML element using CSS. Here is an example:

                
                    div {
                        background-image: url('path/to/image.jpg');
                        width: 500px;
                        height: 300px;
                        }

or you can use the style attribute to add it to a specific element

<div style="background-image: url('path/to/image.jpg'); width: 500px; height: 300px;"></div>

Background Image on a Page

To set a background image for the entire webpage, you can use the following CSS:

                
                    body {
                        background-image: url('path/to/image.jpg');
                        }

Background Image Stretch, Repeat, and Cover

You can control how the background image is displayed using CSS properties like background-repeat, background-size, and background-position. Here are some examples:

                
                    body {
                        background-image: url('path/to/image.jpg');
                        background-repeat: no-repeat; /* Prevents the image from repeating */
                        background-size: cover; /* Stretches the image to cover the entire area */
                        background-position: center; /* Centers the image */
                        }

Picture Element

The <picture> element allows you to define multiple sources for an image, enabling responsive images based on different screen sizes or resolutions. Here is an example:

<picture>
            <source media="(max-width: 600px)" srcset="small-image.jpg">
            <source media="(min-width: 601px)" srcset="large-image.jpg">
            <img src="default-image.jpg" alt="Description of image">
            </picture>

In this example, different images are served based on the screen width.

Source Element

The <source> element is used within the <picture> element to specify different image sources for different media conditions. Each <source> element can have a media attribute to define the conditions under which that source should be used, and a srcset attribute to specify the image file.

<source media="(max-width: 600px)" srcset="small-image.jpg">

This example specifies that "small-image.jpg" should be used when the viewport width is 600 pixels or less.