WEB开发常用的图片格式

简介: <h2><span style="word-wrap:break-word; margin:0px; padding:0px">1.JPEG</span></h2>       JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小。反之,低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 %的原始图像的像素数据,所

1.JPEG

      JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小。反之,低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 %的原始图像的像素数据,所以它不被认为是一种无损图像格式。

用途:
      由于这种极其敏感的平衡特性,JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片(照片)场合。反之,JPEG格式图片并不适合做简单色彩(色调少)的图片,比如LOGO,各种小图标(ICONS)。

2.GIF

    GIF格式,是为使图片能够应用在在线(online)应用程序上所特别开发的图片格式。Gif,有时也被成为“Giff”,是一种无损,8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指,所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真)。

用途:

    由于8位颜色深度的限制,Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合:
* Logo
* 小图标(Icon) 
* 用于布局的图片(例如某个布局角落,边框等等)
* 仅包含不超过256种色彩的简单,小型图片场合 

透明特性:

    GIF支持基本的透明特性,这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时,我们就可以看到通过这些不可见区域看到此图片后面的背景颜色(图片)。此特性非常有用:如果你需要将某个gif图片的内容置于所有图片的上层,你可以将其设置为透明。

压缩特性:

    GIF格式采用LZW算法进行压缩,此算法是Unisys申请的一项专利。在很久很久之前,如果你想使用GIF格式,那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是,此项专利技术已于2003年6月20日过期,我们现在可以免费的使用GIF了!

隔行扫描:

    GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。

动画GIF:

     一个动态的GIF文件,是由若干帧图片所联结而成的动态图片。在显示时,这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果,而过度的使用则会使网页杂乱无章。

3.PNG

    PNG,读“ping”,初始时被作为GIF的免费替代格式所开发,采用公共专利压缩算法。PNG格式也是一种无损压缩,但与GIF格式不同的是,PNG同时支持8位和24位的图像。

8位PNG图像:

     一个8位PNG图片,支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外,此8位PNG格式与GIF格式极其相似;

用途:

     8位PNG图片的用途与GIF格式基本相同,
* Logo
* 小图标(Icon) 
* 用于布局的图片(例如某个布局角落,边框等等)
* 仅包含不超过256种色彩的简单,小型图片场合 

24位PNG图像:

    24位PNG,支持160万种不同的像素颜色且支持Alpha透明效果,这就意味着,无论透明度设置为多少,PNG图片均能够与背景很好的融合在一起。

对PNG的支持:

    由于PNG格式的广泛使用和开发者更加重视网页的WEB标准,不同浏览器对PNG的支持就显得相当重要了。不过,幸运的是,目前市场上主流的浏览器对PNG格式都有很好的支持,这包括:IE*, Firefox, Safari, Opera, and Konqueror。
* 但不幸的是,IE6及IE6以下的浏览器对PNG透明背景的支持并不好。不过我们仍可以通过其他方法来解决这个问题,详情请查看如何在IE6中正常显示透明PNG。
相关文章
|
存储 算法 Android开发
聊一聊几种常用web图片格式:gif、jpg、png、webp
在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一个基本的总结。
|
Web App开发 存储 算法
聊一聊几种常用web图片格式:gif、jpg、png、webp
在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一个基本的总结。
3297 0
Web上的支持的图片格式以及它们之间的区别
一、GIF(图形交换格式)   GIF格式的图片最多只能保存256中颜色,该格式支持透明色,支持动画效果。 二、JPEG(联合图像专家组)   JPEG格式不支持透明色及动画,颜色可达1670种。
1008 0
|
3月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
300 4
|
7月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
7月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。
|
7月前
|
JSON 开发框架 自然语言处理
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
本文主要介绍了应用开发中的三大核心内容:生命周期管理、资源限定与访问以及多语言支持。在生命周期部分,详细说明了应用和页面的生命周期函数及其触发时机,帮助开发者更好地掌控应用状态变化。资源限定与访问章节,则聚焦于资源限定词的定义、命名规则及匹配逻辑,并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后,多语言支持部分讲解了如何通过 JSON 文件定义多语言资源,使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化,为全球化应用提供便利。
282 104
|
7月前
|
JavaScript 前端开发 API
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
本文介绍了HarmonyOS应用开发中的HML、CSS和JS语法。HML作为标记语言,支持数据绑定、事件处理、列表渲染等功能;CSS用于样式定义,涵盖尺寸单位、样式导入、选择器及伪类等特性;JS实现业务逻辑,包括ES6语法支持、对象属性、数据方法及事件处理。通过具体代码示例,详细解析了页面构建与交互的实现方式,为开发者提供全面的技术指导。
297 104
|
7月前
|
开发框架 编解码 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(一)
该文档详细介绍了一个兼容JS的类Web开发范式的方舟开发框架,涵盖概述、文件组织、js标签配置及app.js等内容。框架采用HML、CSS、JavaScript三段式开发方式,支持单向数据绑定,适合中小型应用开发。文件组织部分说明了目录结构、访问规则和媒体文件格式;js标签配置包括实例名称、页面路由和窗口样式信息;app.js则描述了应用生命周期与对象管理。整体内容旨在帮助开发者快速构建基于方舟框架的应用程序。
302 102