[html] 你有使用过webp的图片格式吗?

[html] 你有使用过webp的图片格式吗?

webp格式的优势和兼容处理
优势更优的图像数据压缩算法 带来更小的图片体积肉眼识别无差异的图片质量支持有损和无损压缩支持动画 透明色彩丰富 24-bit颜色数兼容性处理
1.通过picture标签进行选择判断<picture><source srcset="img/pic.webp" type="image/webp"><source srcset="img/pic.jpg" type="image/jpeg"><img src="img/pic.jpg">
</picture>该种方法要求在每个要请求webp图片的标签下都要通过picture标签来进行兼容性处理,
同时注意该标签在IE的兼容性并不是很好,不过已经比webp的兼容性好一些。
2.通过服务端判断请求头中的Accept的值判断是否支持webp通过HTTP request header中是否存在Accept: image/webp来判断,
这种方法的缺点在于:很多时候我们的图片等静态资源都会放到CDN服务器上,在这个层面加上判断webp的逻辑会更麻烦一些
3.由浏览器端判断是否支持WebP格式if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){//  该浏览器支持WebP格式的图片}该种方法的原理为:HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。1.如果画布的高度或宽度是0,那么会返回字符串“data:,”。2.如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。3.Chrome支持“image/webp”类型。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/410304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取iOS设备当前ip地址

第一种方法是用系统api的方式获取&#xff0c;如下 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/ioctl.h> #include <sys/types.h> #include <sys/…

html日期选择框_第十课 日期选择框(datepicker)的操作

有客户问&#xff1a;datepicker是怎么操作的&#xff1f;我答&#xff1a;datepicker可以直接用"输入文本"组件。客户说&#xff1a;不是&#xff0c;现在我操作的这个网页上datepicker是不能直接输入的&#xff0c;否则就直接用“输入文本”组件搞定&#xff0c;很…

E-triples II_2019牛客暑期多校训练营(第四场)

求用n个3的倍数的数按位或出数字a的方案数有多少种&#xff08;0也算3的倍数&#xff09; 题解 若数b的每个二进制位上的1&#xff0c;在a中也为1&#xff0c;则称b为a的子集容易知道任意个a的子集按位或出来的结果还是a的子集若问题改为按位或出来的结果是a的子集的方案数&…

[html] 网页打印与标准纸张换算时,cm和px是如何换算的?

[html] 网页打印与标准纸张换算时&#xff0c;cm和px是如何换算的&#xff1f; (function(){// 创建一个1cm宽的元素插入到页面&#xff0c;然后坐等出结果let div document.createElement("div");div.id "cm";div.style.width "1cm";docume…

杭电 1233 最小生成树 kruskal()算法

一道最小生成树的水题&#xff0c;用kruskal&#xff08;&#xff09;可以轻松解决。。。。。。题目&#xff1a; 还是畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 10378 Accepted Submission(s):…

SRTE测试

网络拓扑&#xff1a; XRV1 hostname XRV1explicit-path name SRTE index 10 next-address strict ipv4 unicast 10.10.2.2 index 20 next-address strict ipv4 unicast 10.10.3.2 index 30 next-address strict ipv4 unicast 10.10.4.1 index 40 next-address strict ipv4 un…

java笔记:自己动手写javaEE框架(七)--使用JSON和Ajax技术

今天我要将json和ajax引入到我所写的框架&#xff0c;不过今天用到的技术有部分不是我框架最终使用到的技术&#xff0c;比如ajax技术&#xff0c;我用到的是最为原始的ajax技术&#xff0c;这次算是对老技术的回顾&#xff0c;不过不管技术如何演进&#xff0c;对技术的本质的…

[html] pre与xmp标签有什么区别?

[html] pre与xmp标签有什么区别&#xff1f; xmp的标签&#xff0c;会复把抱在内部的html片段当作字符串输出&#xff08;此标签已废弃&#xff09; <pre></pre> 标签&#xff0c;可以在保留原来文本格式的基础制上让文本在页面上显示出来 <pre> 标签中的特…

系统分析师成长之路

去年拿到软件设计师证书后&#xff0c;查了下高级认证中系统分析师&#xff0c;原来发现自己目前工作内容更像系统分析师&#xff08;与用户调研、明确需求内容、熟悉企业数据模型、安排开发人员设计程序、牵头日常维护工作、团队人员管理&#xff09;。去年底马上下决定趁热打…

python 收发邮件_python发送各类邮件的主要基本方法

利用python实现基本的邮件发送。 感谢以下博客的整理&#xff0c;本人在学习的同时也做了一些整理 一、相关模块介绍 发送邮件主要用到了smtplib和email两个模块&#xff0c;这里首先就两个模块进行一下简单的介绍&#xff1a; 1、smtplib模块 smtplib.SMTP([host[, port[, loc…

[html] websocket握手阶段是通过什么协议传输的?

[html] websocket握手阶段是通过什么协议传输的&#xff1f; HTTP个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

区分Activity的四种加载模式

在多Activity开发中&#xff0c;有可能是自己应用之间的Activity跳转&#xff0c;或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例&#xff0c;而不是产生大量重复的Activity。 这需要为Activity配置特定的加载模式&#xff0c;而不是使用默认的加载模…

laravel常用响应操作

转载于:https://www.cnblogs.com/saintdingspage/p/11298246.html

[html] 说说你对Media Source Extensions(MSE)的理解,它解决了什么问题呢?

[html] 说说你对Media Source Extensions(MSE)的理解&#xff0c;它解决了什么问题呢&#xff1f; Media Source Extensions 允许JavaScript动态地为<audio>和<video>创建媒体流&#xff0c;而不再只能是引用一个视频文件的url。这样就极大地丰富了前端对音视频的…

教学思路SQL之入门习题《学生成绩》 二、基础单表查询

根据查询要求&#xff0c;写出SQL脚本&#xff1a; 1、 查询学生信息表&#xff0c;查找学生的姓名&#xff0c;性别&#xff0c;并将查询结果按姓名进行排序。 2、查询学生信息表&#xff0c;查找地区在大连的学生&#xff0c;显示其姓名&#xff0c;联系电话&#xff0c;地…

python中mat函数_python matplotlib中的subplot函数使用详解

python里面的matplotlib.pylot是大家比较常用的&#xff0c;功能也还不错的一个包。基本框架比较简单&#xff0c;但是做一个功能完善且比较好看整洁的图&#xff0c;免不了要网上查找一些函数。于是&#xff0c;为了节省时间&#xff0c;可以一劳永逸。我把常用函数作了一个总…

pytorch资料

torchvision是独立于pytorch的关于图像操作的一些方便工具库。 torchvision的详细介绍在&#xff1a;https://pypi.org/project/torchvision/ torchvision主要包括一下几个包&#xff1a; vision.datasets : 几个常用视觉数据集&#xff0c;可以下载和加载&#xff0c;这里主要…

[html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的

[html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的 在线的情况下&#xff0c;浏览器发现html头部有manifest属性&#xff0c;它会请求manifest文件&#xff0c;如果是第一次访问app&#xff0c;那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。…

常用技术面试题

java面试题 http://blog.csdn.net/uiop_7890_7890转载于:https://www.cnblogs.com/ajian005/archive/2011/11/02/2753780.html

if else if else语句格式_你还在用if/else吗?

你还在用if/else吗&#xff1f;前提我们在日常开发当中经常会遇到复杂的条件判断&#xff0c;一般的做法是用if/else&#xff0c;或者优雅一点的写法是用switch语句来实现多个条件的判断&#xff0c;这样的话会有很多问题&#xff0c;随着判断条件的增加&#xff0c;代码中if/e…