常用图片格式JPG\PNG\SVG该如何选择?
背景:
相信大家开发的时候都接触到不少图片的格式,常见的有JPG、PNG、SVG、WEBP、GIF等,今天我们来聊一聊常使用的JPG、PNG、SVG。不同图片格式的出现是有需求,有原因的,有着各自的特点和使用场景,而作为前端切图,选择图片的格式尤为重要,因为我们需要对不同的业务场景,选择出不同图片格式所展示出来的效果。因此我们需要“对症下药”。
一、JPG
JPG也被称为“有损压缩”。为什么呢?因为JPG格式采用的压缩算法是允许我们通过丢失图像质量来创建更小的图形。当压缩图像时某些图像信息会丢失,从而过度压缩时会导致图像的文本、颜色、线条等可能会出现模糊现象。
优点:
1. 文件大小最小; 2. 最适合高品质照片; 3. 兼容网络和任何设备;
缺点:
1. 压缩太多,图像质量会大大降低 2. JPG 不支持透明背景
JPG 的适用的地方
JPG 最适合非移动照片和其他不需要透明背景的文件,像一些拥有大量自然色彩的照片和图像。例如下图:
过度压缩后出现有损的JPG
二、PNG
上面说到的JPG提供的是一种“有损格式”,而PNG提供的恰好就是JPG相对的“无损格式”,也就是当我们去保存或者压缩的时候,不会因为“压缩算法”丢失图像的信息。
优点:
1. 能够拥有透明背景,以便在彩色背景上分层图像 2. 可以压缩而不会损失与 JPG 一样多的质量
缺点:
1. 文件大小往往比 JPG 大 2. 不支持动画
PNG的适用的地方
PNG文件提供了alpha透明度,这意味着您可以拥有完全透明的图像区域,甚至可以使用一系列alpha透明度。意思就是当我们遇到透明背景、有阴影的图像时,PNG最适用,而JPG不支持透明图。例如下图:
三、SVG
SVG我们也可以称为“矢量”图形,矢量的也就是图像的放大缩小都不会失真,图像大小可以任意渲染,但不会增加文件的大小,SVG也常用于图标icon,线条表格、图形等。SVG可以支持开发人员去定制,更改颜色大小,DOM操作等。
优点:
1. 无限大小(矢量)而不会降低质量2. 开发人员的灵活性(可以更改设置,包括颜色和大小)3. 可以在矢量程序中进行编辑,例如AIS4. 可以动画5. 支持DOM操作
缺点:
1. 图像质量和文件大小与颜色数量有关。图像中的颜色越多,图像越清晰,但文件越大。图像中的颜色越少,图像越有颗粒感,但文件大小越小。2. 我们只能使用 256 色的图像。
SVG适用的地方
像我们常见的ICON图标类,图表类,需要CSS来控制动画,任意改变大小不失真。最经典的就是我们使用的iconfont图标库中的图标:
又或者类似谷歌的logo
总结:
1.当有需要透明图,阴影图时选择PNG;
2.当不需要透明图,且拥有大量自然色彩时选择JPG;
3.当使用ICON,矢量图,线条图,表格图,也就是只要能用PS绘制出来的使用SVG。
常用图片格式JPG\PNG\SVG该如何选择?相关推荐
- gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈(二)...
IT客栈 作者:大腰子 bmp.jpg.png.gif.svg常用图片格式 之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
- 前端开发中常用图片格式
前端开发中常用图片格式 在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
- 常用图片格式必须了解
常用图片格式汇总及区别 首先说一说为什么要学习图片格式呢,因为身为一个前端开发的程序员,或者你是一个全栈开发的工程师,那么你就会接触的网页,那么网页中会有很多,**图片**,那么问题来了,这些图片有不 ...
- 常用图片格式介绍(了解
常用图片格式 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1.psd photoshop的专 ...
- 怎么转换常用图片格式,jpg格式怎么转换
图片的格式是分很多种的,我们最常用的图片格式大概就是jpg.png.bmp,但是可能由于各种需要需要转换格式,比如我们在上传自己的×××件的时候,可能会有专门允许的格式,那这个时候就需要将照片转换成需 ...
- Photoshop常用图片格式
图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1.psd psd是photoshop的专用格 ...
- 每日一学(六)常用图片格式及比较
本文介绍和比较几种常见图片文件格式的优缺点,并介绍不同的文件格式对应用程序性能的影响. 有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种. 有 ...
- photoshop支持的常用图片格式及其介绍
PSD(*.PSD) PSD格式是Adobe Photoshop软件自身的格式,这种格式可以存储Photoshop中所有的图层,通道.参考线.注解和颜色模式等信息.在保存图像时,若图像中包含有层,则一 ...
- 常用图片格式支持的深度,通道,压缩情况
在介绍图片格式之前首先普及一下图片的基本知识: 彩色图像:每个像素由R.G.B三个分量表示,每个通道取值范围0~255.数据类型一般为8位无符号整形. 灰度图像:每个像素只有一个采样颜色的图像,这类图 ...
最新文章
- MyBatisPlus的ActiveRecord实现CRUD
- 利剑无意之Dubbo 面试题
- request download - 两个队列的研究
- 运动基元_开发人员的新分布式基元
- springboot整合activiti报错[processes/]不存在解决方案
- hive报错:Call from hostname/127.0.1.1 to localhost:9000 failed on connection exception.主节点9000端口拒绝访问.
- 史诗巨作[关云长][高清BD-RMVB/992M][国语/中文字幕]
- 阿里,百度,腾讯等一线互联网公司中,Java开发的招聘标准
- pert计算公式期望值_信息系统项目管理师计算题详解:PERT(计划评审技术)计算...
- 6、halcon+串口通讯测试
- C语言中返回的0和1
- MVC实现局部视图刷新
- 解读手机相机的各个参数(长曝光)
- 遥感影像内部“白点”去除技巧
- Java计算机毕业设计腾讯网游辅助小助手源码+系统+数据库+lw文档
- Integer、new Integer()和int的区分与比较
- STM32 四轴无人机的设计——基于HCSR04超声波模块的距离检测与警报设计
- 计算机在医学应用中的不足,计算机在医学中的应用
- BootStrap 统计分析 浅析
- php js特效代码如何用,Javascript实现吸顶特效(代码示例)
热门文章
- 手游人类一败涂地联机一直连接服务器,人类一败涂地手游怎么联机
- MEM/MBA英语基础(08)复合句-状语从句
- (附源码)spring boot工作计划管理软件 毕业设计181638
- python练习之CheckiO-HOME小岛
- Transformer课程 第7课Gavin大咖 BERT文本分类-BERT Fine-Tuning
- 浅谈知识表示之语义网络、RDF和OWL
- Windows如何安装WSL(中途退出后遇到bug该怎么办)
- SQL分析在2020年度第一季度的购买人数,销售金额,客单价,客单件人均购买频次(时间函数、分组汇总、常用指标计算)
- 电脑连接手机Termux后保持在后台运行
- Python之——获取电脑连接过的所有wifi名称和密码