jpg/jpeg/png格式的区别与应用场景
注:在存储图像时采用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格式的区别与应用场景的更多相关文章
- png、jpg、gif三种图片格式的区别
png.jpg.gif三种图片格式的区别 2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...
- GIF、JPEG 和 PNG的区别在哪…
原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...
- [转载]GIF、JPEG 和 PNG的区别在哪里?
原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...
- JPG、PNG、GIF、SVG 等格式图片区别
1.图片 2. 前言 首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图. 位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜 ...
- Illustrator软件中eps和ai格式的区别
转自Illustrator软件中eps和ai格式的区别 AI是ILL特有的格式,EPS格式是在排版领域经常使用的格式.AI中的位图图像是用链接的方式存储,EPS格式则将位图图像包含于文件中.对于含有相 ...
- svn和git的区别及适用场景
svn和git的区别及适用场景 来源 https://blog.csdn.net/wz947324/article/details/80104621 svn的优势: 优异的跨平台支持,对windows ...
- 转载 NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景
NoSQL | Redis.Memcache.MongoDB特点.区别以及应用场景 2017-12-12 康哥 码神联盟 本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Red ...
- list set map区别及适用场景
list与Set.Map区别及适用场景 1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
随机推荐
- Nginx反向代理+负载均衡简单实现(手动申请https证书,申请免费https证书,http强转https)
背景:A服务器(192.168.1.8)作为nginx代理服务器B服务器(192.168.1.150)作为后端真实服务器 现在需要访问https://testwww.huanqiu.com请求时从A服 ...
- [转]NGINX-检测客户端是通过电脑还是移动设备访问的,将请求重定向到适配的WEB站点
原文地址:https://blog.51cto.com/10978134/2163757 检测客户端是通过电脑还是移动设备访问的,将请求重定向到适配的WEB站点 此配置方法由Detect Mobile ...
- #安装memcache
安装memcache sudo apt-get install memcached sudo apt search php-memcache sudo apt-get install php-memc ...
- shell分享
shell脚本分享 一.介绍shell Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序, ...
- LOJ2482 CEOI2017 Mousetrap 二分答案、树形DP
传送门 表示想不到二分答案qwq 将树看作以陷阱为根.先考虑陷阱和起始点相邻的情况,此时老鼠一定会往下走,而如果管理者此时不做操作,那么一定会选择让操作次数变得最大的一棵子树.设\(f_i\)表示当前 ...
- java并发编程之原子操作
先来看一段简单的代码,稍微有点并发知识的都可以知道打印出结果必然是一个小于20000的值 package com.example.test.cas; import java.io.IOExceptio ...
- 5_PHP数组_3_数组处理函数及其应用_1_快速创建数组的函数
以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 一.快速创建数组的函数 1. range() 函数 程序: <?php $numbers = range(1 ...
- ES6- - Map与Set
Map和Set 是 ES6 中新增的一种数据结构.Map为类似于Object的键值对结构,Set为成员唯一的类数组结构.以Map为例介绍两种数据结构的遍历方法.for...of var map = n ...
- 一分钟读懂低功耗蓝牙(BLE)连接数据包
一分钟读懂低功耗蓝牙(BLE)连接数据包 1.概述 BLE 连接过程中有三个重要的数据包:SCAN_REQ, SCAN_RSP 和 CONNECT_REQ. SCAN_REQ: 扫描请求,由主设备(M ...
- c#测量字体宽度
Bitmap image_size = * count, f.Height);//初始化大小 Graphics size_g = Graphics.FromImage(image_size); Siz ...