HTML Image

HTML/HTML Image

IMAGE 

Images can be used to set the value for a website in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images; these are images you pay to use. Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website.

Images should... Be relevant,  convey information,  convey the right mood,  be instantly recognisable and fit the color palette.

Adding Images 

To add an image into the page you need to use an <img>  element. This is an empty  element (which means there is no closing tag). It must carry the following two attributes: 

1) Src: This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.

2 alt: This provides a text description of the image which describes the image if you cannot see it. The text used in the alt attribute is often referred to as alt text. It should give an accurate description of the image content so it can be understood by screen reader software (used by people with visual impairments) and search engines

title: You can also use the title attribute with the element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

Example:

Height and Width of Images

• Height : This specifies the height of the image in pixels.
• Width : This specifies the width of the image in pixels.

Images often take longer to load than the HTML code that makes up the rest of the page.Therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

Example:

Where to Place Images in Your Code?

1: before a paragraph The paragraph starts on a new line after the image.

2: Inside the start of a paragraph The first row of text aligns with the bottom of the image.

3: In the middle of a paragraph The image is placed between the words of the paragraph that it appears in.

Example:

Figure and Figure Caption 

Images often come with captions. HTML5 has introduced a new <figure>  element to contain images and their caption so that the two are associated. You can have more than one image inside the  <figure>  element as long as they all share the same caption.

The <figcaption>  element has been added to HTML5 in order to allow web page authors to add a caption to an image. Before these elements were created there was no way to associate an <img>  element with its caption. Older browsers that do not understand HTML5 elements simply ignore the new elements and display the content of them.

Example: 

Summary of HTML Images

• The element is used to add images to a web page.
• You must always specify a src attribute to indicate the source of an image and an alt attribute to describe the content of an image.