Visually Enhancing Your Web Pages with Images

Images play a vital role in making web content more engaging and informative. In HTML, the <img> tag is used to embed an image directly into a webpage. This tag is an empty element, which means it contains only attributes and does not have a closing tag.

The Essential Attributes: `src` and `alt`

To display an image, two attributes are required:

The src attribute specifies the path (URL) to the image. This is how the browser knows where to find the image file.
The alt attribute provides alternative text for the image. This text is crucial for accessibility, as screen readers announce it to visually impaired users, and it's also displayed if the image fails to load.

Displaying an Image and Handling Errors

If a browser cannot find an image at the specified src, it will display the alternate text and a broken link icon.

Controlling Image Size: Width and Height

It's a best practice to always specify the dimensions of your images. This helps the browser reserve space for the image before it loads, preventing the page layout from shifting. You can use direct attributes or CSS.

Using the `width` and `height` Attributes:

Using the CSS `style` Attribute:

Using the style attribute is often preferred as it keeps styling separate from the HTML structure and is not overridden by external stylesheets as easily.

Images from Other Folders or Servers

You can load images from sub-folders or from completely different websites by providing the correct URL.

Note on external images: Be aware of copyright restrictions when using images from other websites. Also, external images can be changed or removed without your control.

Animated Images and Clickable Links

HTML supports animated GIFs. You can also make any image a clickable hyperlink by wrapping the <img> tag inside an <a> tag.

Floating Images with CSS

Use the CSS float property to let the image float to the right or to the left of a text, creating more dynamic layouts.

Smiley face The image will float to the right of the text, allowing the paragraph to wrap neatly around it. This is a classic technique for integrating images within text blocks.

Smiley face The image will float to the left of the text, offering a different layout option for your content.

Common Image Formats

All modern browsers support these common image file types:

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

Use the HTML <img> element to define an image.
Use the HTML src attribute to define the URL of the image.
Use the HTML alt attribute to define an alternate text for an image.
Use the HTML width and height attributes or the CSS width and height properties to define the size of the image.
Use the CSS float property to let the image float to the left or to the right.

HTML Image Tags

Tag	Description
`<img>`	Defines an image
`<map>`	Defines an image map
`<area>`	Defines a clickable area inside an image map
`<picture>`	Defines a container for multiple image resources

HTML Images

Test Your Knowledge!