搜索

[24759] 2016-03-07_如何解决GIF流量爆炸问题？

文档创建者：s7ckTeam
浏览次数：1
最后更新：2025-01-18
2016-03-07_如何解决GIF流量爆炸问题？ 如 何 解 决 G I F 流 量 爆 炸 问 题 ？ L i n u x 中 国   2 0 1 6 - 0 3 - 0 7 图 像 的 格 式 丰 富 多 彩 ， 既 有 使 用 最 多 的   J P E G 、 P N G   、 B M P 、 G I F ， 也 有   G o o g l e   开 发 的 适 用 于   W e b   的   W e b P ， 更 有 苹 果 推 出 的   L i v e   P h o t o 。 不 管 是   P C   端 还 是 移 动 端 ， 图 片 一 直 是 流 量 的 大 头 。 在 移 动 互 联 网 爆 发 的 读 图 时 代 ， 如 何 保 证 在 图 片 质 量 不 降 低 的 前 提 下 减 少 图 片 开 发 成 本 ， 成 为 一 个 值 得 探 索 的 事 儿 。 在 此 ， 七 牛 云 全 新 策 划 图 片 处 理 系 列 实 践 ， 探 寻 云 服 务 之 上 的 图 片 之 路 。 众 所 周 知 ， G I F   图 片 是 其 在 一 个   G I F   文 件 中 可 以 存 多 幅 彩 色 图 像 ， 把 存 于 一 个 文 件 中 的 多 幅 图 像 数 据 逐 幅 读 出 并 显 示 到 屏 幕 上 ， 就 构 成 了 一 种 最 简 单 的 动 画 。 这 些 闪 烁 的 动 图 ， 总 是 让 人 忍 不 住 多 看 两 眼 ， 最 常 见 的 如 动 态 表 情 ， 但   G I F   图 片 最 主 要 的 还 是 被 应 用 于 娱 乐 、 图 片 分 享 类 应 用 中 ， 在 七 牛 的 客 户 中 ， 堆 糖 、 橘 子 娱 乐 经 常 使 用 。 此 外 ， 为 了 吸 引 用 户 的 注 意 力 ， 醒 目 的   G I F   动 画 很 好 地 补 充 了 营 销 信 息 ， 使 得 各 媒 体 、 自 媒 体 、 企 业 营 销 在 其 上 频 频 加 码 创 意 ， 积 极 地 做 了 很 多 在 内 容 中 使 用   G I F   的 实 践 及 策 略 探 索 。 如 日 前 科 技 媒 体   T E C H 2 I P O   （ 创 见 ） 的 一 篇 名 为 《 1 5 位 机 器 人 在 完 成 任 务 时 的 有 趣 失 误 》 的 文 章 火 了 ， 该 文 主 要 讲 述 了 一 些 机 器 人 囿 于 技 术 与 环 境 做 出 的 种 种 憨 态 可 掬 的 动 作 。 除 文 字 外 ， 为 了 让 内 容 生 动 有 趣 ， 还 为 每 一 位 可 爱 的 机 器 人 配 了 动 图 （ G I F   动 图 ） 。   文 中 ， 1 5 位 机 器 人 拥 有 1 5 个 错 误 ， 也 就 使 用 了 1 5 张   G I F   进 行 表 现 ， 但 这 些 动 图 占 用 了 高 达 高 达 1 3 9 M B 的 流 量 ， 而 这 篇 文 章 的 最 终 点 击 超 过 1 0 万 次 ， 消 耗 了 9 T B 以 上 的   C D N   流 量 ， 虽 然 访 问 速 度 杠 杆 的 ， 但 却 为 此 付 出 人 民 币 3 5 0 0 元 。   G I F   图 片 大 小 相 对 于 普 通 的   J P E G 、 P N G   图 片 更 大 ， 访 问 时 也 更 耗 费 流 量 。 在 得 知   T E C H 2 I P O ／ 创 见   的 处 境 后 ， 小 七 迅 速 为 其 送 出 “ 七 牛 G I F 缩 略 图 ” 解 决 方 案 ， 以 解 燃 眉 之 急 。 据   T E C H 2 I P O ／ 创 见   统 计 ， 上 述 文 章 有 6 0 % 的 点 击 来 自 移 动 端 ， 并 且 仅 有 1 0 % 是 在 无   W i F i   的 环 境 下 进 行 阅 读 的 。 事 实 上 ， 移 动 端 主 要 以 小 屏 幕 为 主 ， 而 受 “ 移 动 端 ” 和 “ 小 屏 幕 ” 两 个 因 素 的 限 制 ， 图 片 的 缩 略 常 使 用 于 移 动 端 图 片 的 显 示 。 一 方 面 ， 移 动 端 会 消 耗   3 G   或   4 G   流 量 ， 流 量 的 节 约 非 常 重 要 ， 因 此 当 移 动 端   A p p   中 包 含 大 量   G I F   图 片 时 就 需 要 对 其 进 行 缩 略 。 另 一 方 面 ， 移 动 端 端 会 要 求 图 片 迅 速 加 载 出 来 ， 如 果   G I F   单 张 图 片 比 较 大 ， 就 会 影 响 加 载 的 速 度 和 看 图 的 效 果 ， 此 时 也 需 要 对 图 片 进 行 缩 略 处 理 。 为 此 ， 七 牛 在 图 片 缩 略 处 理 方 面 提 供   i m a g e V i e w 2   接 口 ， 由 于 移 动 端 屏 幕 众 多 ， 该 接 口 支 持 生 成 各 种 规 格 以 适 应 不 同 屏 幕 的 缩 略 图 ， 在 所 支 持 的 各 种 图 片 格 式 中 ， 便 包 含   G I F ， 此 外 还 支 持   P S D 、 J P E G 、 P N G 、 W e b P 、 T I F F 、 B M P   等 多 种 格 式 。 通 过 该 接 口 ， 可 大 大 减 少 图 片 文 件 大 小 ， 节 省 流 量 的 同 时 也 省 掉 大 半 的 流 量 费 用 。 为 了 证 明   i m a g e V i e w 2   接 口 处 理   G I F   图 片 省 流 量 省 成 本 的 可 靠 性 ， 小 七 特 意 找 来   G I F   动 图 一 张 ， 并 上 传 到 七 牛 存 储 空 间 进 行 验 证 。   以 下 为 所 找   G I F   原 图 ， 大 小 为 4 M B ：  
使 用   i m a g e V i e w 2   生 成 不 同 缩 略 图 ， 并 得 如 下 结 果 ：     使 用   i m a g e V i e w 2   接 口 不 同 的 操 作 模 式 可 生 成 不 同 缩 率 的   G I F   动 图 ， 指 定 宽 高 和 原 图 宽 高 缩 率 的 比 例 和 流 量 、 C D N   费 用 成 正 比 ， 在 不 影 响 用 户 体 验 的 前 提 下 对   G I F   动 图 进 行 不 同 程 度 的 缩 略 。 经 过 此 次 测 试 ， 小 七 所 选 择 的 本 张 图 片 缩 率 为 7 5 % 时 ， 在 手 机 端 、 P C   端 显 示 也 比 较 清 晰 。 可 见 ， T E C H 2 I P O ／ 创 见   使 用   i m a g e V i e w 2   进 行 处 理 从 而 大 大 减 少   C D N   流 量 费 用 将 不 是 问 题 。 在 此 ， 小 七 详 细 介 绍 一 下   i m a g e V i e w 2   的 接 口 的 使 用 方 法 。 i m a g e V i e w 2 接 口 规 格 如 下 ： 如 ， 指 限 定 缩 略 图 长 边 最 多 为   ， 短 边 最 多 为 ， 进 行 等 比 缩 放 ， 不 裁 剪 。 如 果 只 指 定     参 数 则 表 示 限 定 长 边 （ 短 边 自 适 应 ） ， 只 指 定     参 数 则 表 示 限 定 短 边 （ 长 边 自 适 应 ） 。 使 用 该   i m a g e V i e w 2   接 口 是 在 访 问 图 片 资 源 的 时 侯 进 行 同 步 压 缩 ， 客 户 端 访 问 到 的 资 源 就 是 被 压 缩 后 的 资 源 。 1 .   i m a g e V i e w 2 / < m o d e > / w / < L o n g E d g e > / h / < S h o r t E d g e > / f o r m a t / < F o r m a t > / i n t e r l a c e / < I n t e r l a c e > / q / < Q u a l i t y >   i m a g e V i e w 2 / 0 / w / < L o n g E d g e > / h / < S h o r t E d g e > < L o n g E d g e > < S h o r t E d g e > w h
使 用 者 将   G I F   动 态 图 片 上 传 至 七 牛 对 象 存 储 平 台 后 ， 只 需 在 该 图 片 访 问 资 源 链 接 修 改 以 上     及   参 数 即 可 获 得 缩 略 结 果 。 参 数 设 置 主 要 以 客 户 端 设 备 的 分 辨 率 大 小 有 关 ， 一 般 设 计 页 面 的 前 端 开 发 可 以 对 此 做 出 简 单 的 规 划 ， 譬 如 手 机 端 以 宽 高   3 0 0 x 3 0 0   的 大 小 ， P C   端 是   5 0 0 x 5 0 0 ， 而 通 过 不 同 的 参 数 设 置 ， 是 可 获 得 任 意 大 小 的 缩 略 图 结 果 的 。 更 多 使 用 详 情 可 点 击 “ 阅 读 原 文 阅 读 原 文 ” ， 参 考   “ 七 牛 A P I 参 考 手 册 [ 1 ] ” ， 除 本 文 所 提 到 的   G I F   缩 略 处 理 外 ， 还 包 括 图 文 混 排 水 印 、 自 定 义 裁 剪 、 旋 转 、 效 果 处 理 （ 高 斯 模 糊 ） 、 格 式 转 换 、 原 图 保 护 、 防 盗 链 等 贴 心 的 接 口 可 供 使 用 。 对 于   G I F   动 图 ， 同 样 也 能 对 其 进 行 以 上 其 它 的 图 片 处 理 操 作 。 [ 1 ] :   h t t p : / / d e v e l o p e r . q i n i u . c o m / d o c s / v 6 / a p i / r e f e r e n c e / f o p / i m a g e / i m a g e v i e w 2 . h t m l 阅 读 原 文 < L o n g E d g e > < S h o r t E d g e >
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理