HTML Images

Images enhance a webpage’s design, adding visual appeal and interactivity. In HTML, images are embedded with the <img> tag, which connects to an image source and allows display control through various attributes.

HTML Image Syntax

The <img> tag is self-closing, containing only attributes. Key attributes for <img> include src for the image source and alt for alternative text, both essential for accessibility and functionality.

Example

<img src="image.jpg" alt="SitePoint Logo">

The src attribute specifies the image file, while the alt attribute provides descriptive text for accessibility. The alt text is essential for users with screen readers and appears if the image fails to load.

Attributes of the <img> Tag

The <img> tag in HTML offers various attributes that control image display, size, and functionality. These attributes enhance accessibility, loading speed, and adaptability across devices. Here’s a breakdown of key attributes:

Attribute	Description
alt	Provides alternative text if the image fails to load, supporting accessibility by describing the image to screen readers
crossorigin	Enables images to load from different domains while managing cross-origin requests; useful for loading assets from external sources securely
height	Sets the image height in pixels; can maintain image proportions when used with width
width	Sets the image width in pixels, controlling display size for responsive layouts
ismap	Turns an image into a server-side map, where clicking on areas sends coordinates to the server for processing
loading	Specifies when images should load: lazy defers loading until scrolling, while eager loads immediately
longdesc	Adds a longer description of the image for detailed accessibility, often used in complex visuals requiring explanation
referrerpolicy	Controls referrer information sent when fetching the image, helpful for privacy settings and cross-site tracking control
sizes	Defines the image display sizes for different layouts, optimizing for various devices and screen widths
srcset	Specifies multiple image sources based on device resolution, improving performance by selecting the most appropriate file for each display
usemap	Defines an image as a client-side map with interactive areas, directing clicks to specific links or sections within the image

Each attribute enhances image functionality and user experience. For instance, using srcset and sizes optimizes images for high-resolution displays without slowing down loading times. Likewise, the loading="lazy" attribute improves performance, especially for pages with multiple images, by loading images only when needed.

Example:

<img src="sitepoint-example.jpg"
  alt="An informative SitePoint example image"
  width="600"
  height="400"
  loading="lazy"
  srcset="sitepoint-example.jpg 600w, sitepoint-example-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 600px">

Output:

When this code is used, the browser displays an image that is 600 pixels wide and 400 pixels tall. If the user views the page on a larger screen with high resolution, the browser loads the sitepoint-example-large.jpg image to ensure the best quality. Additionally, the loading="lazy" attribute defers the image loading until it appears in the viewport, optimizing the initial page load speed. The alternate text, "An informative SitePoint example image," appears if the image cannot load, ensuring accessibility.

The src Attribute

The src (source) attribute in the <img> tag specifies the image’s location. If the URL is correct, the browser loads and displays the image. If the URL is incorrect or the image file is missing, the browser displays a broken image icon and, if available, the alt text. Using a reliable URL path is key to ensuring images load as expected.

Example

<img src="sitepoint-logo.jpg" alt="SitePoint logo">

Output

The browser displays the SitePoint logo if the specified image is available. If the image cannot be loaded, it displays the alt text, "SitePoint logo," instead, providing context to users and enhancing accessibility.

The alt Attribute

The alt (alternative) attribute gives text that describes the image, especially important for users relying on screen readers. The alt text also appears if the image fails to load, making the webpage more accessible and informative for all users.

Example

<img src="missing_image.jpg" alt="Description of the missing SitePoint image">

Output

If the image does not load, the browser shows the alt text: "Description of the missing SitePoint image." This ensures that users understand what the image represents, even if it cannot be displayed.

Width and Height

The width and height attributes in the <img> tag help control the display size of an image. By specifying these attributes, you ensure the image fits the intended layout while keeping the code concise. This approach is also efficient for responsive design, as it adjusts images to fit different screen sizes. Alternatively, the style attribute can define these dimensions using CSS for more flexibility.

Example with style attribute

<img src="sitepoint-example.jpg" alt="Sample SitePoint image" style="width:500px;height:600px;">

Example with width and height attributes

<img src="sitepoint-example.jpg" alt="Sample SitePoint image" width="500" height="600">

In both examples, the browser displays the image with a width of 500 pixels and a height of 600 pixels. Using width and height attributes directly within the <img> tag keeps the code cleaner and offers faster rendering in simple layouts. The style attribute allows for inline CSS if you need further customization.

Adding Titles to Images in HTML

The title attribute adds extra information to an image, displayed as a tooltip when users hover over it. This can provide additional context or details about the image.

