注:在存储图像时采用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. Java学习关注

    1.不去上课: 内部类的继承: https://blog.csdn.net/ruidianbaihuo/article/details/102092256 2.Matrix海 子 http://www ...

  2. c++模板使用及常见问题

    一.为什么使用模板?? 使用模板的目的是为了避免重复声明和定义一系列基本功能相同的函数或者类,其区别因传入参数的不同而产生不同类型的数据,其基本工作过程都是一致的! 二.调用模板函数产生不明确问题 ( ...

  3. 使用Python快速实现简单的人脸检测

    最近有个比较要好的朋友问我能不能从监控视频里识别到从监控跟前经过的指定的人.因为他们单位的监控室经常要花大量的人力跟时间去找某个人在哪个位置出现过的证据.听起来像是一份比较有挑战性的任务,就答应他试试 ...

  4. jwt 0.9.0(二)jwt官网资料总结

    1.JWT描述 Jwt token由Header.Payload.Signature三部分组成,这三部分之间以小数点”.”连接,JWT token长这样: eyJhbGciOiJIUzI1NiIsIn ...

  5. 一步一步手写GIS开源项目-(1)500行代码实现基础GIS展示功能

    1.开篇 大学毕业工作已经两年了,上学那会就很想研读一份开源GIS的源码,苦于自己知识和理解有限,而市面上也没有什么由浅入深讲解开源gis原理的书籍,大多都是开源项目简介以及项目的简单应用.对于初级程 ...

  6. [转]mongodb authentication 设置权限之后,新建个管理账户和一般数据库用户,在win 7 64bit 环境下测试使用实例

    如果之前安装mongodb时没有使用 --auth,那么必须要卸载MongoDB服务,进行重新安装,设置账号权限才生效! 主要是解决在测试使用mongo db 时候,总是出现的MongoAuthent ...

  7. java 单链表反转

    最近与人瞎聊,聊到各大厂的面试题,其中有一个就是用java实现单链表反转.闲来无事,决定就这个问题进行一番尝试. 1.准备链表 准备一个由DataNode组成的单向链表,DataNode如下: pub ...

  8. 【CF1095F】 Make It Connected(最小生成树)

    题目链接 如果没有特殊边的话显然答案就是权值最小的点向其他所有点连边. 所以把特殊边和权值最小的点向其他点连的边丢一起跑最小生成树就行了. #include <cstdio> #inclu ...

  9. stack + positioned

    stack 下套container, 发现最大的显示,小的都没显示, 把所有都套个POSITIONED, 都正常显示了.

  10. 使用sequelize对数据库进行增删改查

    由于本人对于命令比较执着,所以基本都是在命令下操作的,喜欢使用命令的可以使用Cmder,需要安装.配置的可以参考这篇文章: https://www.cnblogs.com/ziyoublog/p/10 ...