HTML Images

### 在网页中插入图片
图像通过使网页更加有趣和丰富多彩，增强了网页的视觉效果。

`<img>`标签用于在HTML文档中插入图像。它是一个空元素，仅包含属性。`<img>`标签的语法可以表示为：

```html
<img src="url" alt="some_text">
```
以下示例在网页上插入了三张图片：

```html
<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">
```
每个图像必须至少包含两个属性：`src`属性和`alt`属性。

`src` 属性告诉浏览器在哪里可以找到图像。它的值是图像文件的 URL。

然而，`alt`属性为图像提供了一个替代文本，以防图像不可用或因某种原因无法显示。其值应作为图像的有意义替代。

> 注意：与 `<br>` 类似，`<img>` 元素也是一个空元素，没有对应的结束标签。但在 XHTML 中，它以 "/>" 结束，从而自我闭合。

> 提示：所需的`alt`属性为图像提供了替代文本描述，以防用户因连接速度慢、指定URL的图像不可用，或使用屏幕阅读器或非图形浏览器而无法查看图像。

### Setting the Width and Height of an Image
The `width` and `height` attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

```html
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">
```
You can also use the `style` attribute to specify width and height for the images. It prevents style sheets from changing the image size accidently, since inline style has the highest priority.

```html
<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">
```
> Note: It's a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.

### Using the HTML5 Picture Element
Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as expected. Also, reducing the image dimension using the `width` and `height` attribute or property doesn't reduce the original file size. To address these problems HTML5 has introduced the `<picture>` tag that allows you to define multiple versions of an image to target different types of devices.

The `<picture>` element contains zero or more `<source>` elements, each referring to different image source, and one `<img>` element at the end. Also each `<source>` element has the `media` attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used. Let's try out an example:

```html
<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>
```
> Note: The browser will evaluate each child <source> element and choose the best match among them; if no matches are found, the URL of the <img> element's src attribute is used. Also, the <img> tag must be specified as the last child of the <picture> element.

### Working with Image Maps
An image map allows you to define hotspots on an image that acts just like a hyperlink.

The basic idea behind creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files. For example, a map of the world may have each country hyperlinked to further information about that country.

Let's try out a simple example to understand how it actually works:

```html
<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>
```
The `name` attribute of the `<map>` tag is used to reference the map from the `<img>` tag using its `usemap` attribute. The `<area>` tag is used inside the `<map>` element to define the clickable areas on an image. You can define any number of clickable areas within an image.

> Note: The image map should not be used for website navigation. They are not search engine friendly. A valid use of an image map is with a geographical map.

> Tip: There are many online tools available for creating image maps. Some advanced editors like Adobe Dreamweaver also provides a set of tools for easily creating image maps.