一、网页中常见的图像格式

图片格式是计算机存储图片的格式，常见的存储的格式有bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng等。

1.GIF格式

图形交换格式（外语简称：GIF、外语全称：Graphics Interchange Format），是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的有损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。

GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

GIF解码较快，因为采用隔行存放的GIF图像，在边解码边显示的时候可分成四遍扫描。第一遍扫描虽然只显示了整个图像的八分之一，第二遍的扫描后也只显示了1/4，但这已经把整幅图像的概貌显示出来了。在显示GIF图像时，隔行存放的图像会给您感觉到它的显示速度似乎要比其他图像快一些，这是隔行存放的优点；另外，GIF不支持Alpha透明通道。

2.JPEG格式

联合照片专家组（外语简称JPEG外语全称：Joint Photographic Expert Group）JPEG也是最常见的一种图像格式，它是由联合照片专家组（外语全称：Joint Photographic Experts Group），文件后辍名为"．jpg"或"．jpeg"，是最常用的图像文件格式，由一个软件开发联合会组织制定，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。但是JPEG压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像品质。而且 JPEG是一种很灵活的格式，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，支持多种压缩级别，压缩比率通常在10：1到40：1之间，压缩比越大，品质就越低；相反地，压缩比越小，品质就越好。比如可以把1．37Mb的BMP位图文件压缩至20．3KB。当然也可以在图像质量和文件尺寸之间找到平衡点。JPEG格式压缩的主要是高频信息，对色彩的信息保留较好，适合应用于互联网，可减少图像的传输时间，可以支持24bit真彩色，也普遍应用于需要连续色调的图像。

JPEG格式是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式，在 Photoshop软件中以JPEG格式储存时，提供13级压缩级别，以0—12级表示。其中0级压缩比最高，图像品质最差。即使采用细节几乎无损的10 级质量保存时，压缩比也可达 5：1。以BMP格式保存时得到4．28MB图像文件，在采用JPG格式保存时，其文件仅为178KB，压缩比达到24：1。经过多次比较，采用第8级压缩为存储空间与图像质量兼得的最佳比例。

JPEG格式的应用非常广泛，特别是在网络和光盘读物上，都能找到它的身影。各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快。

JPEG2000作为JPEG的升级版，其压缩率比JPEG高约30%左右，同时支持有损和无损压缩。JPEG2000格式有一个极其重要的特征在于它能实现渐进传输，即先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图像由朦胧到清晰显示。此外，JPEG2000还支持所谓的"感兴趣区域" 特性，可以任意指定影像上感兴趣区域的压缩质量，还可以选择指定的部分先解压缩。

JPEG2000和JPEG相比优势明显，且向下兼容，因此可取代传统的JPEG格式。JPEG2000即可应用于传统的JPEG市场，如扫描仪、数码相机等，又可应用于新兴领域，如网路传输、无线通讯等等。

优点：

摄影作品或写实作品支持高级压缩。

利用可变的压缩比可以控制文件大小。

支持交错（对于渐近式 JPEG 文件）。

JPEG 广泛支持 Internet 标准。

缺点：

有损耗压缩会使原始图片数据质量下降。

当您编辑和重新保存 JPEG 文件时，JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。

JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

3.PNG格式

便携式网络图形（外语简称PNG、外语全称：Portable Network Graphics），是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新，所以并不是所有的程序都可以用它来存储图像文件，但Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。 [5]

优点：

PNG 支持高级别无损耗压缩。

PNG 支持 alpha 通道透明度。

PNG 支持伽玛校正。

PNG 支持交错。

PNG 受最新的 Web 浏览器支持。

缺点：

较旧的浏览器和程序可能不支持 PNG 文件。

作为 Internet 文件格式，与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少。

作为 Internet 文件格式，PNG 对多图像文件或动画文件不提供任何支持。GIF 格式支持多图像文

件和动画文件。

......................

二、插入图像并设置图像属性

1.图像标记——img

img图像相关属性
属性	描述
src	图像的源文件
alt	提示文字
width，height	宽度和高度
border	边框
vspace,hspace	垂直间距和水平间距
align	排列
dynsrc	设定avi文件的播放
loop	设定avi文件循环播放的次数
loop delay	设定aci文件循环播放的延迟时间
start	设定avi文件的播放方式
lowsrc	设定低分辨率图片
usemap	映像地图
......	......

基本语法：

<img src="图像的文件地址"/>

语法说明：

图像文件的路径可以是绝对路径，也可以是相对路径

2.设置图像高度和宽度——height、width

基本语法：

<img src="图像文件的地址" width="图像宽度" height="图像高度"/>

语法说明：

用width、height属性来定义图像的宽度和高度

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一张图片</p><img src="data:images/07.jpg" width="250" height="250"/></body>
</html>

效果为：

3.设置图像的边框——border

基本语法：

<img src="图像文件的地址" border="图像边框的宽度"/>

语法说明：

