Reduce the number of HTTP requests using picture maps

Objective

Recently in the "High-performance website construction", record what you learned.

Now many of the Web site is a picture of the navigation, click on the image to jump to the corresponding link. If you have a lot of navigation items, there will be a lot of pictures, and one more HTTP request for each image you need to load. One way to optimize is to use a picture map

label

　　Map and area tags are used for image maps

Map tags are used for image mapping of clients; Area tags specify map areas. Good compatibility and can be used with confidence

Chestnuts

  <asideclass= "Container">    <imgsrc= "Src/img_map.png"alt= "Navigation picture"Usemap= "#nav_test">    <Mapname= "Nav_test">      < AreaShape= "Rect"coords= "0 0"href= "https://www.so.com/"Target= "_blank"alt= "360 Search">      < AreaShape= "Rect"coords= "0 212"href= "https://www.baidu.com/"Target= "_blank"alt= "Baidu Search">    </Map>  </aside>

IMG Usename can specify the mappings used, corresponding to the Name property of the map

The shape attribute of area specifies the shapes (default|rect|circle|poly), and the Coords property specifies the region, different shape, the coords format is not the same (pest shape is a rectangle,  coords specifies the coordinates of the upper-left and lower-right corners of the rectangle, in PX. PS: In the HTML4 can also be a percentage, but HTML5 seemingly can only be numeric); href and target, Alt is the same as the a tag.

A picture corresponds to two different links, and there is only one HTTP request, which reduces one request. If there is a lot of navigation, the reduced number of requests will be considerable.

Reduce the number of HTTP requests using picture maps