1、gif格式
gif采取LZW压缩，因此压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的丢失，且压缩率高，支持动画效果，很适宜互联网平台，但是它只支持256种颜色。
2、jpg或jpeg格式
以JPEG有损压缩图片，常日用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成丢失，这部分丢失不影响图片显示，一样平常人眼是看不出来差异的。丢失数据越多，图片就越不清晰。
3、png格式
png是一种非毁坏性的网页图像文件格式，它以最小的办法压缩图片且不造成图片数据丢失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度掌握，更多层的透明度设置。
二、利用图片网页中通过<img>标签插入图片，语法如下：
<img src="图片路径" alt="更换文本" />
详细示例：
<!DOCTYPE HTML><html><body><p>一幅图像：<img src="/i/eg_mouse.jpg" width="128" height="128" /></p><p>一幅动画图像：<img src="/i/eg_cute.gif" width="50" height="50" /></p><p>请把稳，插入动画图像的语法与插入普通图像的语法没有差异。</p></body></html>
效果如下：
更换文本属性（Alt）
alt 属性用来为图像定义一串预备的可更换的文本。
<img src="boat.gif" alt="Big Boat">
当浏览器无法载入图像时，更换文本属性可见告读者他们失落去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上更换文本属性是个好习气，这样有助于更好地显示信息，并且对付那些利用纯文本浏览器的人来说是非常有用的。
图像宽度和高度属性
如下代码，在网页中插入一个宽度和高度都是300像素的图片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />
图片超链接
如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。
<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>创建图像热区链接
除了对全体图片进行超链接设置外，还可以将图像划分身分歧区域进行链接设置，比如一张舆图中给每个省份图形进行超链接。
图像热区链接，利用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对付图片左上角位置。
示例代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><p>点击太阳或其他行星，把稳变革：</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"> <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"> <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif"> <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif"></map></body></html>
效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。
可以看到鼠标在图片上点击小行星会打开对应的图片。
到此网页中利用图片已经大体先容了，自己亲手写下，会加深印象，感谢关注。
上篇：前端入门——html 超链接
下篇：前端入门——html 如何在网页中利用视频音频
