The Basic Image Tag and File Path

To display an image on a webpage, you use the <img> tag with a src attribute that points to your image file. The src attribute tells the browser where to find the image — either on your own server or elsewhere online. The tag looks like this: <img src="image.jpg" alt="description">

The file path in src can be relative (pointing to a file in your project folder) or absolute (a full web address). A relative path like src="images/photo.jpg" tells the browser to look for a folder called images in the same directory as your HTML file, then find photo.jpg inside it. An absolute path like src="https://example.com/images/photo.jpg" works from anywhere because it includes the full web address.

The alt attribute describes what the image shows in plain text. If the image fails to load, the alt text appears instead. Screen readers also use alt text to describe images to people with vision loss, so write it clearly: "alt='A golden retriever sitting on grass'" rather than "alt='dog'".

Key Takeaways

  • The <img> tag requires a src attribute with the image file path and an alt attribute with a text description.
  • Relative paths like src="images/photo.jpg" work when the image folder is in your project; absolute paths like src="https://example.com/photo.jpg" work from anywhere.
  • The alt attribute makes images accessible to screen readers and appears if the image fails to load, so describe what the image shows.
  • Common image formats for the web are JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes.
  • The <img> tag is self-closing and does not need a closing tag like </img>.

Choosing the Right Image Format

Different image formats serve different purposes on the web. JPG (or JPEG) compresses photographs well and keeps file size small, making it the standard for photos. PNG preserves sharp edges and supports transparency, so use it for logos, icons, and graphics where you need a clean look. WebP is a newer format that produces smaller files than JPG or PNG while keeping quality high, but older browsers do not support it without a fallback.

File size matters because large images slow down page load time. A photograph that is 5 MB will make your page load noticeably slower than the same image compressed to 200 KB. Tools like TinyPNG or ImageOptim reduce file size without visible quality loss. When you embed an image, the browser downloads the entire file, so smaller is always better for user experience.

Setting Image Width and Height

You can control how large an image appears on the page by adding width and height attributes: <img src="photo.jpg" alt="sunset" width="400" height="300">. The numbers are in pixels by default. Setting both width and height prevents the page layout from shifting while the image loads, because the browser reserves space for it before the file arrives.

If you set only width or only height, the browser automatically scales the other dimension to keep the image from looking stretched or squashed. This is useful when you want the image to fit a specific width but do not care about the exact height. You can also use percentages: width="100%" makes the image fill its container, which is common for responsive design that adapts to different screen sizes.

Linking an Image to Another Page

To make an image clickable, wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="photo.jpg" alt="click here"></a>. When someone clicks the image, the browser navigates to the URL in the href attribute, just as if they had clicked a text link.

This pattern is common for image galleries, navigation menus with icons, and thumbnail images that open larger versions. The alt text should still describe what the image shows, not what happens when you click it — so use "alt='sunset photo'" rather than "alt='click to enlarge'".

Responsive Images for Different Screen Sizes

Modern websites need to work on phones, tablets, and desktop screens. The srcset attribute lets you provide multiple versions of the same image at different sizes, and the browser picks the one that fits the screen: <img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1200w" alt="sunset">. The numbers after each filename (480w, 1200w) tell the browser the image width in pixels.

This approach saves bandwidth on phones by sending a smaller file, while desktop users get a sharper image. The src attribute is a fallback for older browsers that do not understand srcset. You can also use the <picture> element for more control, letting you serve completely different images based on screen size or image format support.

Common Mistakes and How to Fix Them

The most frequent error is a broken file path — the browser cannot find the image because the src points to the wrong location. Check that the filename matches exactly (including uppercase and lowercase letters), and that the folder structure in your src matches your actual file organization. Use your browser's developer tools (right-click, then Inspect) to see if the image request failed and what path the browser tried to load.

Another common issue is forgetting the alt attribute, which makes the page less accessible and fails web standards. Some developers also set width and height to values that distort the image — if your image is 800 pixels wide but you set width="400" and height="600", it will look stretched. Always maintain the original aspect ratio, or let the browser calculate one dimension for you.

Large uncompressed images are a third problem. A 10 MB photo will load slowly and frustrate users on mobile connections. Before embedding an image, compress it with an online tool or image editor. Most photographs can be reduced to under 500 KB without visible quality loss.

Frequently Asked Questions

Can I use an image from another website in my src attribute?

Yes, you can point src to any public image URL on the internet. However, this loads the image from that server every time someone visits your page, which slows down your site and uses their bandwidth. It is better to read the image and host it on your own server. Always check the image's copyright or license before using it.

What does the alt attribute do if the image loads successfully?

When the image loads normally, the alt text is invisible to sighted users. It is used by screen readers for people with vision loss and appears only if the image fails to load or if someone hovers over it in some browsers. Alt text is required for web accessibility standards, so always include it even if you cannot see it on the page.

Should I use width and height attributes or CSS to resize images?

Use both. Set width and height attributes in the HTML to reserve space on the page and prevent layout shift while the image loads. Then use CSS if you need to adjust the size for different screens or explore other styling. This combination gives you the best performance and flexibility.

What is the difference between src and srcset?

src is the single image file the browser loads, while srcset provides multiple versions at different sizes and lets the browser choose the best one for the current screen. Use src for straightforward pages where one image size works everywhere, and srcset for responsive design that needs to adapt to phones, tablets, and desktops.

Can I embed an image without a file extension in the src?

Technically yes, but it is not recommended. The file extension (.jpg, .png, etc.) tells the browser what format the image is in. Without it, the browser has to guess, which can cause loading errors or display problems. Always include the correct file extension in your src path.