HTML Images

Last Updated:

HTML Images

HTML Images are used to enhance websites, to illustrate stories, to present products, in ad displays etc.

HTML provides web developers three ways for displaying images. They are

  • <img> - Used to display a simple image.
  • <picture> - Used to display different images for different display/device scenarios.
  • <map> - Used to display image with clickable areas.

HTML Img

Use <img> to add an image into a document.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <img src="wikimass.png" alt="wikimass.com" width="150" height="150"> </body> </html>

HTML Picture

Use <picture> to provide versions of an image for different display/device scenarios.

Note: The <picture> tag contains zero or more <source> elements and one <img> element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <picture> <source media="(min-width: 660px)" srcset="devices.jpg"> <source media="(min-width: 475px)" srcset="macbook.jpg"> <source media="(min-width: 385px)" srcset="ipad.jpg"> <img src="iphone.jpg" alt="apple iphone" style="width:auto;"> </picture> </body> </html>

HTML Map

Use <map> tag to define an image-map. An image-map is an image with clickable areas.

Note: The <map> tag contains one or more <area> elements.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <img src="/devices.jpg" alt="apple Devices" style="width:auto;" usemap="#apple-products"> <map name="apple-products"> <area shape="rect" coords="10,20,340,350" alt="macbook" href="/macbook.htm"> <area shape="rect" coords="355,185,540,340" alt="ipad" href="/ipad.htm"> <area shape="rect" coords="545,240,625,340" alt="iphone" href="/iphone.htm"> </map> <p>Note: Click on any specific device to view its detail.</p> </body> </html>

Share this Page

Meet the Author