开发过程中怎么合理选择图片格式-阿里云开发者社区

开发者社区> 小周sir> 正文

开发过程中怎么合理选择图片格式

简介: 开发过程中怎么合理选择图片格式
+关注继续查看

判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论。事实上,或许所有人都知道图片存在GIF,JPG和PNG等格式,但并非所有人都知道它们之间的具体区别和使用技巧。

JPEG

图像专家小组是一种针对彩色照片而广泛使用的压损图形格式
介绍:栅格图形,常用文件扩展名为.jpg,也有.jpeg,.jpe,jpeg在互联网上常被应用于存储和传输照片

不适合:线条图形和文子,图标图形,因为他的压缩算法不在这些类型的图形,并且不支持透明

非常合适:颜色丰富的照片,彩色图大焦点图,通栏banner图,结构不规则的图形

PNG

便携式网络图形是一种无压缩的图形格式,支持索引,灰度,RGB,三种颜色

介绍:栅格图像,PNG最初作为代替GIF来设计的,能够显示256色,文件比JPEG大,但是PNG非常好的保留图像的质量。支持Alpha通道半透明和透明特性。最高支持24位彩色图像和8位灰度图像

不合适:由于无损存储,彩色图像体积太大,所以不合适

合适:纯色,透明。线条绘图,图标,边缘清晰,有大块相同颜色区域,颜色数较少但需要半透明

GIF

图像互换格式是一种位图形文件格式,以8位色(既256中颜色)重现真彩色的图图像,才有LZW雅俗算法进行编码

介绍:栅格图像,支持256色,仅支持完成透明和完全不透明;如果需要比较通用的动画,GIF是唯一的选择

不合适:每个像素只有8比特,不适合存储彩色图片

合适:动画,图标

webp

是一种现代图像格式,可为图像提供无压缩和有损压缩,这使得他非常灵活,有Google在购买On2 Technologies后发展出了,以BSD授权条款发布

介绍:优秀算法能同时保证一定程度上的图像质量和较小的体积,可以插入多帧,实现动画效果,可以设置透明度,采用8位压缩算法,无损的webp比png小26%,有损的webp比JPEG小25-34%,比GIF有更好的动画

不合适:最多处理256色,不适合彩色图片

合适:适用于图行和半透明图像

用工具进行图片压缩

压缩png

  • 使用node-pngquant-native
  • 跨品台,压缩比高,
  • 安装 cnpm install node-pngquant-native
  • 使用方法

    var pngquant = reuqire('node-pngquant-native')
    var fs = require('fs')
    fa.readFile('图片地址',function(err,buffer) {
        if(err) throw err
        var resBuffer = pngquant.option({}).compress(buffer)
        fs.writeFile('输出图片名称',resBuffer,{
            flags:'wb'
        },function(err){})
    })

压缩jpg

  • 使用jpegtran
  • 跨品台,有linux,mac,windows的解决方案
  • 安装 cnpm i jpegtran -g
  • 使用方法

    jpegtran -copy none -optimize -outfile 压缩之后图片 in 要压缩图片

    ### 压缩gif

  • Gifsicle 通过改变每帧的比例,减少gif文件大小,同时可以有使用透明来达到更小文件大小,
  • 使用方式

    • 优化级别设置不小于2,1的话基本不压缩,gifsicle --optimize=3 -o out.gif in.gif
    • 将透明部分截取gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

响应式图片

  • javascript绑定事件监测窗口大小
  • CSS媒体查询

    @media screen and (max-width:640px) {
        my_images{width:640px}
    }
    • img标签属性
    <img srcset="img-320w.jpg,img-640w.jpg 2x,img-960.jpg 3x" src="img-960w.jpg" ></img>
    x描述符表示图像的设备像素比

    逐步加载图片

    • 使用LQIP
  • 低质量图像占位符
  • 安装 cnpm install lqip
    使用方法

     const lqip = require('lqip')
     
     const file = './1_govern66.jpg'
     lqip.base64(file).then(res => {
         console.log(res);
     })
     
     lqip.palette(file).then(res => {
         console.log(res);
     })
    • 通过运行node 会把图片的base64位打印出来,

    在这里插入图片描述

  • 使用SQIP
  • 基于SVG的图像占位符

    • 安装cnpm install sqip
    • 使用方法
 javascript
    const sqip = require('sqip')
    
    const result = sqip({
        filename: './1_govern66.jpg',
        numberOfPrimitives: 10
    })
    console.log(result.final_svg);
  • 通过运行node打印的结果是把图片转换成SVG的格式

在这里插入图片描述

代替图片

  • 使用Data URI代替图片
  • web Font代替图片
  • 采用Image spritinh(雪碧图)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js验证图片格式
1.采用硬编码的写法: function checkForm(){ var filepath = document.getElementById("imagepath").
585 0
今日推荐:10款在 Web 开发中很有用的占位图片服务
  设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的。然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局。   如今,有免费的占位图片自动生成工具可以使用,而不是手动创建这些占位符图像,可以节省我们的时间。
837 0
利用 LibWebP-NET 解码与编码 WebP 格式图片
原文:利用 LibWebP-NET 解码与编码 WebP 格式图片 WebP 格式是谷歌开发并发展的一种最新的网络图片格式,具有压缩率高、解码快、免版权、开源等优点。 大部分先进的网页浏览器、图片浏览器都支持该格式,Windows用户可以通过安装 WebP Codec for Windows 在系统中查阅WebP图片。
1601 0
Android高仿微信图片选择功能的PhotoPicker
原文:Android高仿微信图片选择功能的PhotoPicker   类似于微信修改头像的功能基本上每个app都会有,以前公司开发的项目就有修改头像的功能,但是用的Android系统自带的图片选择器。用Android系统的图片选择器有个好处就是稳定,不会有什么问题。
871 0
详细介绍Mysql各种存储引擎的特性以及如何选择存储引擎
最近业务上有要求,要实现类似oracle 的dblink         linux版本 Server version: 5.6.28-0ubuntu0.14.04.1 (Ubuntu) 修改配置文件 /etc/mysql/my.cnf windows 版本  Server version: 5.6.21-log MySQL Community Server (GPL) 修
1847 0
【PHP】PHP转换图片为ico格式源码
Class Controller if ( $error['text'] == "" && isset($_FILES['upimage']['tmp_name']) && $_FILES['upimage']['tmp_name'] && is_uplo...
963 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载