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

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

判断一个网页设计师是否优秀,可以从其在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(雪碧图)
目录
相关文章
|
C# 图形学 C++
VS Code的插件市场
VS Code的插件市场
317 1
|
机器学习/深度学习
【每日一题Day120】LC2341数组能形成多少数对 | 哈希表 排序
【每日一题Day120】LC2341数组能形成多少数对 | 哈希表 排序
81 0
|
机器学习/深度学习 人工智能 算法
阿里云的广东好友圈:与产业共进,与中国智造同行
2023年2月9日,阿里云2022年广东合作伙伴年会顺利召开。
|
NoSQL Java Go
记一次Golang内存分析——基于go pprof
## 1. 背景 阿里云Redis线上在某些任务流中使用`redis-port`来进行实例之间的数据同步。`redis-port`是一个MIT协议的开源软件,主要原理是从源实例读取RDB快照文件、解析、然后在目标实例上应用灌数据的写命令。为了限制每个进程的最大内存使用,我们使用cgroup来做隔离,最近线上出现redis-port在同步数据时`OOM`的情况,最高内存使用达到了`10G`以上
25466 0
|
11月前
|
SQL 存储 数据库
【赵渝强老师】基于Flink的流批一体架构
本文介绍了Flink如何实现流批一体的系统架构,包括数据集成、数仓架构和数据湖的流批一体方案。Flink通过统一的开发规范和SQL支持,解决了传统架构中的多套技术栈、数据链路冗余和数据口径不一致等问题,提高了开发效率和数据一致性。
529 7
|
安全 Swift iOS开发
【Swift开发专栏】Swift中的属性观察者与KVO
【4月更文挑战第30天】Swift编程语言支持属性观察者(`willSet`和`didSet`)和键值观察(KVO)来响应属性变化。属性观察者在设置前(`willSet`)和设置后(`didSet`)执行代码,可用于数据绑定。KVO是Cocoa/Cocoa Touch中的机制,需`NSObject`子类和`@objc dynamic`属性配合使用。注意在观察者销毁前移除观察,以避免内存问题。示例展示了属性观察者实现简单数据绑定。
246 1
蓝桥杯嵌入式第十一届(第二场)省赛
蓝桥杯嵌入式第十一届(第二场)省赛
304 0
|
前端开发 定位技术 API
Marzipano-3D全景图最优雅的打开方式
有时候需要开发简单的全景图,在上面打几个交互点而已,不想引入three.js这大家伙,这时你一定要用谷歌的Marzipano!
Marzipano-3D全景图最优雅的打开方式
|
存储 缓存 Memcache
memcached命令行参数说明
1、启动Memcache 常用参数 -p       设置TCP端口号(默认不设置为: 11211) -U       UDP监听端口(默认: 11211, 0 时关闭)  -l   绑定地址(默认:所有都允许,无论内外网或者本机更换IP,有安全隐患,若设置为127.
1479 0
|
网络协议 Unix 网络性能优化
两种传输层协议TCP和UDP【图解TCP/IP(笔记十二)】
两种传输层协议TCP和UDP【图解TCP/IP(笔记十二)】
320 0