Example

<img src="sitepoint-image.jpg" alt="Sample SitePoint image" title="Learn more on SitePoint">

In this example, the tooltip "Learn more on SitePoint" appears when hovering over the image, giving users an added layer of information.

Aligning Images in HTML

Aligning images in HTML can be achieved with CSS properties or HTML attributes. Images can be aligned to the left, right, or center to control the layout and flow of content.

Example

<img src="sitepoint-image.jpg" alt="Aligned SitePoint image" style="float:right;">

Here, the float:right; style positions the image on the right, allowing text to wrap around it.

Using Images from Subfolders or External Sources

When images are stored in subfolders, include the folder path in the src attribute. For external images, use a full URL.

Example

<img src="/images/sitepoint-sample.jpg" alt="SitePoint subfolder image">
<img src="https://example.com/sitepoint-logo.jpg" alt="External SitePoint logo">

The first image is located in a subfolder, while the second uses an external URL.

Using external images in HTML can come with risks. External images may be protected by copyright, so it’s essential to obtain permission before using them to avoid copyright infringement. Additionally, external images are hosted on other servers, which means you have no control over them—they could be removed or modified at any time, potentially disrupting your webpage’s appearance or functionality. For stable and compliant image usage, it’s generally best to host images on your own server or use sources with clear usage permissions.

Adding Animated Images in HTML

To embed animated images like GIFs, specify the file directly in the src attribute. Animated images can add visual interest to a page.

Example

<img src="sitepoint-animation.gif" alt="SitePoint animated GIF">

This example shows an animated GIF, which can enhance user engagement.

Making Images Clickable

To create a clickable image, wrap it in an <a> tag, turning it into a link.

Example

<a href="https://www.sitepoint.com">
  <img src="sitepoint-clickable.jpg" alt="Clickable SitePoint image">
</a>

In this example, clicking the image directs users to SitePoint’s homepage.

Floating Images within Text

The CSS float property helps integrate images within text for a seamless, flowing layout.

Example

<img src="sitepoint-float.jpg" alt="Floating SitePoint image" style="float:left;">

Here, float:left; places the image to the left, allowing the surrounding text to wrap around it smoothly. This technique is useful for balancing images and text in content layouts.

Supported Image Formats

HTML supports several image formats, each with unique properties related to transparency, animation, and compatibility. Choosing the right format optimizes both performance and design.

Format	Transparency	Animation	Lossless	Extensions	Browser Support
PNG	Yes	No	Yes	.png	Supported in all major browsers (since early 2000s).
JPEG	No	No	No	.jpg, .jpeg	Supported in all major browsers (since early 2000s).
GIF	Yes	Yes	No	.gif	Supported in all major browsers (since early 2000s).
SVG	Yes	No	Yes	.svg	Supported in all major browsers (since 2010s).
WebP	Yes	Yes	Yes	.webp	Supported in most major browsers (since 2015, with full support in 2020).
APNG	Yes	Yes	Yes	.apng	Supported in most modern browsers (since 2017, with full support in 2020).
AVIF	Yes	No	Yes	.avif	Supported in most major browsers (since 2020, with full support in 2023).

FAQs on HTML Images

Is there any reason to use a GIF over a PNG?

Using a GIF instead of a PNG is typically justified when animation is required, as GIFs support simple animations, while PNGs do not. However, for static images, PNG is generally the better choice due to its superior compression, support for transparency, and better image quality. If animation isn't needed, a PNG is more efficient and versatile for modern web design.

Example:

<img src="sitepoint-logo.png" alt="SitePoint logo">

What is the best way to display images in HTML?

The best way to display images in HTML is by using the <img> tag with the src for the image location, alt for accessibility, and optional width and height attributes for size. For responsive images, consider using CSS or the <picture> tag for more control over image display on different devices.

What is the purpose of the alt attribute in an image tag?

The alt attribute provides descriptive text for screen readers, making images accessible for visually impaired users. It also displays if the image fails to load, enhancing the user experience.

How can I embed animated images in a webpage?

To embed animated images, use the <img> tag. For GIFs, APNG or WebP animations, simply set the src attribute to the image's file location, such as:

<img src="animation.gif" alt="Animated GIF">

or

<img src="animation.webp" alt="Animated WebP">

For better compatibility, you can use the <picture> element to provide a fallback image:

<picture>
  <source srcset="animation.webp" type="image/webp">
  <source srcset="animation.gif" type="image/gif">
  <img src="fallback.jpg" alt="Fallback image">
</picture>