Use image map to reduce the number of HTTP requests,

Use image map to reduce the number of HTTP requests,
Preface

I recently read "high-performance website construction" to record what I learned.

Currently, many websites use image navigation. Click images to jump to the corresponding link. If there are many navigation items, there will be a large number of images, and each time an image needs to be loaded, there will be an additional HTTP request. One of the optimization methods is to use the image map.

Tag

　　Map and area labels are used for image maps.

The map tag is used to map images on the client. The area tag specifies the ing area. Good compatibility and easy to use

Chestnuts

<Aside class = "container">  <map name = "nav_test"> <area shape = "rect" coords = "0 0 300 110" href = "https://www.so.com/" target = "_ blank" alt = "360 search"> <area shape = "rect" coords = "0 110 300 212" href = "https://www.baidu.com/" target = "_ blank" alt = "Baidu search"> </map> </aside>

The usename of img can specify the ing used, which corresponds to the name attribute of map.

The shape attribute of the area specifies the shape (default | rect | circle | poly). The coords attribute specifies the region. The coords format varies with the shape (the shape in the chestnut is a rectangle, coords specifies the coordinates in the upper left corner and lower right corner of the rectangle, in px. ps: The percentage can also be used in html4, but html5 seems to be only numerical values); href and target, alt are the same as a tag.

 

An image corresponds to two different links, but only one http request reduces one request. In many cases, the number of dropped requests is considerable.