HTML Images

HTML images are added to web pages using the <img> tag which can be used to include images, graphics and gifs in HTML. They are essential for creating engaging and informative web experiences!

Here’s how HTML images work:

  1. Image Tag (<img>):
    • To insert an image, you use the <img> tag, an empty tag or “void element” that doesn’t require a closing tag.
  2. Key Attributes:
    • src: Specifies the image’s source URL, telling the browser where to find the image file.
    • alt: Provides alternative text that describes the image, which is crucial for accessibility and SEO. This text will be seen in place of the image if the source URL doesn’t connect to the image.
    • width and height: Optionally set the image’s dimensions in pixels or percentages.
    • title: Displays a tooltip when hovering over the image, similar to titles with the link element.

Here are examples of how to embed images in HTML using the <img> tag:

1. Basic Image:

HTML:

<img src="image.jpg" alt="Description of the image">
  • src attribute: Specifies the image’s source URL (the path to the image file).
  • alt attribute: Provides alternative text for the image, crucial for accessibility and SEO.

2. Resize Image:

HTML:

<img src="image.jpg" width="300" height="200" alt="Resized image">
  • width and height attributes: Set the displayed dimensions of the image (in pixels).

3. Linkable Image:

HTML:

<a href="image.jpg">
    <img src="image-thumbnail.jpg" alt="Click to view full-size image">
</a>
  • Wrap the <img> tag within an anchor tag (<a>) to make it clickable, leading to the full-size image or a different page.

Image Placement:

  • Images are inline elements, meaning they don’t create line breaks like paragraphs or headings.
  • They can be placed within text, paragraphs, lists, or other elements.
  • Use CSS to further control image placement and styling.

Best Practices for Using Images:

  • Optimize Image Size: Compress images to reduce file size for faster page loading.
  • Choose Meaningful Image Formats: Use appropriate formats like JPEG for photos, PNG for graphics with transparency, and SVG for vector graphics.
  • Provide Helpful alt Text: Describe the image clearly and concisely for accessibility and SEO.
  • Consider Responsiveness: Ensure images scale appropriately for different screen sizes and devices.
  • Balance Visual Appeal and Performance: Use images effectively without overburdening page load times.
  • Accessibility: Alt text ensures images are accessible to those with visual impairments using screen readers.
  • SEO: Search engines consider image alt text and file names for image search results, so remember to describe your images.
< Previous
Next Lesson >