WebP 简介： WebP 是由 Google 开发的一种现代图像格式，旨在提供更小的文件大小和更高的图像质量。它采用了有损和无损压缩技术，同时支持透明度和动画。...透明度和动画： 与 PNG 和 GIF 格式相比，WebP 支持更高质量的透明图像和更紧凑的动画格式，为网页设计师提供更多创作自由。...Apple iOS Safari（iPhone 和 iPad）： Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit.../605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1 iOS 14 及更高版本的 Safari 原生支持 WebP。...like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36 Android 4.0 及更高版本的 Chrome 原生支持 WebP。
但是 GIF 的缺点也很明显，透明背景的 GIF 无法做到像素的绝对平滑过度，于是乎我们可以看到带透明的 GIF 图周围杂边非常明显，如下： image.png 通常解决这种问题是在外面加上一圈白色的描边...，这样在白色背景下可以掩盖杂边问题，但是在深色背景下依然无解： image.png APNG 完美的解决了这个问题。...而 Web 上，Firfox 和 Safari 是支持 APNG 的，不过 Chrome 不支持。...Chrome 支持自己的亲儿子 WebP，不支持 APNG，而苹果支持 APNG，不支持 WebP，真是好任性，可以一人让一步都支持吗？...另外，Line 的的动态贴图，还有 iOS 10 iMessage 中的各种动态表情也都是使用 APNG 的，看来前途还是光明的嘛。
webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状，浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定...是目前web网页中十分常用的一种动画文件格式。...； 劣势： - 兼容性不太好, 只有opera,和chrome支持; apng 简单来讲apng格式图片使用多个单张png连接起来的动画图片格式，支持全透明通道动画。...到14位色值区域 支持有损压缩 可以添加更多的元数据编码 支持动画 相近画质前提下比webp更小 性能： 根据mozilla的研究，bpg使用的HEVC编码比原生的HEVC性能更好，因为BPG的头部比...否则图片字符串会变得很长很长 合并图片sprite 场景：任何用到页面图片的场景 原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用 优势：可以有效的较少请求个数，而且，而不影响开发体验
webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状，浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定...是目前web网页中十分常用的一种动画文件格式。...,但是缺点是你压缩的时候需要的时间更久了； 劣势： - 兼容性不太好, 只有opera,和chrome支持; apng 简单来讲apng格式图片使用多个单张png连接起来的动画图片格式...到14位色值区域 支持有损压缩 可以添加更多的元数据编码 支持动画 相近画质前提下比webp更小 性能： 根据mozilla的研究，bpg使用的HEVC编码比原生的HEVC...否则图片字符串会变得很长很长 合并图片sprite 场景：任何用到页面图片的场景 原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用 优势：可以有效的较少请求个数，而且，而不影响开发体验
设计师：Tubik 一家关于生态住宅公司的网站，目的是利用太阳能打造可持续发展的住宅。用户可从一个选项卡切换到另一个选项卡，并且可以在不同的时间和环境中查看对应的房屋，了解其优势。...动画对于Hero image的整体设计来讲非常重要，相比平面静止的landing page设计，动画型设计更能展示其动态性和与用户的互动性，会给用户提供更大的视觉享受。 4. ...设计师：Tubik 这是一个主要向孩子们售卖书籍的电子商务网站的Hero image页面。以黑色为背景，充满童趣的插画以及带有一个订阅邮件的按钮，巨大的标题显得格外耀眼。...苹果倾向于使用“chromeless”图像，这些图像不是全屏，也没有边框，背景清晰。要么固定在适当位置，要么浮动在页面上的某个特定位置。背景往往是白色的，对比突出黑色的标题文本。 2. ...Fivefootsix的官网展示页面，全屏的背景人像，白色显眼的标语置于最中心的位置，高端大气。 5. Caledonbuild ?
兼容性根据caniuse[2]的数据，除Safari外，Chrome、Firefox、Opera等主流浏览器均已实现对AVIF的支持。...值得一提的是，iOS虽然不支持AVIF，但是在实际业务场景中，只要客户端能够自行解析AVIF，在iOS上也是可以显示的。具体参考iOS AVIF support[3]。...相比之下WebP兼容性更好，覆盖了几乎所有的主流浏览器；而苹果推出的HEIF则兼容性很差，甚至在Safari（iOS）也不能得到支持。...而对于字体图片，则是WEBP更有优势。压缩耗时对于大尺寸的图片，很多压缩算法可能存在图片转换耗时较高的情况。但在我们的业务场景中，大部分用户走的是CDN缓存，并不需要重新转换和压缩。...因此我们需要更换一套新方案来落地：1）使用腾讯云数据工作流-图片处理功能，一次性将cos桶中存量图片批量转换成avif和webp2）工作流监听cos桶新增或变更情况，将新图片实时生成avif和webp。
目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：chrome/safari真机调试 和 spy-debugger调试。 1....Chrome手机模拟器 Chrome手机模拟器适合简单移动网页调试，支持模拟触摸事件，还能够模拟各种移动设备的user-agent和屏幕大小，是移动端web开发的主要调试方式。...V1_AND_SQ_7.0.0_676_YYB_D PA QQ/7.0.0.3135 NetType/4G WebP/0.3.0 Pixel/1080 QQ iOS： Mozilla/5.0...高级 -> 勾选"在菜单栏中显示开发" iPhone 设置：设置 -> Safari -> 高级 -> 打开 Web 检查器 通过手机的 Safari 来打开 H5 页面，然后将Mac上的Safari浏览器打开...3. spy-debugger调试 然而，很多场景下Chrome/Safari的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 chrome/safari 中打开，因此不能直接使用浏览器真机调试工具
Chrome手机模拟器 2. Chrome/Safari真机调试 2.1 Android + chrome 2.2 iOS + Safari 3. spy-debugger调试 4....目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：chrome/safari真机调试 和 spy-debugger调试。 1....V1_AND_SQ_7.0.0_676_YYB_D PA QQ/7.0.0.3135 NetType/4G WebP/0.3.0 Pixel/1080 QQ iOS： Mozilla/5.0...高级 -> 勾选"在菜单栏中显示开发" iPhone 设置：设置 -> Safari -> 高级 -> 打开 Web 检查器 通过手机的 Safari 来打开 H5 页面，然后将Mac上的Safari浏览器打开...3. spy-debugger调试 然而，很多场景下Chrome/Safari的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 chrome/safari 中打开，因此不能直接使用浏览器真机调试工具
开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。...灰色(#767676)与白色背景的对比度为4.5:1，而绿色(#36a829)与白色的对比度为3:1。...暗黑配色方案 在Safari和Firefox的预发布版中，我们都有prefers-color-scheme媒体查询，它允许用户选择查看可能具有黑色主题的页面。...实现这一点是一个选择好的颜色与良好的对比度的问题。在我的示例中，我将表单重置为接近黑色(#101010)，文本重置为白色。...，; 在IE11, Edge, Firefox, Chrome, Safari运行良好。
下面的示例演示了带有标签导航的状态管理。每个标签视图都有一个自定义的过渡动画，并且进入时有一个微妙的不同动画，而标签本身依赖于默认的页面过渡。...在这里，如果--background自定义属性设置为黑色，则会应用某些样式——在这种情况下，使标题和段落文本颜色变为白色。...背景滤镜 背景滤镜（Backdrop Filter）最早在 Safari 9.0 中引入，它提供了一种对特定元素后面的内容应用图形效果的方法。...你可以在这个演示中查看背景滤镜的可能性。使用下拉菜单切换滤镜。...这意味着管理 iOS、iPadOS 或 macOS 设备的学校和企业现在可以在其管理中包含 Safari 应用扩展、内容拦截器和 Web 扩展的配置。
谷歌和 Mozilla 马上紧急修复了各自浏览器（分别是 Chrome 和 Firefox）中的漏洞。...之前提交中的描述是： 116.0.5845.176 版本之前的谷歌 Chrome 中，Webp 的堆缓冲区溢出漏洞允许远程攻击者在精心设计的 HTML 页面中执行越界内存写入。...2 看似无害的工具，却造成了惊人的影响和冲击范围 2010 年谷歌无意间留下的这个 bug，很可能是引发本次 iOS 零日漏洞的根本原因，并跨越 13 年精确击中了 iPhone 14。...过去 12 年间，Android 和 Chrome 都默认捆绑 Webp，2 年前开始 Mac/iOS/Safari 也将其纳入自身，更不用说其他各种浏览器了。...现在，我们能做的就是更新所有软件。从现在开始，认真检查自动更新有没有开启。苹果已经发布了 Mac 和 iOS 端的重要更新，Chrome 也是一样。预计后续会有更多供应商快速跟进。
消息称，iOS 14将会使用一种被苹果内部称为“Clips”的API。 “Clips”允许开发人员向用户提供应用程序中交互式的动态内容（在用户尚未安装该应用程序的情况下）。...假设用户扫描的二维码带有指向YouTube视频的链接，但是该用户并没有在iPhone上安装YouTube官方应用程序，那么只要通过 “Clips”，用户便能够扫描该二维码，并在本地用户界面而不是Safari...事实上，即使是Chrome也很难同时支持网络应用、iOS和Android，而我们最不需要的就是Android和iOS也同样加速脱离Web标准。...Safari不支持WebP或VP9之类的开放标准，苹果也在尽力禁用硬件解码器支持的类型。...目前并不确定Clips的应用范围（iOS 14构建了QR码），但如果它被用在搜索结果或Siri中，也不足为奇。但Siri的功能因此被延伸的同时，也存在着很大的安全隐患就是了。
Mozilla 自己的 Firefox 首先支持了 APNG，随后苹果的 Safari 也开始有了支持， Chrome 目前也已经尝试开始支持 ，可以说未来前景很好。...它支持有损和无损压缩、支持完整的透明通道、也支持多帧动画，并且没有版权问题，是一种非常理想的图片格式。借由 Google 在网络世界的影响力，WebP 在几年的时间内已经得到了广泛的应用。...对于动图来说，开发者可以解码动画 GIF 和 APNG、可以编码动画 GIF。...2012 年 libwebp v0.2 的时候，Google 才开始尝试支持动画，但其实现有很多问题，性能也非常差，以至于 Chrome 团队一直都没有接受。...直到 2013 年，libwebp v0.4 时，动画格式才稳定下来才被 Chrome 所接受。
预计在年底，苹果就会发布第一款带有苹果芯片的Mac，届时macOS就能支持本机iOS应用程序和macOS应用程序了，但预计过渡可能会需要两年时间，毕竟新版基于英特尔处理器的Mac仍在生产中。...这也是Safari变化最大的一次系统更新，苹果表示浏览器加载网站的速度比Chrome还要快50％，对电池也会保持友好。...除此之外，新的Safari还具有可自定义的起始页，用户可以自行设置背景图片和显示内容，还支持浏览器内置的自动翻译，七种语言无障碍阅读世界消息。...虽然具有不同大小的小部件在你现在的手机上也能通过“今日”（Today）访问，但是在iOS14中，小部件能够添加到主屏幕，和应用程序一起生活。...iOS14上还有更多的功能更新，比如CarPlay正在获得对自定义壁纸和新应用类别的支持，新的睡眠模式可以在打开请勿打扰模式后调低手机屏幕亮度，用户终于可以自行设置电子邮件和浏览器的选项了，Safari
常见的图片格式 图片格式 压缩方式 动画 适应浏览器 JPG 有损 不支持 所有 PNG 无损 不支持 所有 GIF 无损 支持 所有 APNG 无损 支持 firefox、safari WebP 有损.../无损 支持 chrome、opera APNG，作为想取代gif的新格式，他比我们常用的gif更为优秀。...WebP，是由谷歌推出的图片格式，想让其作为web中专用的图片格式。与jpg作对比，WebP有对透明的支持，以及完全不亚于JPG的压缩率。而与PNG对比，WebP更小，加载更快。...不过一般来说，我们用gif都是由于其对动画的友好支持，在APNG兼容性十分不友好的情况下，如果仅仅想引入一个动图的话，gif是目前很好的选择。...当选择了杂边为无的时候，所有的半透明转换为了不透明，也就产生了锯齿。那如何解决这些锯齿呢？ 刚刚将四周白色，变为无的杂边的选项，其实就是ps对于锯齿的一个解决方法。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。...Chrome 和 Safari 需要前缀 -webkit-。...中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。...和 Chrome */ -o-animation: myfirst 5s; /* Opera */ } 注释：您必须定义动画的名称和时长。...： div { animation-timing-function:2s; -webkit-animation-timing-function:2s;/* Safari 和 Chrome
" content="black-translucent" /> content 参数： default ：状态栏背景是白色。...5、 移动端手机号码识别（IOS） 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字...在IOS safari下，大概为300毫秒。这就是延迟的由来。...，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select...解决页面闪白 保证动画流畅 设计高性能CSS3动画的几个要素 尽可能地使用合成属性transform和opacity来设计CSS3动画， 不使用position的left和top来定位 利用translate3D
1).id和class选择器 id选择器必须现在标签中的定义，然后在在头部标签的style标签中用“#”来表示： Css应用 和 Chrome */ -o-transform:rotate(1deg); /* Opera */ } 它包含了所有的2D方法和3D方法，并且可以单个设置每一种的方法的x,y轴转向值，比如...: width 1s; /* Safari 和 Chrome */ -o-transition: width 1s; /* Opera */ } transition-property:应用过渡的Css...:30px; /* Safari 和 Chrome */ column-gap:30px; } 规定列之间30像素的间隔 3)).列规则 div { -moz-column-rule:1px dotted...div { columns:10px 3; -moz-columns:10px 3; /* Firefox */ -webkit-columns:10px 3; /* Safari 和 Chrome
WPJAM Basic 上个版本针对阿里云 OSS，新增了将图片转换成 WebP 格式的功能，该功能可以让 CDN 流量直接减半了，不过非常可惜的是，苹果的 Safari 浏览器 14 版本之前不支持...最近苹果升级了 iOS 14，也带来了全新的 Safari 14 浏览器，其中最重大的升级就是支持 WebP 格式的图片了，所以我也更新了一下 WPJAM Basic 4.5 版本，让 CDN 功能中的...WebP 图片也能在 Safari 14 浏览器上显示。...总之如果你网站的图片 CDN 流量很大的话，建议尽快开启 WebP 的支持，这个真的是省钱的好东西。...开启也非常简单，只要安装 WPJAM Basic 插件之后，如上图，在 「WPJAM」菜单下点击「CDN 加速」子菜单的「图片设置」中勾选 WebP 格式即可。
可插入多帧，从而实现动画效果。 可设置透明色以产生对象浮现于背景之上的效果。 缺点 由于采用了 8 位压缩，最多只能处理 256 种颜色，故不宜应用于真彩色(文末的附录有解释)图片。...适合场景 JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。...这是我 2019 年 5 月截的图，可以看到 IE 和 Safari 所有的版本都是不支持的(这是硬伤)， 火狐也是最新的几个版本才开始支持，年轻有年轻的代价。...使用场景 **WebP **集多种图片文件格式的优点于一身，所以基本上适合各种场景，但是由于兼容性不好，所以我们如果大规模的适用 WebP，一定要在 Safari 和 IE 里面施行降级。 ?...这是淘宝商品图片是我在 Chrome 打开的例子，可以看到图片的后缀是 .jpg_.webp，如果这张图片在 Safari 打开后缀就变为了 .jpg，这是一种降级方案，其他的方案请读者自行研究，不在本文讨论中
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
