保存图像_设计干货知识:SVG vs PNG vs JPG|图像格式的优缺点
首发于小智LOGO:https://xzlogo.com 及同名公众号
在为网站和其他数字媒体创建图像时,哪种文件格式会给你带来最佳效果?让我们深入了解每种图像格式的优缺点。
SVG
SVG是可缩放矢量图形。它非常实用,适用于除照片之外的任何类型的图像。这就是设计师更频繁地使用它的原因。
SVG是一种无损格式。这意味着它在压缩时不会丢失任何数据,呈现不同的颜色。最常用于网络上的图形和LOGO以及将在视网膜或其他高分辨率屏幕上查看的项目。
SVG的优点
矢量格式可呈现任何大小而不降低其质量
能够在代码或文本编辑器中创建简单的SVG渲染
从Adobe Illustrator或Sketch设计可导出复杂图形或者是草图
可以访问SVG文本
SVG很容易设计风格和脚本
现代浏览器支持SVG格式,并且面向未来
格式具有高度可压缩性和轻量级
由于基于文本的格式,因此适合搜索
支持透明度
允许静止或动态图像
SVG的缺点
设计SVG可能会变得复杂
在某些版本过低的浏览器上无法呈现
电子邮件客户端支持有限
PNG
PNG是便携式网络图形,是一种为网络设计的格式,提供JPG无法提供的东西—透明度。 这就是为什么PNG如此受欢迎,这种格式的图像元素可以很方便被上传到网站设计中。
有两种类型的PNG格式: PNG-8和PNG-24。 PNG-8使用更有限的调色板,只有256种颜色,透明度更好,保存尺寸更小。 PNG-24使用无限的调色板,保持透明度,但保存尺寸更大。 两种PNG类型都具有无损压缩。
虽然PNG格式与GIF类似,但它们不支持动画。 此格式最常用于图标,小型静止图像或任何需要透明度的图像。
PNG的优点
支持透明度
适用于带有文字的图像
PNG格式可以很好地呈现LOGO
包括搜索引擎的嵌入式文本说明
PNG-8文件很小,重量也是最轻
保存时不会存在没有锯齿状边缘
PNG的缺点
对于大型文件(如图像),文件大小会随着图像的尺寸设定而明显
一些较旧的电子邮件客户端无法呈现它们
不支持动画特效
PNG-24文件可能变大; 不太适合网络共享
JPG
JPG或Joint Photographic Experts Group联合图像专家小组,(JPEG)可能是最知名并且使用最广的图像格式。 这是大多数图像保存的默认选项,因为它几乎可以无限制地显示彩色照片。
JPG还提供了可以将图像压缩程度从0%(重压缩)到100%(无压缩)的能力。 大多数设计师选择60%到70%范围内。 图像在此压缩级别仍然看起来很好,但文件大小要小得多。
JPG使用期间有损压缩,并且在压缩期间不保存原始数据。 每次重新保存照片并将其导出为JPG时,它都会降低。
JPG格式最常用于图像,摄影和任何具有大量颜色的东西。
JPG的优点
非常适合高饱和度和摄影
易于减小文件大小
在电子邮件客户端中有很好的兼容性
JPG的缺点
没有透明度
文本在保存之后会出现锯齿状边缘
不支持动画特效
有损压缩格式
没有自动搜索元数据,必须包含alt信息
你应该使用什么格式呢?
既然你已经知道SVG与PNG和JPG之间存在哪些差异,你应该如何选择使用呢?现在可以通过几个问题来得到答案。
· 你需要矢量或光栅格式吗?
矢量:SVG
光栅:JPG或PNG
· 你需要透明度吗?
是的:SVG或PNG
不:JPG
· 你使用的是高彩色图像吗?
是的:JPG或PNG
不:SVG
· 这是一张大照片吗?
是的:JPG
不:PNG
· 图像是否包含文字?
是的:PNG
不:JPG
· 无损压缩对您来说很重要吗?
是的:SVG或PNG
不:JPG
· 是否需要更新和重新设计图形?
是的:SVG
否:PNG或JPG
· 用于动画吗?
是的:SVG
不:JPG或PNG
结论
这三种图像格式都具有实用和广泛的应用。 虽然SVG是最新的格式,并且通常可以保存到最小的文件大小,但对于不同的项目和需求,它并不总是最佳选择。
在选择文件类型时,考虑如何在项目中使用图像,以找到最适合你要完成的项目的文件类型。 你甚至可能会发现项目中包含使用所有三种文件类型的图像。
保存图像_设计干货知识:SVG vs PNG vs JPG|图像格式的优缺点相关推荐
- 创立创造创建的区别_【干货|知识分享】Solidworks与Rhino有什么区别呢?
## [干货|知识分享]Solidworks与Rhino有什么区别呢? 三维建模软件有很多,其中常用.功能相似的就是Solidworks和Rhino,这两个对于大学生们最为熟悉的.最开始接触的三维建 ...
- 公共样式_设计干货 | 园路铺装的100种样式,保存收好
Part 1 园路的形式 主干道:联系全园,必须考虑通行.生产.救护.消防.游览的需要. 次干道:沟通各景点.建筑,通轻型车辆. 休闲小径.健康步道:健康步道是近年来最为流行的足底按摩健身方式.通过行 ...
- 合成文本图像_设计中哪个更重要:图像还是文本?
合成文本图像 Technology has changed the modern world greatly in recent years and, in particular, it has ch ...
- sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...
可能很多人对 InVision 是做什么的不太清楚,这里稍微科普一下,除去需要 VPN 来提速(不是被墙),这家公司应该是目前所有原型工具中最优秀的,没有之一.无论是对于产品的理解.体验的设计,还是对 ...
- loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
- ios底部栏设计规范_设计干货:底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...
- 图像融合亮度一致_重磅干货低光图像处理方案
点击上方"AIWalker",选择加"星标"或"置顶" 重磅干货,第一时间送达 Tips:一点点提示,因内容较多建议先关注,再置顶,最 ...
- OpenCV与图像处理学习一——图像基础知识、读入、显示、保存图像、灰度转化、通道分离与合并
OpenCV与图像处理学习一--图像基础知识.读入.显示.保存图像.灰度转化.通道分离与合并 一.图像基础知识 1.1 数字图像的概念 1.2 数字图像的应用 1.3 OpenCV介绍 二.图像属性 ...
- c语言设计程序实现顺序冒泡_计算机C语言编程设计专业知识题库汇总
下列关于栈叙述正确的是(). A.算法就是程序 B.设计算法时只需要考虑数据结构的设计 C.设计算法时只需要考虑结果的可靠性 D.以上三种说法都不对 答案:D 下列叙述中正确的是(). A.有一个以上 ...
最新文章
- 专业程序员成长之路之基础基础!
- EF迁移:回滚上一次应用的迁移?
- TCP协议三次握手连接四次握手断开和DOS攻击
- 醉聊产品:产品经理如何做好测试?
- 标准程序的Parameter id 并不一定准确
- Scala分支控制 if-else 注意事项
- ASP.NET Aries JSAPI 文档说明:AR.DataGrid、AR.Dictionary
- 别光啃书了,这才是最前沿的机器学习(ML)技术路线!
- linux下怎样看设备的中断号,Linux设备驱动的中断处理
- scala学习-Linux命令行运行jar包传入main方法参数
- 公司因为薪资问题,走了一个各方面都不错的老工人,花更多的钱招来一个跨行业新手,这是为什么?
- linux下verilog功能验证,Verilog 条件语句介绍
- 地理探测器——Geodetector
- 全面解析《“十四五”国家信息化规划》
- 量子计算机基本信息单位,量子计算机.ppt
- px和毫米的换算_关于PX像素、PT点数、CM厘米、MM毫米之间的换算[转]
- 公有云与私有云优劣势调研
- 科学计算与数学建模(选择练习)
- abaqus的python安装文件在哪_python - 在ABAQUS 6.14 python环境中安装熊猫 - 堆栈内存溢出...
- php正则表达式判断三个数字相等相同|判断豹子