注:在存储图像时采用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. 「模拟赛20191019」A 简单DP

    题目描述 给一个\(n\times m\)的网格,每个格子上有一个小写字母. 对于所有从左上角\((1,1)\)到右下角\((n,m)\)只向下或向右走的路径构成的集合,判断是否存在两条走法不同的路径 ...

  2. eNSP配置静态路由

    配置目标:如下拓扑结构,从CLIENT1去pingCLIENT2,ping通 拓扑结构 路由配置 配置各个路由表的核心思想是:只有这个路由表中有一个网段的网络号,才可以从这个路由器跳转到该网段,下面只 ...

  3. Linux 进程间通信(管道、共享内存、消息队列、信号量)

           进程通信 : 不同进程之间传播或交换信息    为什么要进程通信呢? 协同运行,项目模块化 通信原理 : 给多个进程提供一个都能访问到的缓冲区. 根据使用场景,我们能划分为以下几种通信 ...

  4. 【LEETCODE】37、122题,Best Time to Buy and Sell Stock II

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  5. SpringCloud之Zuul网关简介、映射vs过滤配置使用

    目的: Zuul路由网关简介及基本使用 Zuul路由映射配置 Zuul请求过滤配置 Zuul路由网关简介及基本使用 Zuul简介: Zuul是从设备和网站到Netflix流应用程序后端的所有请求的前门 ...

  6. VirtualBox导入OVA文件文档教程

    1 2 修改框住的路径,最好不要在C盘 3 取消检查更新 4 5 6 7 8 9 10 11 等待加载完成:加载完成后 OVA文件导入成功 作者:含笑半步颠√ 博客链接:https://www.cnb ...

  7. The Day Two 找到一个具有最大和的连续子数组,返回其最大和

    """ 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5, ...

  8. (转)项目迁移_.NET项目迁移到.NET Core操作指南

    原文地址:https://www.cnblogs.com/heyuquan/p/dotnet-migration-to-dotnetcore.html 这篇文章,汇集了大量优秀作者写的关于" ...

  9. border-radius圆角属性

    border-radius圆角 当盒子的宽高一样时,设置盒子的border-radius为50%,得到一个圆形 border-radius: 20px 30px 200px 200px; 只写一个值: ...

  10. centOS学习part7:Oracle开机自启配置

    0 上一章(http://www.cnblogs.com/souvenir/p/3884904.html)我们用了很多时间以及很长的篇幅来介绍oracle的整个安装过程,希望对大家用所帮助.oracl ...