HTML

Last Updated: 9/18/2022

Images and Pictures

Images

  • <img> tag is used to embed an image in a web page.
  • The <img> tag is an empty tag, it contains attributes only, and does not have a closing tag.
  • The tag has two required attributes:
    • src - Specifies the path to the image
    • alt - Specifies an alternate text for the image. Text is shown if the browser cannot find the image. Search engine reads the text and understand. Useful for visually impaired people.
  • Most common image file types are jpg, png, gif, svg, ico

Syntax

<img src="url" alt="alternatetext">

A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Maps

  • HTML <map> tag defines an image map.
  • An image map is an image with clickable areas. The areas are defined with one or more tags.
  • The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.
<img src="workplace.jpg"  alt="Workplace"  usemap="#workmap">  
<map name="workmap">  
	<area shape="rect"  coords="34,44,270,350"  alt="Computer"  href="computer.htm">  
	<area shape="rect"  coords="290,172,333,250"  alt="Phone"  href="phone.htm">  
	<area shape="circle"  coords="337,300,44"  alt="Coffee"  href="coffee.htm">  
	<area shape="poly"  coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"  href="croissant.htm">
</map>

Shape Coordinates

  • Rect shape coords - x1,y1, x2,y2
  • Circle coords - x,y,radius
  • Poly coords - The coordinates come in pairs, one for the x-axis and one for the y-axis

Picture

  • <picture> element allows you to display different pictures for different devices or screen sizes.
  • Gives web developers more flexibility in specifying image resources.
  • picture element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.
  • source element has a media attribute that defines when the image is the most suitable
  • Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.
<picture>  
<source media="(min-width: 650px)"  srcset="img_food.jpg">  
<source media="(min-width: 465px)"  srcset="img_car.jpg">  
<img src="img_girl.jpg">  
</picture>

When to use the Picture Element

There are two main purposes for the <picture> element:

  • Bandwidth - If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.
  • Format Support - Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.
<picture>  
<source srcset="img_avatar.png">  
<source srcset="img_girl.jpg">  
<img src="img_beatles.gif"  alt="Beatles"  style="width:auto;">  
</picture>
Previous
Next