默认情况下，图像是没有边框的

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一张图片</p><img src="data:images/07.jpg" width="250" height="250" border="3"/></body>
</html>

效果为：

4.设置图像的水平间距和垂直间距——hspace、vspace

基本语法：

<img src="图像的地址" hspace="水平间距" vspace="垂直间距"/>

语法说明：

hspace属性以像素为单位，指定图像左边和右边的文字与图像之间的间距；

vspace属性以像素为单位，指定图像上边和下边的文字与图像之间的间距；

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一张图片</p><img src="data:images/07.jpg"width="250" height="250" border="3" hspace="100" vspace="50"/></body>
</html>

效果为：

5.设置图像的对齐方式——align

基本语法：

<img src="图像的地址" align="对齐方式"/>

语法说明：

align属性
属性	描述
left	将图像对齐到左边
right	将图像对齐到右边
top	将图像与顶部对齐
bottom	将图像与底部对齐
middle	把图像与中央对齐
.......	........

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一张图片</p><img src="data:images/07.jpg" width="250" height="250" align="right"/></body>
</html>

效果为：

6.设置图像代替文字——alt

基本语法：

<img src="图像地址" alt="提示文字的内容"/>

语法说明：

alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器的内容。

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一张图片</p><img src="data:images/07.jpg" width="250" height="250" alt="美女"/></body>
</html>

效果为：

三、添加多媒体文件

基本语法：

<embed src="多媒体文件地址" width="多媒体宽度" height="多媒体高度" auto start="是否自动运行" loop="是否循环播放"></embed>

语法说明：

width和height一定要设置，单位是像素，否则无法正确显示播放多媒体的文件；

auto start的取值有俩个：true（自动播放）和false（不自动播放）；

loop的取值也是有俩个：true（媒体文件将无限次数播放）和false（只播放一次）

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>插入一个音频文件</p><embed src="music/王铮亮%20-%20时间都去哪儿了%20(纯音乐).mp3"width="500" height="500" ></embed></body>
</html>

效果为：

四、添加背景音乐

1.设置背景音乐和设置循环播放次数——bgsound、loop

基本语法：

<bgsound src="背景音乐地址"></bgsound>

语法说明：

背景音乐可以是avi、mp3等声音文件，路径也可以是绝对路径或者相对路径

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html </title></head><body><p>设置一个背景音乐</p><img src="data:images/woof.jpg" width="200" height="200"/><bgsound src="data:images/shijian.mp3" loop="3"></bgsound></body>
</html>

效果为：

用HTML创建图像和多媒体页面相关推荐

HTML5超链接和多媒体,IT兄弟连 HTML5教程多媒体应用创建图像和链接
原标题:IT兄弟连 HTML5教程多媒体应用创建图像和链接指引多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...
GDAL创建图像提示Driver xxx does not support XXX creation option的原因
经常在群里有人问,创建图像的时候为什么老是提示下面的信息. CPLError: Driver GTiff does not support DCAP_CREATE creation option Wa ...
创建图像 php,详解php创建图像具体步骤
php 的图像处理在验证码是最常见的,下面说下使用php创建图像的具体步骤. 简要说明:PHP 并不仅限于创建 HTML 输出, 它也可以创建和处理包括,,,以及在内的多种格式的图像. 更加方便的是, ...
html创建php,php-从html创建图像
我想从html创建图像,因为它已经过时且不再工作,所以我无法使用画图,我想要类似的东西. 我已经尝试过使用GD库创建图像,像这样 $html_code = " this is the bod ...
OpenCV2:幼儿园篇第一章创建图像并显示
一.简介相当于在PS中,新建一个画布 cv::Mat 类和 lplimage / cvMat结构体都可以表示一张图像二.构造函数创建图像 // 创建一个空矩阵 cv::Mat image1;// ...
opencv 创建图像_非艺术家的图像创建（OpenCV项目演练）
opencv 创建图像 This project stemmed from my predilection of the visual arts - as a computing student, I ...
HTML5 Canvas中创建图像数据
创建图像数据如果想预先生成一组空的canvas数据,则可调用context.createImageData(sw, sh),这个函数可以创建一组图像数据并绑定在canvas对象上.这组数据可以像先前 ...
js创建10万行表格页面显示10万行数据
js创建10万行表格页面显示10万行数据 <html> <head></head> <style> table { border-collap ...
【5】天猫精灵开放平台实验—基于天气查询模板创建开发屏显页面技能
文章目录天猫精灵开放平台实验-基于模板创建开发屏显页面技能一.前提准备二.登录天猫精灵开放平台 (一)创建新技能 1.创建语音技能 2.填写基本信息 (二)创建后端服务 1.创建后端服务 2.关 ...

用HTML创建图像和多媒体页面

一、网页中常见的图像格式

二、插入图像并设置图像属性

三、添加多媒体文件

四、添加背景音乐

用HTML创建图像和多媒体页面相关推荐

最新文章

热门文章