HTML Images

Bookmarks jump you around text. Images bring photos, diagrams, and logos into the page. The basic HTML tool is the empty img element: it does not wrap a caption between open and close tags in normal use. It points to a file with src and offers a text alternative with alt.

What img does

img is a replaced element. The browser fetches the resource at src and paints it in the layout. If the file is missing or blocked, visitors still need a useful alt (or, for pure decoration, an explicitly empty alt=""). Paths follow the same relative and absolute rules you already use for links and favicons.

Direct answer

Write <img src="path/to/file.jpg" alt="short description">.

• src — where the image file is
• alt — text alternative when the image cannot be seen or fails to load
  Optional width and height can reserve space and reduce layout jump. Prefer compressing oversized photos instead of shipping multi-megabyte files to every learner on a slow connection.

Core attributes at a glance

A basic informative image

Put images in a clear folder such as images/ and describe what matters in alt.

Reading the basic sample

• src="images/team.jpg" is a relative path from the HTML file
• alt explains the photo’s meaning for screen readers and failed loads
• There is no separate closing </img> in normal HTML writing — attributes live on the single tag
• If the folder or filename is wrong, the image breaks even when the tag looks perfect

Width and height hints

Giving width and height helps the browser reserve space before the bytes arrive. Match the aspect ratio of the real file when you can, so the image does not look stretched. Shrinking a huge photo only with HTML attributes still downloads the huge file — resize and compress assets for the web.

Decorative images and empty alt

When an image adds no information — a purely decorative flourish already covered by nearby text — use alt="". Do not omit the attribute. Omitting alt and writing empty alt="" are different: empty means “ignore me for accessibility trees,” missing often means “something went wrong in the markup.”

Write alt for meaning, not spam

Good alt is a short substitute for the image in context: what a sighted user would need to understand the page. Bad alt stuffs keywords, repeats a caption already printed beside the image, or says “image” with no content. If the image is a chart, summarize the takeaway; if it is a logo that also acts as a home link, the link’s accessible name usually comes from the image alt or surrounding text — keep it honest.

File formats beginners meet

JPEG (.jpg) suits photos. PNG suits graphics with sharp edges or transparency. SVG suits simple icons and logos when you want crisp scaling (you will see more SVG patterns later). Pick a format that fits the content, then keep the file weight reasonable.

Practice in your editor

1. Put a small .jpg or .png in an images folder.
2. Add an img with a correct relative src and clear alt.
3. Add width and height that match the aspect ratio.
4. Break the path on purpose once — confirm alt (or broken-image UI) helps you notice the error, then fix the path.
5. Add one decorative image with alt="" and confirm you did not delete the attribute entirely.

Easy mistakes

• Missing alt on informative images
• Wrong folder or spelling in src
• Shipping a multi-megabyte camera photo when a smaller web-sized file would do
• Treating alt as a keyword dumping ground
• Stretching logos with mismatched width/height
• Confusing src (images) with href (links)

Summary

• Images use img with src and alt
• Paths follow the same rules as other site files
• alt supports accessibility and failed loads; use alt="" only for pure decoration
• Width and height can reserve space; still optimize real file size
• Choose a sensible format and keep downloads light