注:在存储图像时采用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. filter和map内置函数

    filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter()根据判断结果自动过滤掉不符合条件的元素,返回 ...

  2. LeetCode 556. 下一个更大元素 III(Next Greater Element III)

    556. 下一个更大元素 III 556. Next Greater Element III 题目描述 给定一个 32 位正整数 n,你需要找到最小的 32 位整数,其与 n 中存在的位数完全相同,并 ...

  3. WordPress实现中英文数字之间自动加空格排版

    通常来说中文与英文.中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,所以今天龙笑天下就来跟大家介绍一下WordPress如何实现中英文数字之间自 ...

  4. L2R 一:基础知识介绍

    一.背景 l2r可以说是搜索推荐里面很常用的知识了,一直处于一知半解的地步,今天开个博客准备把这些零散的东西系统性整理好,一版就粗糙点了. 二.粗概 前段时间的项目主要和搜索引擎相关,记录下搜索引擎的 ...

  5. docekr安装mysql,redis,git和maven 脚本

    编写脚本 images_install.sh #!/bin/bash # author:qiao # 安装脚本 # reids:3.2(自启) mysql:5.7(自启)或者JDK:1.8 tomca ...

  6. Python字符串格式化方式之format

    format方式是在Python3引入了一个新的字符串格式化的方法,并且随后支持了Python2.7.这个新的字符串格式化方法摆脱了%操作符并且使得字符串格式化的语法更规范了.现在时候通过调用字符串对 ...

  7. 关于梯度下降之前需要进行feature scale的记录

    先上吴恩达老师的课件图 1.对于梯度下降而言,学习率很大程度上影响了模型收敛的速度.对于不同规模的特征,如果采用相同的学习率,那么如果学习率适应于scale大的数据,scale较小的数据由于学习率过大 ...

  8. JavaTCP粘包、拆包

    import java.nio.ByteBuffer; import io.netty.bootstrap.ServerBootstrap; import io.netty.buffer.ByteBu ...

  9. windows下cuda的安装

    1. cuda的安装 到 https://developer.nvidia.com/cuda-toolkit 去下载.在安装的时候一定要自定义安装,否则将会安装很多无用的东西.安装的选项,可以选择不更 ...

  10. 笔谈I帧、P帧、B帧、PTS、DTS(一)

    做视频的播放,涉及到关键帧一说,从视频流中取出数据显示图像的时候,这些一幅幅图像之间到底有什么关联呢.那就有必要弄清楚I帧.P帧.B帧.PTS.DTS的概念,文章 I,P,B帧和PTS,DTS的关系  ...