记录成长
分享快乐

浅谈网站图片格式选择,助力用户体验

对于很多刚开始搭建网站并且对图片格式不太了解的朋友们来说,总是喜欢用一些体积特别大的高清图片,主要希望自己的网站前端显示的更加清晰,更加美观,但是过大的图片往往使得网站页面体积变大,站点加载速度慢等一系列问题,严重影响用户体验,那么我们在搭建网站的过程中该如何优化图片呢?下面我们就一起来了解下一些常用的网站图片格式,借此来优化自己站点的图片,以期用最小的图片达到最好的显示效果。

JPEG

JPEG 是Joint Photographic Experts Group(联合图像专家组)的缩写,是第一个国际图像压缩标准。对于RGB模式的JPEG文件一般为8位/通道,共计24位,所以这种文件又称为24位真彩色。JPEG文件采用有损压缩的方式进行压缩,可以根据需要设置不同的文件压缩比,对于一些色彩丰富,阶调层次比较高的图像来说可以达到很好的压缩效果,但是对于一些纯色快组成的图形文件来说压缩效率不是太好,会出现边缘模糊、杂色等问题。个人认为这个格式对于一些做图片壁纸网站的朋友们是个不错的选择,它能在保持图像丰富细节的基础上达到很好的压缩比,但是不要期望JPEG能把你的图片压缩到几KB甚至于几十KB,如果压缩到这么小估计你的图片细节就会相当模糊了。

GIF

GIF是Graphics Interchange Format(图像互换格式)的首字母缩写,常见的GIF图像分为静态GIF和动画GIF两种,它是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式,其压缩率一般在50%左右。GIF图像采用索引颜色模式,一般为256色,这也决定了GIF图像多半应用于色彩比较少的图片,但是GIF图片支持动画效果,如果你想为自己网站添加一些动画图片,GIF是一个不错的选择,另外GIF图片支持图像透明,但是不如PNG格式图片效果好。

PNG

 

PNG是Portable Network Graphic Format(可移植网络图形格式)的缩写,PNG图像文件采用LZ77算法的派生算法进行压缩。。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。我们在使用PhotoShop等图像处理软件另存为Web图片是,如果我们选择PNG格式,你会发现有两个选项PNG-8与PNG-24。其实这种叫法并非官方,但是却是被大家所统一接受的。

PNG-8

PNG-8使用索引颜色模式,最多色彩支持256种,类似于GIF图片,但是与GIF图片不同的是PNG图片不支持动画效果,但是却可以实现图像内容的透明效果。

PNG-24

PNG-24使用RGB颜色模式,采用8位/通道,色彩颜色丰富,有点类似于JPEG图片格式,压缩效率远不如JPEG图片,但是JPEG图片不支持图片透明效果。

好了,介绍完各图片的基本知识现在我们一起来看下各类型图片的显示效果:

需要特别说明的是,在这里为了突出JPEG的图像显示效果,我将JPEG品质调整到了最低,你可以看出它对于纯色快的图片显示效果不是很好,但是对于风景图像,即使采用了如此高的压缩比仍然能有不错的效果;而GIF与PNG-8的纯色快图片显示效果不错,单对于风景图片效果来说细节部分表现的不是很好,整幅图片有颗粒感;PNG-24虽然无论对纯色快图片还是风景图片的显示效果都不错,但是可惜的是对于风景图片的压缩要比JPEG的差些,此处对于同一幅风景图片,JPEG与PNG此时大小分别为157KB与269KB。另外,对于PNG-8与PNG-24,上面两纯色快的两幅图片大小分别为2.87KB与4.44KB哦。

赞(4) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » 浅谈网站图片格式选择,助力用户体验
分享到: 更多 (0)

评论 22

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #12

    感觉都差不多 呵呵

    fulidui   | Windows NT | Chrome 55.0.2883.87 | 1周前 (09-10)回复
  2. #11

    WebP格式应该是最好的,现在浏览器支持也不错,以后应该是大趋势,毕竟是google开发的。

    值品   | Windows 7 | Chrome 68.0.3440.106 | 2周前 (09-06)回复
    • @ 值品 WebP是挺不错的,不过目前PS不支持直接转换,也就懒得再转换了。

      蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 2周前 (09-06)回复
  3. #10

    移动端访问图片 加载很慢不知道为什么,PC正常。

    长沙亲子鉴定   | Windows 7 | Chrome 55.0.2883.87 | 4周前 (08-21)回复
  4. #9

    我比较喜欢png :lol:

    久伴博客   | Windows 7 | Chrome 65.0.3325.181 | 1个月前 (08-09)回复
  5. #8

    文章不错支持一下吧

    头条新闻   | Windows 7 | Chrome 55.0.2883.87 | 2个月前 (07-24)回复
  6. #7

    文章不错非常喜欢

    头条新闻   | Windows 7 | Chrome 55.0.2883.87 | 2个月前 (07-23)回复
  7. #6

    基本都是jpg的

    Serious   | Windows 7 | Firefox 61.0 | 2个月前 (07-15)回复
    • @ Serious 各种图片都有利弊,根据情况合理选择下比较好。JPEG对于一些纯色快的图片来说边缘杂色严重,前端显示效果不是太好。

      蝈蝈要安静     | Windows NT | Chrome 67.0.3396.99 | 2个月前 (07-16)回复
  8. #5

    WEBP格式图片。

    夏天烤洋芋   | Windows NT | Chrome 67.0.3396.99 | 2个月前 (07-15)回复
    • @ 夏天烤洋芋 发文的时候做图还是使用的PS CS6,软件没法直接转WEBP,也就没再折腾。不知道新版本的PS可以直接转换了吗。

      蝈蝈要安静     | Windows NT | Chrome 67.0.3396.99 | 2个月前 (07-16)回复
  9. #4

    我一般比较喜欢用JPG,偶尔用png

    boke112导航   | Windows 7 | Chrome 67.0.3396.99 | 2个月前 (07-14)回复
  10. #3

    文章不错非常喜欢

    今天头条   | Windows 7 | Chrome 55.0.2883.87 | 4个月前 (05-31)回复
  11. #2

    我大部分都是使用JPG,偶尔用PNG,GIF太大,很少使用

    boke112导航   | Windows 7 | Chrome 66.0.3359.181 | 4个月前 (05-18)回复
    • @ boke112导航 JPEG 的图片边缘会有杂色,对于纯色较多的图片我一般用 PNG

      蝈蝈要安静     | Windows NT | Chrome 66.0.3359.181 | 4个月前 (05-20)回复
  12. #1

    同一张图片,我用PNG比JPG大,知道怎么回事

    j20   | Windows 7 | Chrome 66.0.3359.181 | 4个月前 (05-18)回复
    • @ j20 PNG的24位真彩色比JPEG的24位真彩色要大,你选8位的试试。

      蝈蝈要安静     | Windows NT | Chrome 66.0.3359.181 | 4个月前 (05-18)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