webp图片应用

object 2015-07-10 

<html>
<head>
<meta charset="UTF-8" />
<title>WEBP TEST</title>
<script charset="utf-8" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var testWebp = function(callback){
            var image = new Image();
            image.onerror = function() {
              callback(false);
            };
            image.onload = function() {
              callback(image.width == 1);
            };
            image.src = 'data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==';
        },webSrc = function(src){
            var suffix = src.lastIndexOf('.');
            suffix = src.substr(suffix);
            if (/png|jpg/.test(suffix)){
                return src.substr(0,(src.length-3))+'webp';
            }else{
                return src;
            }
        }
        $(function(){
            var $note = $('.note');
            testWebp(function(SUP){
                var $img = $('img[data-img]');
                if(SUP){
                    $('body').addClass('webp');
                    $img.each(function(i,o){
                        var $o = $(o),
                            src = $o.attr('data-img');
                        $o.attr('src',webSrc(src));
                    });
                    $note.html('你载入的是<strong>webp</strong>格式');
                }else{
                    $('body').addClass('nowebp');
                    $img.each(function(i,o){
                        var $o = $(o),
                            src = $o.attr('data-img');
                        $o.attr('src',src);
                    });
                    $note.html('你载入的是<strong>png、jpg</strong>格式');
                }
            });
        });
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.6 arial,\5fae\8f6f\96c5\9ed1;color:#666;}
strong{color:#000;padding:0 2px;}
img{width:313px;height:219px;}
.img{ margin-top:20px; width:313px;height:214px; }
.webp .img{ background:url(http://demo.btorange.com/article/webp/demo2.webp) no-repeat; }
.nowebp .img{ background:url(http://demo.btorange.com/article/webp/demo2.png) no-repeat; }
</style>
</head>
<body>
<p class="note"></p>
<!-- img图片 -->
<img alt="" data-img="http://demo.btorange.com/article/webp/demo1.jpg" data-pinit="registered" />
<!-- 样式中的图片 -->
<div class="img"></div>
</body>
</html>

来源于：http://blog.csdn.net/xcysuccess3/article/details/38845625

object

object

相关推荐

webp格式图片转换为jpg

# 这里url是你需要下载的图片地址

jusewe / 0评论 2020-07-04

图片格式WEBP全面解析

同事小贝恰好因为 2013 Google I/O Event 了解到了 WebP，于是我们便一起开始了没羞没躁的技术预研，期待在原创表情图片的质量与体积之间寻找最美的平衡。借此热潮，在这里把上一年的探索过程以及今年 WebP 新的发展一同分享出来，同时也期

islamabad / 0评论 2020-06-04

2018-08-02 centos6上使用ImageMagick处理webp格式图片

convert -list format #查看ImageMagick支持的格式，确认包含 webp. 因为：libwebp库需要依赖glibc的libc.so.6库，需要2.14版本以上，由于升级glibc库代价比较高，可所以建议编译安装

islamabad / 0评论 2020-06-04

前端开发者都要学习使用WebP加速你的网站

图像是网络的重要组成部分，但是，如果没有适当优化，它们可能会给用户体验带来很多挑战。自从Google将WebP作为解决此问题的方法以来，已经过去了将近十年。随着越来越多的浏览器，设备和软件支持它，Web设计人员应该积极采用它作为默认图像格式。考虑到图像对网

jusewe / 0评论 2019-12-18

判断浏览器是否支持 webp 的几种解决方法

我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很好，如下：因此我们需要

jusewe / 0评论 2019-11-17

Android应用中对webp格式图片的处理

我的环境Android Studio3.0.1gradle 3.3jdk 1.8.0_101ndk-build android-ndk-r10e-windows-x86_64. 导入Android Studio，注意Application.mk中的配置，A

mymyblog / 0评论 2019-10-25

类比于微信，如何对Apk进行极限压缩，谈下Android压缩8大步

随着项目的不断迭代，代码量跟资源文件不断增多。那么就会出现打包后的 APK 文件越来越大，如果突然有一天你们老板或领导叫你优化 APK 大小，你还不知道怎么优化那就有点说不过去了，这篇文章咱们就来一起分析并优化 APK 体积大小吧。WebP 是一种同时提

郭大路路 / 0评论 2019-10-11

webp

https://tech.upyun.com/article/252/WebP%20%E7%9A%84%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F.html https://zhuanlan.zhihu.com/p/2

jusewe / 0评论 2017-12-15

在 Node.js 中将 SVG 图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式

你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？我们将使用 Node.js 和Sharp npm 包来完成大部分繁重的工作。你可以使用下面的 npm 或 yarn 命令安装：。现在我们已经准备好开始编写一些代码并转换图像

wallowyou / 0评论 2019-09-05

ueditor处理webp图片

今天运营MM突然说，资讯管理功能用不了，从别的微信公号里复制过来的文章的图片显示不了。这个天下文章一大抄。。。先重现下问题，登录，打开新增资讯页，里面有个富文本编辑器，用的百度ueditor。随便找了篇新浪的新闻，c&p套餐操作下，咦，又能正常显示

郭大路路 / 0评论 2019-02-28

在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式

你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？我们将使用 Node.js 和Sharp npm 包来完成大部分繁重的工作。你可以使用下面的 npm 或 yarn 命令安装：。现在我们已经准备好开始编写一些代码并转换图像

zwblcz / 0评论 2019-08-21

异构计算助力客户春节webp图片编码

但Webp最大的缺点在于压缩算法计算复杂度是JPEG的10倍以上，我们迫切需要一套高性能加速方案来降低业务成本。今年春节期间大客户为了支持其抢红包业务向阿里云提出了webp转码需求。本次性能测试所使用样本为512x512的图片，所有测试都在阿里云FaaSF

islamabad / 0评论 2018-03-29

帮谷歌推广Webp图片格式之：Webp的格式转换

Webp是Google强推的新一代网络图片格式，特点就是：高质量压缩。5MB的原图，不降低效果，转换成webp格式后大小是几百KB。100KB的图，转换后是9KB。虽然目前所有主流浏览器都支持这种图片格式，但不幸的是所有主流系统如Mac、Win等都还没有默

mymyblog / 0评论 2019-07-01

webp

https://tech.upyun.com/article/252/WebP%20%E7%9A%84%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F.html https://zhuanlan.zhihu.com/p/23648

islamabad / 0评论 2017-12-15

WebP_支持：超乎你想象

WebP是Google发明的更小的替代JPEG和PNG的格式。最近有很多关于WebP支持的疑惑，细说来就是可以用它做什么，不能做什么，比如说浏览器支持，CMS支持等等。今天我想清除你所有可能的疑虑。WebP的支持程度实际上比你想的可能要好得多。Google

mymyblog / 0评论 2017-06-07

WebP

前言不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF

jusewe / 0评论 2016-07-20

PWA 时代的移动端图片优化新思路

图片通常是移动端网页中最占流量的资源。在很多类型的网站中，图片占据了网页的大部分空间。优化图片的质量和加载速度成为提高用户体验的重要途径。传统方案的弊端目前有一些被广泛应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、HTTP2、CDN等。随着移动端兴

郭大路路 / 0评论 2019-06-28

如何利用Webp和http缓存节省30%的网络流量

Webp推出那年，我刚刚考上高中。转眼间，大学毕业将近一年，我依旧是那个青葱少年！就像Webp一样，还是那么年轻，时至今日尚未崭露头角，原因是各大浏览器对它的兼容依旧不是那么的友好。IE爸爸甚至至今都没有要支持它的迹象。简单来说，Webp格式是一种图片格式

jusewe / 0评论 2019-06-27

聊一聊几种常用web图片格式：gif、jpg、png、webp

前言在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图片格式：gif、png、jpg、webp进行一个基本的

islamabad / 0评论 2019-06-26

都说 WebP 厉害，究竟厉害在哪里？

WebP 有损压缩WebP 有损压缩使用的图像编码方式与 VP8 视频编解码器 WebM 格式压缩视频关键帧的方法相同，WebP 格式的图片本质就是 WebM 文件中被压缩的帧。进行有损压缩时，WebP 会将图片划分为两个 8x8 色度像素宏块和一个 16

jusewe / 0评论 2019-06-25

WebP 的前世今生

因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情。目前，传统的图片格式如 JPEG、PNG、GIF 等格式的图片已经没有太多可以优化的空间，而 Google 推出 WebP 格式在图片压缩方面有了新的突破。

mymyblog / 0评论 2019-06-25

towebp-loader诞生记~ 一个webpack 图片loader

在上篇Vuejs webp图片支持，插件开发过程~ 中我做了一个图片转换成webp的组件，并且使用了相关的loader，但是我们在使用过程中发现webp和原图的hash是不一样的，这样我们就没有办法保留版本的概念了，临时我使用时间戳来作为替代，但是这样每次

islamabad / 0评论 2019-06-21

检查浏览器支持Webp

Webp 是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％

郭大路路 / 0评论 2019-06-21

Vuejs webp图片支持，插件开发过程~

本人已经使用vue.js半年多了，在做一些Html5页面的时候发现很多页面都是图片组成的，如果能有效的压缩图片的体积那么整个项目体积就会减少很多，这是为什么写这个简单东西的起点。Webp 百度百科上已经讲清楚在保持原画质的情况呀体积可以压缩到原来的60%这

object / 0评论 2019-06-21

网站页面优化必然趋势—WebP 图片！

依靠这个技术，可以在不修改任何 HTML/CSS 或者图片的情况下，向浏览器提供优化的图片，从而降低带宽消耗，提高页面加载速度。图片压缩率更好，文件大小更小的 WebP 格式。介绍一些当下流行工具来检测网站的真实用户体验，并定位问题所在。安装实用程序完成后

mymyblog / 0评论 2019-06-20

提升网站用户体验—WebP 图片的高效使用

一.WebP 的由来现代图像压缩技术对我们的生活方式影响很大。数码相机能将上千张高质量图片存储到一张内存卡里、智能手机可以与邻近设备快速分享高分辨率的图片、网站与手机等移动设备能快速展示各种富媒体。然而，如果图片只能以最原始的格式进行存储的话，以上所有都只

jusewe / 0评论 2019-06-20

webp是什么文件格式？.webp文件怎么打开？

webP是由谷歌推出的一种全新图片文件格式，与JPEG格式一样，WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。目前互联网的流量中有65%为图片，这意味如果Google

郭大路路 / 0评论 2015-02-04

“双十一”大促，四大招防止网站崩溃

转眼间，又到了花钱买买买的“双十一”，这一天看什么商品都是物廉价美，最主要的是，消费的心安理得，还能被夸“会生活”。交易创建峰值 32.5 万笔/秒、支付峰值 25.6 万笔/秒。这是 2017 年的“双十一”，相信今年会有更多用户参与其中。在“人人都是买

jusewe / 0评论 2018-11-13

如何节省1T图片带宽？解密极致图像压缩！

图像已经发展成人类沟通的视觉语言。无论传统互联网还是移动互联网，图像一直占据着很大部分的流量。如何在保证视觉体验的情况下减少数据流量消耗，一直是图像处理领域研究的热点。也诞生了许多种类的图像格式JPEG、PNG 、GIF、WEBP、HEVC，以及腾讯公司自

object / 0评论 2018-01-26

Android Picasso加载webp格式图片节省流量

最近产品经理一直抱怨图片加载慢，为此客户端开发这边也做了许多努力，比如重定向到CDN，使用webp减小图片大小，使用降低图片压缩质量，更换图片加载框架等等动作。现在讲一下webp格式图片这个方案。WebP格式，谷歌开发的一种旨在加快图片加载速度的图片格式。

TTHHVV / 0评论 2016-10-28

Python将图片批量从png格式转换至WebP格式

将位于/img目录下的1000张.png图片，转换成.webp格式，并存放于img_webp文件夹内。start()注意：该项目需要引用PIL库。考虑到是大量的线性密集型运算，因此使用了多线程并发。通过threading.Thread()创建线程对象时注意

liusarazhang / 0评论 2019-04-25

WebP支持：超乎你想象

WebP 是 Google 发明的更小的替代 JPEG 和 PNG 的格式。最近有很多关于 WebP 支持的疑惑，细说来就是可以用它做什么，不能做什么，比如说浏览器支持，CMS 支持等等。今天我想清除你所有可能的疑虑。WebP 的支持程度实际上比你想的

mymyblog / 0评论 2016-10-13

Opera Web Browser WebP图形信息泄露漏洞

受影响系统：Opera Software Opera Web Browser < 12.10描述：----------------------------------------------------------------------------

jimforum / 0评论 2013-01-05

Google WebP——让图片更小，让Web更快

自Google在I/O开发者大会上推出WebM网络视频标准后，Google日前又对外宣布了一种新的图片压缩格式WebP，可以让通过网络传输的图片变得更小。Google声明说，WebP格式可以让图片的大小减少39%，从而加快了页面的装载速度。WebP是Goo

islamabad / 0评论 2010-10-12