What image formats supported in html

HtmlHow-ToBeginner · 4 min read

Image Formats Supported in HTML: Complete Guide

HTML supports several image formats including JPEG, PNG, GIF, SVG, and WebP. You use the <img> tag with the src attribute to display these images in a webpage.

📐

Syntax

The basic syntax to add an image in HTML uses the <img> tag with the src attribute pointing to the image file. You can also add alt text for accessibility and width and height to control size.

<img>: The tag to insert an image.
src: URL or path to the image file.
alt: Text shown if image can't load or for screen readers.
width and height: Optional size attributes.

html

<img src="image.jpg" alt="Description of image" width="300" height="200">

Output

Displays the image 'image.jpg' sized 300x200 pixels with alt text 'Description of image'.

💻

Example

This example shows how to use different supported image formats in HTML using the <img> tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Formats Example</title>
</head>
<body>
  <h1>Supported Image Formats in HTML</h1>
  <p>JPEG Image:</p>
  <img src="https://via.placeholder.com/150.jpg" alt="JPEG example">
  <p>PNG Image:</p>
  <img src="https://via.placeholder.com/150.png" alt="PNG example">
  <p>GIF Image:</p>
  <img src="https://via.placeholder.com/150.gif" alt="GIF example">
  <p>SVG Image:</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" alt="SVG example" width="150">
  <p>WebP Image:</p>
  <img src="https://www.gstatic.com/webp/gallery/1.webp" alt="WebP example" width="150">
</body>
</html>

Output

A webpage showing five images in JPEG, PNG, GIF, SVG, and WebP formats with their labels.

⚠️

Common Pitfalls

Common mistakes when using images in HTML include:

Using unsupported or uncommon formats that browsers may not display.
Forgetting the alt attribute, which hurts accessibility.
Not specifying image dimensions, causing layout shifts during loading.
Using large image files without optimization, slowing page load.

html

<!-- Wrong: Missing alt attribute -->
<img src="image.png" alt="">

<!-- Right: Includes alt attribute -->
<img src="image.png" alt="Description of image">

Output

The first image may not show alt text if it fails to load; the second image provides descriptive text for accessibility.

📊

Quick Reference

Image Format	File Extension	Browser Support	Use Case
JPEG	.jpg, .jpeg	All modern browsers	Photographs, complex images
PNG	.png	All modern browsers	Images needing transparency
GIF	.gif	All modern browsers	Simple animations, small graphics
SVG	.svg	All modern browsers	Scalable vector graphics, icons
WebP	.webp	Most modern browsers	Optimized images with transparency and animation

✅

Key Takeaways

Use the tag with the src attribute to add images in HTML.

Common supported formats are JPEG, PNG, GIF, SVG, and WebP.

Always include alt text for accessibility and SEO.

Specify image dimensions to prevent layout shifts.

Optimize images for faster page loading and better user experience.