Comments (9)
快进到用chatgpt生成tldr
from kratos.
这是因为WordPress没引入这功能?
from kratos.
把图片存到对象存储里就可以了,国内几家厂商的对象存储有你说的 WebP 压缩功能
from kratos.
一个主要目的是控制前端用户能看到的html/js/css内容的wp主题为什么要做这种早已被各路图片处理管道aaS
厂商制作的wp插件集成(我知道的都有smush imagify shortpixel optimole: https://www.codeinwp.com/blog/imagify-vs-wp-smush-vs-shortpixel/ ,请注意我并不想给他们打广告也不推荐阁下购买他们的服务,除非阁下实在懒得手写处理管道)卷麻了的功能?经典之老wp主题膨胀到最后重复实现了许多单一用途wp插件中的方形轮子,最终由于软件腐化主题用户不得不换回单一用途的插件或自行fork/子主题修改逻辑
这是因为WordPress没引入这功能?
wp媒体库同样不会自带一个图片处理管道的功能,所以wp5.8+能做的不过就是默认给您在mime_types
filter中加入image/webp
mime type,以及一些其他的:https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/
https://wordpress.stackexchange.com/questions/323221/allowing-webp-uploads
https://stackoverflow.com/questions/53427169/how-to-upload-webp-image-in-wordpress?noredirect=1&lq=1
同样没有什么能够阻止阁下自行写一堆bash来基于inotifywait cwebp avifenc实现一个自带转换媒体库新上传图片为webp/avif/适合文章列表页大小缩略图的图片处理管道
from kratos.
看了几个插件,不错,但功能有点花里胡哨(原图保存,生成webp格式,自适应分发,接入CDN)。我还是写了个python脚本,自动转换无损webp格式还能自动上传图床。
from kratos.
功能有点花里胡哨(原图保存,生成webp格式,自适应分发,接入CDN)
毕竟他们早就卷到麻木了,而且大部分图片处理管道aaS都是把您上传到媒体库的图片发给他们的服务端去处理,而不是在您的服务端上走管道,甚至最后前端请求的图片都还是在他们那(也就是所谓的CDN)
另外自适应分发的正式称呼是内容协商,主要是两种实现:
- 在前端看到的html中用
<picture>
让浏览器决定用哪张图片变种(也就是feature detection)从而实现渐进升级 优雅降级 - 在服务端通过UA header内容来猜测前端浏览器(如果他真的是浏览器而不是乱填UA的bot)支持什么(也就是UA detection)并serve特定的图片变种
无损webp格式
然而lossless webp的压缩率不比最常见的png(在无损存储的基础上deflate一次)好多少,如果阁下真的要保证质量又要降低大小我建议直接快进到avif
https://developers.google.com/speed/webp/gallery2
https://www.ctrl.blog/entry/webp-flif-comparison.html
https://www.ctrl.blog/entry/webp-avif-comparison.html
我个人使用的有损webp和avif参数是
cwebp -m 6 -q 80 -sharp_yuv
avifenc --min 0 --max 63 -s 0 -y 444 -j all --autotiling -a cq-level=25 -a end-usage=q -a tune=ssim -a aq-mode=1 -a enable-chroma-deltaq=1
土澳文科生应用统计学带手子 @ControlNet 使用这两套参数对数千张二次元风格测试用例图片生成的webp和avif图片数据集的大小(因此如果阁下更在乎大小而不是更贴近原图那可以继续调参增加cq-level
)和针对每对图片(原图-webp
,原图-avif
)计算出的DSSIM是相似的,但原图集-avif集
的fid比原图集-webp集
的fid更接近原图: https://t.me/n0099_tg/118083
另外使用lossly有损webp时记得开启-sharp_yuv
https://www.ctrl.blog/entry/webp-sharp-yuv.html
以及建议从 https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html 下载最新版本的libwebp,而不是像imagemagick那样还在静态编译远古版本的libwebp
最后对于本主题而言,针对文章列表页专门制作文章特色图片的缩略图(resize为适合放进<img>
所在css box大小的分辨率)版本才是最有效的节省流量方式,因为几乎没有人类会把您站的每一篇文章都点出来看从而复用此前在文章列表页已经加载了的文章特色图片(前提是阁下也针对这些图片在http response header中设置了合适的Cache-Control header从而让浏览器缓存他们)
from kratos.
功能有点花里胡哨(原图保存,生成webp格式,自适应分发,接入CDN)
毕竟他们早就卷到麻木了,而且大部分图片处理管道aaS都是把您上传到媒体库的图片发给他们的服务端去处理,而不是在您的服务端上走管道,甚至最后前端请求的图片都还是在他们那(也就是所谓的CDN) 另外自适应分发的正式称呼是内容协商,主要是两种实现:
- 在前端看到的html中用
<picture>
让浏览器决定用哪张图片变种(也就是feature detection)从而实现渐进升级 优雅降级- 在服务端通过UA header内容来猜测前端浏览器(如果他真的是浏览器而不是乱填UA的bot)支持什么(也就是UA detection)并serve特定的图片变种
无损webp格式
然而lossless webp的压缩率不比最常见的png(在无损存储的基础上deflate一次)好多少,如果阁下真的要保证质量又要降低大小我建议直接快进到avif https://developers.google.com/speed/webp/gallery2 https://www.ctrl.blog/entry/webp-flif-comparison.html https://www.ctrl.blog/entry/webp-avif-comparison.html
我个人使用的有损webp和avif参数是
cwebp -m 6 -q 80 -sharp_yuv
avifenc --min 0 --max 63 -s 0 -y 444 -j all --autotiling -a cq-level=25 -a end-usage=q -a tune=ssim -a aq-mode=1 -a enable-chroma-deltaq=1
土澳文科生应用统计学带手子 @ControlNet 使用这两套参数对数千张二次元风格测试用例图片生成的webp和avif图片数据集的大小(因此如果阁下更在乎大小而不是更贴近原图那可以继续调参增加
cq-level
)和针对每对图片(原图-webp
,原图-avif
)计算出的DSSIM是相似的,但原图集-avif集
的fid比原图集-webp集
的fid更接近原图: https://t.me/n0099_tg/118083另外使用lossly有损webp时记得开启
-sharp_yuv
https://www.ctrl.blog/entry/webp-sharp-yuv.html 以及建议从 https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html 下载最新版本的libwebp,而不是像imagemagick那样还在静态编译远古版本的libwebp最后对于本主题而言,针对文章列表页专门制作文章特色图片的缩略图(resize为适合放进
<img>
所在css box大小的分辨率)版本才是最有效的节省流量方式,因为几乎没有人类会把您站的每一篇文章都点出来看从而复用此前在文章列表页已经加载了的文章特色图片(前提是阁下也针对这些图片在http response header中设置了合适的Cache-Control header从而让浏览器缓存他们)
好东西,学到了
from kratos.
经典之扣了一堆字结果读者只想TL;DR
from kratos.
自己整个图床呗(例如lsky),配合cf免费cdn,图片处理和存储没必要绑在wp上。
from kratos.
Related Issues (20)
- https://cdn.jsdelivr.net挂了,请火速更新 HOT 2
- 不能调节字体颜色 HOT 4
- 开启图片灯箱,但是没有效果 HOT 2
- 建议将 标签、最后更新这一行挪到热度点赞评论那一行 HOT 6
- 主题几个公用JS/CSS无法访问,怎么替换成本地的连接 HOT 4
- 最新版本的顶部下拉菜单不工作了 HOT 2
- 建议令页面文件支持灯箱效果 HOT 1
- 顶部配置中修改标题描述会被自动恢复 HOT 1
- kratos主题和fancybox 图片显示插件有冲突 HOT 2
- 安装主题之后没有侧边栏 HOT 1
- 可视化编辑器很好用,有单独的插件么? HOT 1
- 请问文章底部的评论如何移除? HOT 1
- 打赏是否支持自定义?或者是 buymeacoffee ? HOT 2
- Fraise主题在哪 HOT 1
- 大佬,这个博客没有做手机的适配吗,pc端显示的内容要比手机显示的内容多些,比如那个主页侧边栏的内容 HOT 3
- 是否可以使用Block Editor? HOT 1
- 能否增加个让文章和页面在新标签页打开的开关 HOT 2
- 导航栏是否可以固定,不跟随滚动页面而消失
- 无法更新了 HOT 1
- 4.3.1版本需要哪个版本的的PHP HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kratos.