Git Product home page Git Product logo

Comments (9)

ControlNet avatar ControlNet commented on June 2, 2024 1

快进到用chatgpt生成tldr

from kratos.

kkksa528 avatar kkksa528 commented on June 2, 2024

这是因为WordPress没引入这功能?

from kratos.

seatonjiang avatar seatonjiang commented on June 2, 2024

把图片存到对象存储里就可以了,国内几家厂商的对象存储有你说的 WebP 压缩功能

from kratos.

n0099 avatar n0099 commented on June 2, 2024

一个主要目的是控制前端用户能看到的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.

kkksa528 avatar kkksa528 commented on June 2, 2024

看了几个插件,不错,但功能有点花里胡哨(原图保存,生成webp格式,自适应分发,接入CDN)。我还是写了个python脚本,自动转换无损webp格式还能自动上传图床。

from kratos.

n0099 avatar n0099 commented on June 2, 2024

功能有点花里胡哨(原图保存,生成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_yuvhttps://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.

kkksa528 avatar kkksa528 commented on June 2, 2024

功能有点花里胡哨(原图保存,生成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_yuvhttps://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.

n0099 avatar n0099 commented on June 2, 2024

经典之扣了一堆字结果读者只想TL;DR

from kratos.

huluohu avatar huluohu commented on June 2, 2024

自己整个图床呗(例如lsky),配合cf免费cdn,图片处理和存储没必要绑在wp上。

from kratos.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.