图片的引入

图片标签

网页中引入图片

网页是文本文件，里面只能包括字符，无法放图片和音频

 

图片标签用于向当前页面中引入一个外部图片

使用img标签引入外部图片，img是一个自结束标签

属性:

      src 属性指定的是外部图片的路径

可以引入网站的图片,也可以使用相对路径引入内部图片

img属于替换元素(基于块和行内元素之间)

显示的并不是img本身，而是显示的是超链接所引入的图片

 

显示的外部引入的资源，

内容被引入的图片替换了，所以称为替换元素

 

alt属性是对图片的描述 这个描述默认情况下不会显示,

有的浏览器会在图片无法加载的时候显示

搜索引擎会根据alt中的内容识别图片

搜索引擎并不能通过识别图片来观察是否是钢铁侠，

是通过alt对图片的描述来搜索到的

如果不写alt属性则图片不会被搜索引擎搜索到，收录

还有作用 比如盲人上网，屏幕阅读器浏览网页读

width 图片的宽度(单位是像素)

height 图片的高度

如果宽度和高度中只修改一个，则另一个会等比例缩放

注意:

     一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大

     大图缩小，浪费内存；小图放大，图片失真

    但是在移动端，经常需要对图片进行缩放(大图缩小)

 

 

图片的格式

     jpef(jpg)

       支持的颜色比较丰富，不支持透明效果，不支持动图

      一般用显示照片(可以压缩)

    gif

      支持的颜色比较少,支持简单透明,支持动图

      适合单一的图片和动图

   png

      支持的颜色丰富,支持复杂透明，不支持动图

      颜色丰富，复杂透明图片(使用较多)

    webp

       谷歌新推出的专门用来表示网页中图片的一种格式

       具备其他图片格式的所以优势，而且文件特别小

       缺点:兼容性不好(轻易不用或者适配)

   base64

        将图片使用base64进行编码，这样可以将图片转换为字符，

       通过字符的形式来引入图片

       一般都是一些需要和网页一起加载的图片才会使用base64

       效果一样，使用小的，所占空间小，加载比较快

  什么情况下使用base64？

         浏览器打开，第一次加载网页本身后面再加载图片，如果图片有多张，就需要请求多次，就会有时间差，加载较慢

        希望网页加载较快，可以用base64，但是可能会拖慢其他的速度（目前使用较慢）效果不一样，使用效果好的