注:在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择

一、.jpg/jpeg格式的图片(jpg全名:jpeg)

JPG(或是JPEG):

优点:

  (1)占用内存小,网页加载速度快

  (2)主要用于摄影作品或者写实作品(或者其他细节、色彩丰富的图片)或大的背景图;对多色彩表现较好,不适于文字较多的图片。根据我们在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用jpg的图片格式保存

缺点:

  jpg格式图片是有损压缩的图片,有损压缩会使原图片数据质量下降,即jpg会在压缩图片时降低图片品质。

二、PNG格式的图片

.png:

优点:

  (1)png格式图片是无损压缩的图片,能在保证最不失真的情况下尽可能压缩图像文件的大小。 

  (2)图片质量高;色彩表现好;支持透明效果;提供锋利的线条和边缘,所以做出的logo等小图标效果会更好;更好地展示文字、颜色相近的图片。

  (3)PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。

    (4)  所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片则需要采用PNG。但也会有一些特殊情况,例如有些图像尽管色彩层次丰富,但由于图片尺寸较小,上面包含的颜色数量有限时,也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次,这个时候就需要采用JPG进行存储了。主要用于小图标或颜色简单对比强烈的小的背景图。根据经验用于页面结构的基本视觉元素,如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储,这样才能更好的保证设计品质。

缺点:

  (1)占内存大,会导致网页加载速度慢;

  (2)对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。 

实践中的示例图:

原文链接:https://blog.csdn.net/qq_30541261/article/details/70154282

jpg/jpeg/png格式的区别与应用场景的更多相关文章

  1. png、jpg、gif三种图片格式的区别

    png.jpg.gif三种图片格式的区别   2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...

  2. GIF、JPEG 和 PNG的区别在哪…

    原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...

  3. [转载]GIF、JPEG 和 PNG的区别在哪里?

    原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...

  4. JPG、PNG、GIF、SVG 等格式图片区别

    1.图片 2. 前言 首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图. 位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜 ...

  5. Illustrator软件中eps和ai格式的区别

    转自Illustrator软件中eps和ai格式的区别 AI是ILL特有的格式,EPS格式是在排版领域经常使用的格式.AI中的位图图像是用链接的方式存储,EPS格式则将位图图像包含于文件中.对于含有相 ...

  6. svn和git的区别及适用场景

    svn和git的区别及适用场景 来源 https://blog.csdn.net/wz947324/article/details/80104621 svn的优势: 优异的跨平台支持,对windows ...

  7. 转载 NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景

    NoSQL | Redis.Memcache.MongoDB特点.区别以及应用场景 2017-12-12 康哥 码神联盟 本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Red ...

  8. list set map区别及适用场景

    list与Set.Map区别及适用场景   1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...

  9. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

随机推荐

  1. 在window10安装Mysql

    一:下载 1.1下载地址:https://dev.mysql.com/downloads/mysql/ 1.2解压 D:\InstallSoftWare\MYSQL 2环境变量配置    path里添 ...

  2. SQL——AND、OR运算符

    一.AND.OR运算符基本说明 AND : 所有条件成立,则筛选出这条记录. OR : 只要其中一个条件成立,则筛选出这条记录. 演示student表: 二.AND运算符使用 查询name = '小明 ...

  3. day44——索引、explain、慢查询、数据备份、锁、事务

    day44 索引介绍 为何要有索引? ​ 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还有一些复杂的查询操作 ...

  4. linux查看进程与结束进程

    查看所有进程 ps -ef ps -ef | grep 查找的进程名 结束进程 ps -ef | grep 查找的进程名 | grep -v grep | awk '{print $2}' | xar ...

  5. enum类型的标签内容根据语言的取法

    昨天做了一个开发,说要取enum里面英文label 例如  JournalType   枚举值有   transfer\profit/loss 但是在中文的AX系统时会显示“转移\盈亏”, 但是客户又 ...

  6. idea 代码热启动配置方法

    Restart Server:代码已更新重启tomcat服务器

  7. net core quartz调度 warp打包 nssm部署到windowsservice

    介绍下一款vue.js实现的基于core2.1 quartz.net调度框架,独立部署不依赖数据库,只需要实现不同业务接口,配置调度时间即可 github:https://github.com/cq- ...

  8. go 学习笔记(2)go test

    Test 的写法: 每一个test文件必须import 一个"testing" test文件下的每一个test case均必须以Test开头并且符合TestXxx形式,否则go t ...

  9. TCP协议(下)

    TCP滑动窗口 发送端 LastByteAcked:第一部分和第二部分的分界线 LastByteSent:第二部分和第三部分的分界线 LastByteAcked + AdvertisedWindow: ...

  10. navicat 连接 mysql 提示Client does not support authentication protocol requested by server错误

    安装完mysql后,命令行登录没问题,但是用Navicat连接出现提示性错误.Mysql版本为:8.0.15 命令如下: 1.use mysql; 2.alter user 'root'@'local ...