Picture tags
Image tag <img> for the introduction of an external picture to the current page
Use <img> tag to import external images, img tag is a self-closing tag
img belonging replaced elements (between the block elements and inline elements based) inline block elements inline-block image tag.
Attributes:
[Src] : attribute specifies the path to the external image (path rules and hyperlinks are the same)
[Alt] : description of the picture, this description is not displayed by default in the case, some browsers will appear on the page could not be loaded when the picture out. Search engines will be identified according to the picture content in the alt (search squirrel appears squirrel)
[Width] : width of the image
[Height] : height of the image
If the ratio of the width and height change only one image will be enlarged or reduced, etc.
Recommendation: On the PC side is not recommended to modify the size of the picture, the big picture Zoom waste of memory, the miniature image distortion, it is best cut map. But in the mobile terminal, often you need to zoom the picture (big picture Zoom)
img{ width:200px; height:auto; }
Pictures introduced
An external image can be introduced by a relative path
< IMG the src = '. / IMG / 1.gif' Alt = 'Squirrel' >
You can also use absolute paths to introduce external images
<img src='https://www.baidu.com/s?wd=%E9%9B%AA%E5%9C%B0%E6%9D%BE%E9%BC%A0&tn=monline_3_dg&usm=5&ie=utf-8&rsv_cq=%E6%9D%BE%E9%BC%A0&rsv_dl=0_left_pet_multi_6829'>
Picture format
jpeg (jpg):
supports rich color, does not support transparency, does not support animation
normally used to show photo
gif:
Support color is relatively small, simple and transparent support, animation support
single color images, moving map
png:
support for rich color, support transparent complex, does not support animation
rich color, complex transparent images (pages specifically designed for born)
webp:
This picture format is Google's new web page devoted to the representation of images in a format
which has all the advantages of other image formats, but also special little picture, showing good results, transparency Ye Hao, also supports the move FIG
disadvantages: compatibility is not good, especially in the IE browser
Selection rules: the same effect with a small file, the effect is not the same with good effect
Base64:
base64 encoding, you can also use the base64 encoded images, convert images to character, introduced in the form of characters from the picture
in general are some of the needs and pages loaded with pictures will be base64
Online base64 encoding and decoding tools https://base64.us/
