HTML HTML img Tag Builder
Stop guessing at attributes. Fill in the fields below, watch the image update live, and copy a clean <img> tag straight into your project. It is the fastest way to get the markup right, even if you never look at the docs.
Tip: paste any image URL into the src field to preview your own picture.
What does the img tag actually do?
The <img> tag is how you put a picture on a web page. It is a self-closing element, meaning there is no </img>. You point it at an image with src and you describe that image with alt. That is the bare minimum, and honestly it is most of what you need:
<img src="cat.jpg" alt="A grumpy orange cat">
The attributes worth knowing
| Attribute | What it does |
|---|---|
src | The path or URL to the image. This is the one attribute the tag cannot live without. |
alt | Text shown if the image fails and read aloud by screen readers. Vital for accessibility and SEO. Use an empty value for purely decorative images. |
width / height | The image size in pixels. Setting both reserves space so the page does not jump around as images load. |
loading | Set to lazy to delay off-screen images until the user scrolls near them. Great for long pages. |
decoding | A hint about how to decode the image. async can keep the page feeling snappy. |
title | A tooltip that appears on hover. Optional and not a replacement for alt. |
class | Hooks the image up to your CSS for styling and responsive behaviour. |
How to use the builder
- Set your src. Type an image path, or paste a full URL to preview your own image.
- Write a real alt. Describe what the image shows. Future you and your visitors will thank you.
- Add size and options. Fill in width, height, loading and the rest as needed. The preview and code update instantly.
- Copy and paste. Hit Copy code and drop the tag into your HTML. Done.
Quick tips that save headaches
- Always write alt text. It boosts accessibility and SEO, and rescues you when an image fails to load.
- Set width and height. It stops the dreaded layout shift where content jumps as images appear.
- Lazy load below the fold. Add
loading="lazy"to images that are not visible right away. - Keep images light. Run them through the Image Optimizer first so they load fast.
Frequently asked questions
What is the HTML img tag?
It is the element that embeds an image in a page. It is self-closing, its src points to the image file, and its alt describes the image for screen readers and search engines.
Which attributes should I always include?
Always src and alt. Adding width and height prevents layout shift, and loading="lazy" speeds up pages with lots of images.
Is the alt attribute really required?
Yes. It matters for accessibility and SEO. Describe what the image shows. For decorative images that add no information, use an empty alt so screen readers skip them.
Why is there no closing img tag?
The img element is a void element, so it has no content and no closing tag. In HTML you can write it as <img>, and in XHTML style as <img />.
Further reading: the MDN img element reference, the WHATWG HTML specification, and Wikipedia on HTML elements.
Got your tag? Make sure the image behind it is lean and fast.
Optimize your image→