常用图片格式介绍(了解

常用图片格式

 

  • 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

1、psd

photoshop的专用格式

优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。

缺点:应用范围窄,图片容量相对比较大。

2、jpg

网页制作及日常使用最普遍的图像格式。

优点:图像压缩效率高,图像容量相对最小。

缺点:有损压缩,图像会丢失数据而失真,不支持透明背景,不能制作成动画。

3、gif

制作网页小动画的常用图像格式。

优点:无损压缩,图像容量小、可以制作成动画、支持透明背景。

缺点:图像色彩范围最多只有256色,不能保存色彩丰富的图像,不支持半透明,透明图像边缘有锯齿。

4、png

网页制作及日常使用比较普遍的图像格式。

优点:无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑

缺点:不能制作成动画

 

位图和矢量图

位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿。

 

svg

目前首选的网页矢量图格式。

优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。

缺点:色彩不够丰富。

 

总结

在网页制作中,如何选择合适的图片格式呢?

 

  • 1、使用大幅面图片时,如果要使用不透明背景的图片,就使用jpg图片
  • 如果要使用透明或者半透明背景的图片,就使用png图片

 

  • 2、使用小幅面图片或者图标图片时,
  • 如果图片含多种颜色,可以使用gif或png图片
  • 如果图片是单色,而且要求有很好的显示效果,可以使用svg
  • 如果是图片时动画的,可以使用gif

 

 

psd

jpg

gif

png

svg

photoshop

常用

网页小动画,

常用

 

保存所有图片信息

,压缩效率高,容量小

无损压缩,容量下,支持透明

无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑

图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑

应用范围窄,容量大

有损压缩,

不支持透明, 和动画

图像色彩不丰富,不支持半透明, 透明有锯齿

不能制作成动画

色彩不够丰富。

常用图片:

jpg(不透明) ,

png(透明),

动画:gif

色彩单一要求很高:svg

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 858. 镜面反射(最小公倍数/最大公约数)

文章目录1. 题目2. 解题1. 题目 有一个特殊的正方形房间,每面墙上都有一面镜子。 除西南角以外,每个角落都放有一个接受器,编号为 0, 1,以及 2。 正方形房间的墙壁长度为 p,一束激光从西南角射出&#xf…

SharePoint 2013的100个新功能之搜索(一)

一:新的搜索架构 SharePoint 2013中将最好的两个搜索引擎“SharePoint搜索”和“SharePoint FAST搜索服务”整合到了一个搜索引擎,提供更大的冗余和更好的扩展性。更多信息 二:持续的爬网 一个新的爬网选项“持续爬网”被引入到了搜索的爬网计划表中&…

Ubuntu从零安装 Hadoop And Spark

安装 linux 以Ubuntu为例 选择镜像,虚拟机安装 虚拟机下,直接安装镜像即可,选择好自己的配置,一定要注意路径名选好,而且和你虚拟机的名称匹配,这里我的镜像是 ubuntu-20.04.2.0-desktop-amd64.iso 切换…

04.卷积神经网络 W2.深度卷积网络:实例探究

文章目录1. 为什么要进行实例探究2. 经典网络3. 残差网络 ResNets4. 残差网络为什么有用5. 网络中的网络 以及 11 卷积6. 谷歌 Inception 网络简介7. Inception 网络8. 使用开源的实现方案9. 迁移学习10. 数据增强 Data augmentation11. 计算机视觉现状作业参考: 吴…

transition动画与transform变换(了解

1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲…

mysql游标循环的使用

CREATE PROCEDURE test.new_procedure () BEGIN -- 需要定义接收游标数据的变量 DECLARE a CHAR(16);-- 游标DECLARE cur CURSOR FOR SELECT i FROM test.t;-- 遍历数据结束标志DECLARE done INT DEFAULT FALSE;-- 将结束标志绑定到游标DECLARE CONTINUE HANDLER FOR NOT FOUND…

动态规划之最长上升子序列模型

动态规划分为很多模型,比如说数字三角形模型,最长上升子序列模型,背包模型,状态机模型,状态压缩,区间dp,树形dp等等 下面,我就Acwing提高课中,最长上升子序列模型进行了整…

LeetCode 900. RLE 迭代器(模拟/二分查找)

文章目录1. 题目2. 解题2.1 直接模拟2.2 二分查找1. 题目 编写一个遍历游程编码序列的迭代器。 迭代器由 RLEIterator(int[] A) 初始化,其中 A 是某个序列的游程编码。 更具体地,对于所有偶数 i,A[i] 告诉我们在序列中重复非负整数值 A[i …

html-css练习题(系统提示)

代码赏析&#xff1a;<!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&qu…

notification

A页面 //向列表页面B发送一个通知 postShopZanCountData NSMutableDictionary *dic[[NSMutableDictionaryalloc] init]; [[NSNotificationCenterdefaultCenter] postNotificationName:"postData"object:niluserInfo:dic]; B 页面 [[NSNotificationCenterdefaultCente…

机器学习算法--线性回归分析(单元和多元)

关键词 分类模型、回归模型 存在序的离散属性、不存在序的离散属性 有监督的机器学习 回归的分类&#xff08;输入变量数目&#xff0c;输入变量和输出变量的关系&#xff09; 已知数据集&#xff0c;未知参数 均方误差最小化&#xff0c;最小二乘法 一元线性回归 多元线…

LeetCode 740. 删除与获得点数(排序+动态规划)

文章目录1. 题目2. 解题1. 题目 给定一个整数数组 nums &#xff0c;你可以对它进行一些操作。 每次操作中&#xff0c;选择任意一个 nums[i] &#xff0c;删除它并获得 nums[i] 的点数。之后&#xff0c;你必须删除每个等于 nums[i] - 1 或 nums[i] 1 的元素。 开始你拥有…

多线程编程-条件变量

转载自&#xff1a;http://blog.chinaunix.net/uid-21411227-id-1826890.html 1&#xff0e;引言&#xff1a; 条件变量是一种同步机制&#xff0c;允许线程挂起&#xff0c;直到共享数据上的某些条件得到满足。条件变量上的基本操作有&#xff1a;触发条件(当条件变为 true 时…

html-css练习题 (注册表单)

代码赏析&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <meta http-equiv"X-UA-Co…

虚拟机安装 服务器 Ubuntu Server20.04.2

虚拟机安装 服务器 Ubuntu Server20.04.2 下载地址 VMware创建新的虚拟机 首选选择典型 稍后安装操作系统&#xff0c;并点击下一步 选择Linux Ubuntu64位 命名虚拟机 指定虚拟机的容量 点击确定之后开启虚拟机 选择自己下载的镜像文件 打开虚拟机进行配置 单击…

LeetCode 838. 推多米诺(模拟)

文章目录1. 题目2. 解题1. 题目 一行中有 N 张多米诺骨牌&#xff0c;我们将每张多米诺骨牌垂直竖立。 在开始时&#xff0c;我们同时把一些多米诺骨牌向左或向右推。 每过一秒&#xff0c;倒向左边的多米诺骨牌会推动其左侧相邻的多米诺骨牌。 同样地&#xff0c;倒向右边…

html-css练习题(天天生鲜静态网页制作)文末有完整版代码地址链接

一、前言&#xff1a; 前端学习经典练手网页&#xff0c;重新整理网页版代码&#xff0c;如果你是初学者&#xff0c;请试着做一下这个网页 素材&#xff1a;文末完整版代码中。。。。。。 二、效果图&#xff1a; 三、主要需求&#xff1a; 1.login最外侧盒子设定高29 背景…

AutoIt: WinGetClassList可以把当前窗口所有的handle全部列出来

WinGetClassList 是一个非常有用的函数&#xff0c;可以返回当前窗口中所有的handle。返回的是一个字符串&#xff0c;可以使用split函数来拆分之。 Opt("WinTitleMatchMode")$handle WinGetHandle(".NET Reactor v4.5.9.8 - Full Version")ConsoleWrite(…

xshell连接Linux Server

由于server环境下无法使用vmtools&#xff0c;所以推荐使用shell工具进行链接使用。下载的内容源自果核&#xff0c;使用方法&#xff1a; xhell压缩包里面有crack目录&#xff0c;将nslicense.dll文件覆盖到软件目录 xhellplus&#xff0c;将nslicense.dll文件分别覆盖到软件X…

小案例:搭建简易版王者荣耀英雄购买商城网页版

目录 一、网页赏析&#xff1a; 二、代码分三部分&#xff1a; 1、html代码&#xff1a; 2、main.css赏析&#xff1a; 3、初始化reset.css代码&#xff1a; 三、主要素材下载地址&#xff1a; 一、网页赏析&#xff1a; 二、代码分三部分&#xff1a; 1.html 2.初始化…