美文网首页
常用图片格式

常用图片格式

作者: Devops海洋的渔夫 | 来源:发表于2019-02-07 14:45 被阅读45次

仅供学习,转载请注明出处

常用图片格式

图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

1、psd

photoshop的专用格式。
优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。
缺点:应用范围窄,图片容量相对比较大。

2、jpg

网页制作及日常使用最普遍的图像格式。
优点:图像压缩效率高,图像容量相对最小。
缺点:有损压缩,图像会丢失数据而失真,不支持透明背景,不能制作成动画。

0022.jpg

3、gif

制作网页小动画的常用图像格式。
优点:无损压缩,图像容量小、可以制作成动画、支持透明背景。
缺点:图像色彩范围最多只有256色,不能保存色彩丰富的图像,不支持半透明,透明图像边缘有锯齿。

good.gif

4、png

网页制作及日常使用比较普遍的图像格式。
优点:无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
缺点:不能制作成动画

004-01.png

5、webp

将要取代jpg的图像格式。
优点:同jpg格式,容量相对比jpg还要小。
缺点:同jpg格式,目前不支持所有的浏览器。


位图和矢量图

位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿。

svg

目前首选的网页矢量图格式。
优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
缺点:色彩不够丰富。

flash

退出历史的重量级网页矢量图格式。
优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
缺点:不支持搜索引擎、运行慢、浏览器需要装插件才可支持。

总结

在网页制作中,如何选择合适的图片格式呢?

  • 1、使用大幅面图片时,如果要使用不透明背景的图片,就使用jpg图片;如果要使用透明或者半透明背景的图片,就使用png图片;
  • 2、使用小幅面图片或者图标图片时,如果图片含多种颜色,可以使用gif或png图片;如果图片是单色,而且要求有很好的显示效果,可以使用svg;如果是图片时动画的,可以使用gif。

2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

相关文章

  • Html、Css

    总结 常用标签 常用属性 选择器 盒子、浮动、定位等 常用图片格式

  • 前端性能分析与优化--图片资源

    常见图片格式 详见:聊一聊几种常用web图片格式:gif、jpg、png、webp[https://segment...

  • 来聊聊WebP的原理

    前言 前端常用的图片格式:JPG、PNG、GIF、WEBP、APNG等等。 主要图片格式背景以及信息 JPEG(J...

  • 常用的一些正则表达式

    常用类型 验证是否为图片格式 验证是否为颜色

  • iOS 常用图片格式判断 (Swift)

    常用的图片格式有一下几种。 PNG JPEG GIF WebP 是 Google 制造的一个图片格式,针对网络上快...

  • 常用图片格式

    仅供学习,转载请注明出处 常用图片格式 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了...

  • 前端图片优化策略

    1. 前端常用图片格式 2. 文件特点概述 2.1 JPEG jpeg图片格式的设计目标,是在不影响人类可分辨的图...

  • 『90』过JPG格式人生

    JPG,又称JPEG,Joint Photographic Experts Group的缩写,我们最常用的图片格式...

  • iOS图片处理小结

    我们常用的图片格式可以分为bmp,jpg,png,gif,webp,其中bmp常用语安卓端开发,iOS常用的是jp...

  • 网页

    聊一聊几种常用web图片格式:gif、jpg、png、webp[https://segmentfault.com/...

网友评论

      本文标题:常用图片格式

      本文链接:https://www.haomeiwen.com/subject/bbxisqtx.html