[HTML 5 Performance] Optimize Cross-browser Images with webp and the 'picture' Element
HTML The and with 39 Element performance
2023-09-14 08:59:14 时间
"Legacy" image formats like jpg and png are often 2-3x larger than "next-gen" image formats like webp. In this video, we'll see how to convert our images using the cwebp
utility, as well as how to use the <picture>
HTML element to set fallbacks, for browsers that don't support the webp format.
Installation instructions:
- For MacOS, you can use homebrew:
brew install webp
- For Windows and Linux, you'll need to download the appropriate precompiled utility from their downloads page
Run:
cwebp -q 70 cat.jpg -o cat.webp
HTML: with jpg fallback
<picture> <source srcset="cat.webp" type="image/webp" /> <img src="cat.jpg" class="cat-photo" alt="A cat hunting a toy bird" /> </picture> <picture> <source srcset="me.webp" type="image/webp" /> <img src="me.png" class="me" alt="3D Josh" /> </picture>
相关文章
- 安卓 android studio 报错 The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle
- HTML meta标签总结与属性使用介绍
- 【异常】[ERROR] The cloud assistant is not installed on the ECS, or the cloud assistant is unavailable. cloudassistant is uninstall
- C#实现vb6和html都可以调用的ActiveX,
- 自定义的html radio button的样式
- SQL SERVER 2005删除维护作业报错:The DELETE statement conflicted with the REFERENCE constraint "FK_subplan_job_id"
- 第六十四节,html文档布局元素
- [HTML 5] Inserting DOM as String template insertAdjacentHTML
- 解决The type or namespace name 'XXXX' does not exist in the namespace 'XXXXXXXXX' 的错误
- Atitit.html css 浏览器原理理论概论导论attilax总结
- 解决The type or namespace name 'XXXX' does not exist in the namespace 'XXXXXXXXX' 的错误
- 成功解决The following specifications were found to be incompatible with the existing python installation
- 〖大前端 - 基础入门三大核心之 html 篇⑥〗- 认识标签、标题和段落标签
- javascript转义unicode十六进制编码且带有反斜杠后的html
- Accidental override: The following declarations have the same JVM signature (getWindow()Landroid/vie
- HTML基础标签与相关案例