How to Add Photos in HTML: A Comprehensive Guide

Images are crucial for enhancing the visual appeal and user engagement of any website. They break up text, illustrate points, and make web pages more attractive. In HTML, embedding images is a straightforward process using the <img> tag. This guide will walk you through everything you need to know about how to add photos in HTML, ensuring your website is both visually appealing and SEO-friendly.

Understanding the <img> Tag

The foundation of displaying images on a webpage is the <img> tag. Unlike many HTML tags, the <img> tag is self-closing, meaning it doesn’t require a closing tag like </img>. Instead, it uses attributes to define its behavior and source. Think of the <img> tag as creating a placeholder on your webpage where the browser will then fetch and display the image.

The <img> tag requires two essential attributes for it to function correctly: src and alt.

The src Attribute: Specifying the Image Source

The src attribute, short for “source,” is arguably the most important attribute of the <img> tag. It tells the browser where to find the image file. The value of the src attribute is the URL (Uniform Resource Locator) or the file path to your image. This path can be either:

• Absolute URL: A full web address pointing to an image hosted on another website. For example:

  <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools Logo">

  Using absolute URLs is convenient for quickly embedding images from external sources. However, be mindful of copyright issues and the reliability of external servers. If the external server is down or the image is removed, your image will break.

• Relative URL: A path that is relative to the location of your HTML file on your web server. This is the more common and recommended approach for images you control and host yourself. For example, if your image myphoto.jpg is in the same folder as your HTML file, you would use:

  <img src="myphoto.jpg" alt="My Photo">

  If your images are organized in a subfolder, for instance, an “images” folder within your website’s directory, the path would be:

  <img src="/images/myphoto.jpg" alt="My Photo in subfolder">

  Relative URLs are preferred because they make your website more portable. If you move your website to a different server or domain, relative paths will generally continue to work without needing to be updated, as long as the file structure remains consistent.

Important Note: When a webpage loads, the browser immediately attempts to download and display the images specified in the src attributes. Therefore, ensure that the image files are always accessible at the specified path. If the browser cannot find the image at the given src, it will display a broken image icon, and the text from the alt attribute will be shown instead.

The alt Attribute: Providing Alternative Text

The alt attribute, short for “alternative text,” is another crucial attribute for the <img> tag. It provides a text description of the image. This text serves several important purposes:

• Accessibility: Screen readers used by visually impaired users rely on alt text to describe images. This makes your website accessible to a wider audience.
• SEO (Search Engine Optimization): Search engines use alt text to understand the content of images, which helps them index your pages more effectively. Descriptive alt text can improve your website’s SEO ranking.
• Fallback Display: If the image fails to load (due to a broken link, slow connection, or browser issues), the alt text will be displayed in place of the image, informing the user about what the image was supposed to be.

A well-written alt attribute should be concise and accurately describe the image’s content and context within the webpage.

For example:

<img src="img_chania.jpg" alt="Flowers in Chania">

If the img_chania.jpg image fails to load, the browser will display “Flowers in Chania” instead.

Tip: When writing alt text, imagine you are describing the image to someone who cannot see it. Be specific and relevant to the surrounding content. Avoid keyword stuffing; instead, use natural language that incorporates relevant keywords where appropriate.

Controlling Image Size: Width and Height

You can control the display size of images in HTML using a couple of methods:

• width and height Attributes: You can directly specify the width and height of the image in pixels using the width and height attributes within the <img> tag.

  <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

  It’s generally recommended to always specify the width and height attributes. This helps the browser reserve the correct space for the image on the page as it loads, preventing page reflow and improving the user experience.

• style Attribute and CSS: For more precise control over image styling and responsiveness, you can use the style attribute and CSS (Cascading Style Sheets). This is the preferred method for modern web development as it separates styling from the HTML structure.

  <img src="img_girl.jpg" alt="Girl in a jacket" style="width: 300px; height: auto;">

  Using CSS allows for more flexible image resizing, especially when creating responsive websites that adapt to different screen sizes. Setting height: auto; along with a specified width will maintain the image’s aspect ratio while resizing.

Common Image Formats

Web browsers support various image formats. Here are the most common and web-friendly formats:

Abbreviation	File Format	File Extension	Best Use Cases
JPEG/JPG	Joint Photographic Experts Group	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Photographs, complex color images, images where file size is a concern
PNG	Portable Network Graphics	.png	Images with transparency, logos, icons, detailed graphics, lossless quality
GIF	Graphics Interchange Format	.gif	Animated images, simple graphics, images with limited colors
SVG	Scalable Vector Graphics	.svg	Logos, icons, illustrations, scalable graphics without loss of quality
WebP	Web Picture format	.webp	Modern format offering superior compression and quality, supported by modern browsers

Choosing the right image format depends on the type of image and your priorities (quality vs. file size). For photographs, JPEG is often a good choice. For logos and graphics with transparency, PNG or SVG are generally better. GIFs are suitable for simple animations. WebP is a modern format that offers excellent compression and quality, making it a good option for optimizing website performance.

Images as Links

Images can also be used as hyperlinks. To make an image clickable, you simply enclose the <img> tag within an anchor <a> tag.

<a href="https://www.dfphoto.net">
  <img src="dfphoto_logo.png" alt="dfphoto.net - Photography Website">
</a>

In this example, clicking on the dfphoto_logo.png image will take the user to https://www.dfphoto.net.

<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial"></a>

Floating Images with CSS

You can use CSS to control the positioning of images within your text flow. The float property is commonly used to make images float to the left or right of surrounding text.

<img src="smiley.gif" alt="Smiley face" style="float: right; margin-left: 15px;">
<p>This text will flow to the left of the image because the image is set to float right.  The margin-left adds some space between the image and the text.</p>

<img src="smiley.gif" alt="Smiley face" style="float: left; margin-right: 15px;">
<p>This text will flow to the right of the image because the image is set to float left. The margin-right adds some space between the image and the text.</p>

Using float allows you to create visually appealing layouts where text wraps around images, enhancing the visual hierarchy and readability of your content.

Conclusion

Adding photos in HTML is fundamental to web development. By mastering the <img> tag and its attributes like src and alt, you can effectively embed images to enrich your web pages. Remember to optimize your images for the web by choosing the right format, compressing file sizes, and providing descriptive alt text for both accessibility and SEO benefits. Experiment with different image attributes and CSS styling to create visually engaging and user-friendly websites.