搜索

[25590] 2016-10-12_WebP支持：超乎你想象

文档创建者：s7ckTeam
浏览次数：1
最后更新：2025-01-19
2016-10-12_WebP支持：超乎你想象 W e b P   支 持 ： 超 乎 你 想 象 译 者 ： 文 蔺   L i n u x 中 国   2 0 1 6 - 1 0 - 1 2 编 译 自 ： h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / w e b p - s u p p o r t /   作 者 ：   B r i a n   J a c k s o n 转 载 自 ：   h t t p : / / w w w . w e m l i o n . c o m / 2 0 1 6 / w e b p - s u p p o r t /   译 者 ：   文 蔺 本 文 导 航 - W e b P   浏 览 器 支 持 - C h r o m e   W e b P - O p e r a   W e b P - F i r e F o x   W e b P - I n t e r n e t   E x p l o r e r   W e b P - S a f a r i   W e b P - 你 该 使 用   W e b P   吗 ? - 1 .   浏 览 器 市 场 份 额 - 2 .   G o o g l e   A n a l y t i c s - 3 .   W e b P   文 件 体 积 - C M S   W e b P   支 持 - W o r d P r e s s   W e b P - J o o m l a   W e b P - M a g e n t o   W e b P - 其 他 平 台 上 的   W e b P - 小 结 - 相 关 文 章 W e b P   是   G o o g l e   发 明 的 更 小 的 替 代   J P E G   和   P N G   的 格 式 。 最 近 有 很 多 关 于   W e b P   支 持 的 疑 惑 ， 细 说 来 就 是 可 以 用 它 做 什 么 ， 不 能 做 什 么 ， 比 如 说 浏 览 器 支 持 ， C M S   支 持 等 等 。 今 天 我 想 清 除 你 所 有 可 能 的 疑 虑 。 W e b P   的 支 持 程 度 实 际 上 比 你 想 的 可 能 要 好 得 多 。 w e b p   s u p p o r t W e b P   浏 览 器 支 持 浏 览 器 支 持 并 非 所 有 浏 览 器 都 支 持   W e b P ， 所 以 很 重 要 的 是 你 得 清 楚 哪 些 浏 览 器 是 支 持 的 ， 这 可 能 会 影 响 你 做 决 定 ， 是 否 在 你 的 网 站 或 项 目 中 转 换 并 采 用   W e b P   图 片 [ 1 ] 。 下 面 是 所 有 主 流 浏 览 器 及 其   W e b P 支 持 程 度 [ 2 ] 。
截 至   2 0 1 6   年   7   月 ， 全 球 浏 览 器 对   W e b P   支 持 率 是   6 9 . 6 %   –   c a n i u s e . c o m C h r o m e   W e b P G o o g l e   C h r o m e   官 方 自   C h r o m e   2 3   起 开 始 支 持   W e b P ） （ 最 初 发 布 于   2 0 1 2   年   1 1   月 ） ， 自   C h r o m e   9   起 部 分 支 持 。 部 分 支 持 指 的 是 并 不 支 持 无 损 的 、 支 持   a l p h a   通 道 的   W e b P 。 G o o g l e   的 安 卓 浏 览 器 从   4 . 2   版 本 起 开 始 官 方 支 持   W e b P （ 最 初 发 布 于   2 0 1 2   年   1 1   月 ） ， 4   版 本 起 开 始 部 分 支 持 。 G o o g l e C h r o m e   安 卓 版 从   C h r o m e   5 0   起 开 始 支 持   W e b p 。 O p e r a   W e b P O p e r a   官 方 自   O p e r a   1 2 . 1   开 始 支 持   W e b P （ 最 初 发 布 于   2 0 1 2   年   1 1   月 ） ， 自   O p e r a   1 1 . 5   起 部 分 支 持 。 部 分 支 持 指 的 是 并 不 支 持 无 损 的 、 支 持   a l p h a   通 道 的   W e b P 。 O p e r a   m i n i   浏 览 器 当 前 所 有 版 本 都 官 方 支 持   W e b P 。 F i r e F o x   W e b P F i r e f o x   当 前 不 支 持   W e b P 。 M o z i l l a   论 坛 的   b u g   8 5 6 3 7 5 [ 3 ]   正 在 讨 论 此 事 。 I n t e r n e t   E x p l o r e r   W e b P I n t e r n e t   E x p l o r e r   和 他 们 新 的   E d g e   浏 览 器 ， 都 不 支 持 W e b P 。 而 且 目 前 并 无 添 加 支 持 的 任 何 打 算 [ 4 ] 。 不 过 ， 已 有 用 户 发 声 讨 论 [ 5 ] ， 人 们 要 求 微 软 将   W e b p   支 持 加 入   E d g e 。 S a f a r i   W e b P A p p l e   的   S a f a r i   浏 览 器 及 其   i O S   S a f a r i   浏 览 器 都 不 支 持 W e b P 。 不 过 ， 最 近   H T M L 5 t e s t   有 条 推 文 说 我 们 有 望 在   i O S   1 0   看 到 S a f a r i 支 持   W e b P [ 6 ] 。 i O S   1 0   目 前 处 于   b e t a   测 试 阶 段 ， 所 以 时 间 会 说 明 一 切 。 你 该 使 用 你 该 使 用   W e b P   吗 吗 ? 因 为 全 球   W e b P   支 持 度 在   7 0 %   左 右 浮 动 ， 使 用 这 种 图 片 格 式 来 替 代   P N G   和   J P E G   是 极 有 意 义 的 。 还 有 重 要 的 一 点 要 提 到 ， 无 论 如 何 实 现   W e b P ， 你 只 是 为 支 持 的 浏 览 器 提 供   W e b P   服 务 ， 而 为 其 他 浏 览 器 提 供   P N G   和   J P E G 。 使 用   W e b P   并 不 会 破 坏 你 的 图 片 。 把 这 当 做 增 值 ， 而 非 改 变 。 还 有 另 外 一 些 东 西 需 要 考 虑 ， 如 浏 览 器 市 场 份 额 ， 当 前 流 量 ， W e b P   相 对 于   P N G   和 J P E G   的 文 件 体 积 。 1 .   浏 览 器 市 场 份 额 浏 览 器 市 场 份 额 决 定 是 否 使 用   W e b P   的 时 候 ， 记 得 看 下 浏 览 器 市 场 份 额 ， 因 为   C h r o m e   和   O p e r a   支 持   W e b P ， 所 以 有 必 要 看 下 他 们 的 占 比 。 我 们 从 一 些 不 同 来 源 收 集 了 一 些 统 计 数 据 ， 它 们 都 有 自 己 不 同 的 数 据 收 集 方 式 ：
S t a t C o u n t e r   浏 览 器 市 场 份 额 S t a t C o u n t e r [ 7 ]   截 至   2 0 1 6   年   6   月 的 数 据 显 示 ， C h r o m e   占 有 市 场 份 额 为   5 8 %   的 ， F i r e f o x   以 大 约   1 6 %   排 名 第 二 。 浏 览 器 市 场 份 额   s t a t c o u n t e r W 3 C o u n t e r   浏 览 器 市 场 份 额 W 3 C o u n t e r [ 8 ]   截 至   2 0 1 6   年   6   月 的 数 据 显 示 ， C h r o m e   占 有 约   5 7 %   的 市 场 比 例 ， S a f a r i   以 约   1 4 %   跻 身 第 二 。 浏 览 器 市 场 份 额   w 3 c o u n t e r W 3 S c h o o l s   浏 览 器 市 场 份 额 W 3 S c h o o l s [ 9 ]   截 至   2 0 1 6   年   5   月 的 数 据 显 示 ， C h r o m e   占 有 约   7 1 %   的 市 场 份 额 ， F i r e f o x   以 约   1 7 %   居 于 其 后 。
浏 览 器 市 场 份 额   w 3 s c h o o l s C l i c k y   浏 览 器 市 场 份 额 C l i c k y [ 1 0 ]   截 至   2 0 1 6   年   7   月 的 数 据 显 示 ， C h r o m e   占 有 约   5 0 %   的 市 场 份 额 ， F i r e f o x   以 约   1 8 %   位 居 第 二 。 c l i c k y   b r o w s e r   m a r k e t   s h a r e 从 上 面 的 数 据 可 以 看 到 ， C h r o m e   平 均 占 有 约   5 9 %   的 市 场 份 额 ， 所 以 必 须 意 识 到 ， 如 果 在 项 目 中 加 入   W e b p   图 片 ， 大 多 数 访 客 都 会 看 到   W e b P   版 本 。 O p e r a   仅 拥 有 市 场 份 额 的 一 小 部 分 ， 但 它 们 的 用 户 也 可 以 看 到 。 2 .   G o o g l e   A n a l y t i c s 尽 管 浏 览 器 市 场 份 额 对 大 多 数 人 来 说 可 能 倾 向 于   C h r o m e ， 并 不 意 味 着 你 的 网 站 / 项 目 也 是 如 此 。 确 认 数 据 总 是 很 重 要 的 。 做 起 来 很 容 易 ， 点 击   G o o g l e   A n a l y t i c s   的   “ 浏 览 器 与 操 作 系 统 ” （ “ B r o w s e r   &   O S ” ） 部 分 就 能 看 到 。 在 下 面 的 例 子 中 ， 可 以 看 到 将 近   7 0 %   的 流 量 来 自   C h r o m e 。 在 这 种 情 况 下 ， W e b P   是 很 有 利 的 ， 这 意 味 着   7 0 %   的 访 客 会 看 到 更 小 体 积 的 文 件 。
b r o w s e r   g o o g l e   a n a l y t i c s 还 有 ， 别 忘 了 移 动 端 ！ 可 以 在   G o o g l e   A n a l y t i c s   的 “ 设 备 ” （ “ D e v i c e s ” ） 部 分 看 到 。 如 你 所 见 ， 大 部 分 流 量 来 自 苹 果 设 备 。 所 以 如 果   i O S   1 0   完 全 支 持   W e b P   的 话 会 颇 有 意 思 ， 这 样 一 来 会 大 量 的 移 动 端 流 量 将 会 有 戏 剧 性 的 不 同 。
g o o g l e   a n a l y t i c s   m o b i l e 3 .   W e b P   文 件 体 积 文 件 体 积 已 经 有 大 量 研 究 比 较 了   W e b P   与   P N G 、 J P E G   的 文 件 体 积 。 一 定 要 去 看 看 它 们 。 J P G   转   W e b P   –   压 缩 大 小 比 较 [ 1 1 ] W e b P   平 均 减 小 了   8 5 . 8 7 %   的 文 件 提 交 。 加 载 时 间 降 低 了   1 1 % ， 页 面 整 体 大 小 减 少 了   2 9 % 。 P N G   转   W e b P   –   压 缩 大 小 比 较 [ 1 2 ] W e b P   平 均 减 小 了 4 2 . 8 %   的 文 件 提 交 。 加 载 时 间 降 低 了   3 % ， 页 面 整 体 大 小 减 少 了   2 5 % 。 W o r d P r e s s   缓 存 开 启 下 的   W e b P 案 例 研 究 [ 1 3 ] 还 需 要 考 虑 c o s t - b e n e f i t   r a t i o 成 本 效 益 比 。 对   W o r d P r e s s   这 样 的   C M S   来 说 ， 现 在 有 两 种 图 片 ， 一 个 是   J P E G   或   P N G ， 还 有 一 个   W e b P 。 因 此 使 用   W e b P   会 占 用 服 务 器 更 多 的 硬 盘 空 间 。 但 事 实 是 ， 更 小 体 积 的 图 片 带 来 的 是 更 快 的 加 载 时 间 。 不 应 忽 略 节 省 下 来 的 流 量 ： 取 决 于 不 同 项 目 ， 积 累 下 来 的 数 量 相 当 可 观 。 其 他 人 正 在 使 用   W e b P ， 虽 然 你 可 能 没 注 意 到 。 D o l l a r   S h a v e   C l u b   可 以 将 其   A p p   的 大 小 由   2 3 0   M B   减 少 到   3 0   M B ！ 结 果 就 是 ， 使 用   W e b P   格 式 将 体 积 减 少 了 七 倍 [ 1 4 ] 。
w e b p   i m a g e   s a v i n g s C M S   W e b P   支 持 支 持 接 着 平 台 支 持 的 问 题 就 来 了 ， 不 管 你 是 使 用   W o r d P r e s s   或   J o o m l a   这 样   的   C M S ， 或 者 仅 仅 是 像   L a r a v e l   这 样 的   P H P   框 架 搭 建 的 简 单 的 静 态 站 点 。 下 面 我 们 将 会 介 绍 一 点 关 于 如 何 在 在 不 同 平 台 上 支 持   W e b p   图 片 的 内 容 。 W o r d P r e s s   W e b P 事 实 上 ， W o r d P r e s s   很 容 易 实 现   W e b P   支 持 。 你 可 以 使 用 我 们 的 集 成 图 片 优 化 ( I m a g e   O p t i m i z e r ) [ 1 5 ]   插 件 ， 在 将 图 片 上 传 至 W o r d P r e s s   媒 体 库 时 候 自 动 转 换 为   W e b P   格 式 。 o p t i m u s   w e b p   f i l e s
然 后 你 可 以 使 用 免 费 的   W o r d P r e s s   C a c h e   E n a b l e r [ 1 6 ]   插 件 来 为 访 客 提 供   W e b P   图 片 。 w e b p   s u p p o r t   c a c h i n g 重 点 是 ， C a c h e   E n a b l e r   做 的 其 实 是 判 断 浏 览 器 支 持 ， 为 支 持 的 浏 览 器 提 供   W e b P ， 而 为 其 他 浏 览 器 提 供   J P E G   或   P N G 。 它 实 际 上 已 经 自 动 为 你 做 好 了 切 换 工 作 。 J o o m l a   W e b P Y i r e o   的 免 费 的   W e b P   J o o m l a   扩 展 [ 1 7 ] ， 允 许 在 浏 览 器 支 持 的 情 况 下 启 用   W e b P   支 持 。 其 侦 测 浏 览 器 对   W e b P   的 支 持 ， 基 于 u s e r - a g e n t   简 单 检 测 （ 这 样 就 能 正 确 匹 配   C h r o m e ） 以 及 额 外 的   J a v a S c r i p t   检 测 。 如 若 检 测 到 支 持   W e b P ， 扩 展 会 解 析 输 出 的 H T M L ， 确 保 那 些 支 持 图 片 （ p n g ， j p g ， j p e g ） 的 链 接 被   W e b p   图 片 替 换 掉 。 M a g e n t o   W e b P Y i r e o   的 免 费 的   W e b P   M a g e n t o   扩 展 [ 1 8 ] ， 允 许 在 浏 览 器 支 持 的 情 况 下 启 用   W e b P   支 持 。 其 侦 测 浏 览 器 对   W e b P   的 支 持 ， 基 于 u s e r - a g e n t   简 单 检 测 （ C h r o m e ） 以 及 额 外 的   J a v a S c r i p t   检 测 （ 这 样 也 能 够 匹 配 其 他 浏 览 器 ） 。 如 若 检 测 到 支 持   W e b P ， 扩 展 会 解 析   H T M L   输 出 ， 确 保 那 些 支 持 图 片 （ p n g ， j p g ， j p e g ） 的 链 接 被   W e b p   图 片 替 换 掉 。 其 他 平 台 上 的 其 他 平 台 上 的   W e b P 对 于 其 他 平 台 ， 你 应 该 去 看 看 我 们 的 这 篇 如 何 提 供   W e b P   ( h o w   t o   d e l i v e r   W e b P ) [ 1 9 ] 。 某 些 平 台 启 用   W e b P   支 持 ， 可 能 需 要 修 改 你 的     文 件 或 者   N g i n x   配 置 。 小 结 小 结 如 你 所 见 ， W e b P   的 支 持 程 度 可 能 比 你 最 初 想 的 要 好 得 多 。 当 然 应 该 讲 浏 览 器 市 场 份 额 以 及 当 前 的 浏 览 数 据 纳 入 考 虑 中 。 比 方 说 ， 如 果   7 0 %   以 上 的 流 量 都 来 自   C h r o m e ， 那 使 用   W e b P   来 加 速 网 站 意 义 重 大 。 如 果 你 在 使 用   C M S ， 一 切 都 很 简 单 ， 因 为 有 很 多 插 件 来 帮 你 完 成   W e b P   的 转 换 。 相 关 文 章 相 关 文 章 H o w   t o   U s e   W o r d P r e s s   R e t i n a   a n d   W e b P   I m a g e s [ 2 0 ] C o n v e r t   t o   W e b P   F o r m a t   –   T h e   S u c c e s s o r   o f   J P E G [ 2 1 ] 编 译 自 ： h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / w e b p - s u p p o r t /   . h t a c c e s s
作 者 ：   B r i a n   J a c k s o n 转 载 自 ：   h t t p : / / w w w . w e m l i o n . c o m / 2 0 1 6 / w e b p - s u p p o r t /   译 者 ：   文 蔺 [ 1 ] :   h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / c o n f i g u r a t i o n - t o - d e l i v e r - w e b p / [ 2 ] :   h t t p : / / c a n i u s e . c o m / # f e a t = w e b p [ 3 ] :   h t t p s : / / b u g z i l l a . m o z i l l a . o r g / s h o w _ b u g . c g i ? i d = 8 5 6 3 7 5 [ 4 ] :   h t t p s : / / d e v e l o p e r . m i c r o s o f t . c o m / e n - u s / m i c r o s o f t - e d g e / p l a t f o r m / s t a t u s / w e b p i m a g e f o r m a t s u p p o r t ? f i l t e r = f 3 f 0 0 0 0 b f & s e a r c h = w e b p [ 5 ] :   h t t p s : / / w p d e v . u s e r v o i c e . c o m / f o r u m s / 2 5 7 8 5 4 - m i c r o s o f t - e d g e - d e v e l o p e r / s u g g e s t i o n s / 6 5 0 8 4 1 7 - w e b p - i m a g e - f o r m a t - s u p p o r t [ 6 ] :   h t t p s : / / t w i t t e r . c o m / h t m l 5 t e s t / s t a t u s / 7 5 2 4 3 4 4 5 4 0 6 1 3 2 2 2 4 0 [ 7 ] :   h t t p : / / g s . s t a t c o u n t e r . c o m / # b r o w s e r - w w - m o n t h l y - 2 0 1 5 0 6 - 2 0 1 6 0 6 [ 8 ] :   h t t p s : / / w w w . w 3 c o u n t e r . c o m / g l o b a l s t a t s . p h p [ 9 ] :   h t t p : / / w w w . w 3 s c h o o l s . c o m / b r o w s e r s / b r o w s e r s _ s t a t s . a s p [ 1 0 ] :   h t t p s : / / c l i c k y . c o m / m a r k e t s h a r e / g l o b a l / w e b - b r o w s e r s / [ 1 1 ] :   h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / j p g - t o - w e b p / [ 1 2 ] :   h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / p n g - t o - w e b p / [ 1 3 ] :   h t t p s : / / w w w . k e y c d n . c o m / b l o g / w o r d p r e s s - c a c h e - e n a b l e r / [ 1 4 ] :   h t t p : / / e n g i n e e r i n g . d o l l a r s h a v e c l u b . c o m / s h a v i n g - o u r - i m a g e - s i z e / [ 1 5 ] :   h t t p s : / / w o r d p r e s s . o r g / p l u g i n s / o p t i m u s / [ 1 6 ] :   h t t p s : / / w o r d p r e s s . o r g / p l u g i n s / c a c h e - e n a b l e r / [ 1 7 ] :   h t t p s : / / w w w . y i r e o . c o m / s o f t w a r e / j o o m l a - e x t e n s i o n s / w e b p [ 1 8 ] :   h t t p s : / / w w w . y i r e o . c o m / s o f t w a r e / m a g e n t o - e x t e n s i o n s / w e b p [ 1 9 ] :   h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / c o n f i g u r a t i o n - t o - d e l i v e r - w e b p / [ 2 0 ] :   h t t p s : / / o p t i m u s . k e y c d n . c o m / s u p p o r t / w o r d p r e s s - r e t i n a / [ 2 1 ] :   h t t p s : / / w w w . k e y c d n . c o m / b l o g / c o n v e r t - t o - w e b p - t h e - s u c c e s s o r - o f - j p e g / 推 荐 文 章 推 荐 文 章 滑 动 查 看 更 多 输 入 文 章   I D   或 长 按 二 维 码 直 达 阅 读 原 文
回复

举报

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

本版积分规则

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

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