如何用云化解决Jekyll网站响应图像需求,并分享插件中的魔术

由Nicolas Hoizey共同创建智能时代造物主Jekyll云式插件Nicolas插件利用云化图像存储、优化、重定位和交付基础设施实现响应图像自动化Jekyll公司生成静态网站我们认为这是蜜蜂的膝盖, 并邀请Nicolas写点 关于过程和动机无需多言,这是Nicolas

最近我迁移个人网站至最新主版Jekyll并乘机重构工具链

某些插件我用不满足我对响应图像的需求, 所以我决定寻找其他方法满足这些需求

生成响应图像HTML本地响应图像容不下如今?Jekyll响应图像插件真美允许定义自己的图像标记模板,这意味着你可以使用srcset设置或 随你但它没有解决我所有的问题

• Jekyll网站从零开始使用插件需要生成主图像中所有图像变异目前我博客上约750幅图片,
• 发送所有这些变异服务器也需要相当长的时间,因为我在家无法快速访问网络
• 当然,所有这些图片都从同位服务器传送到页面上,在我的例子中,这些页面廉价共享主机

并减少服务器端的负载.

响应网站大都公司面向客户搭建a-hoc求解响应图像, 但我知道少数SAS求响应图像求解方法,

云化法是最丰富特效解法并即使是免费使用 如果你需要合理不容易让其他解决方案 竞争

免费账号,我可以测试我所想的东西, 尝试不同的特征, 并决定继续或看别处

云化提供的主要特征如下:

• 能力使用服务代理:主图像存储在我的主机上, 但所有传送给我访问者图像都来自云信公司, 由主机从苍蝇上生成更好,我用不着人工上传主图像-云从本地发布版本自动取出换句话说,我原创唯一客户是云化结果,我主机图像带宽非常低
• 图像裁剪调整选项现在,我只把我的图像从大大师向适配响应布局缩放但我绝对在研究使用高级艺术方向的可能性云化法自动裁剪特征.
• 图像格式优化:JPEG图片发布文章时,上月云里传给我访问者的图片中三分之二是WebPs,云里生成并自动为我服务这对于我访问者性能和数据规划 和云带宽定值都大获成功
• 图像压缩优化:云化计算最佳压缩级别以降低每张图像的重量并保持视觉质量高

信云提供我需要的一切,我仍不得不开发Jekyll插件使用这些特征

经过深思熟虑后,我决定从云度液标签将方便图像发布与云化, 并同时仍然相对容易开发从其他插件启发我, 发现帮助StackOververJekyll云插件2016年7月

语法简洁

        云形路径/to/img.jpgalt变换文本标题表示图像字幕%}代码语言JavaScript高山市javascript)

从输入插件响应图像HTML使用srcset设置并大小数属性表示标签(见变大小密度部分理解这些属性如何工作柱子解释你为何使用它们而不使用 ,大都时间)上头srcset设置并回退src系统云式URL取回日志主图像并重排成数类交替大小

例举显示文档记录markdown文件中的代码

云标识/资产/logs/cludinary.pngalt经典标识%}代码语言JavaScript高山市javascript)

生成HTML代码

<英格src系统="https://res.www.aaaalireno.com/
            
             /image/fetch/c_limit,w_480,q_auto,f_auto/https://
             
              /assets/logos/cloudinary.png"
             
            srcset设置=网站s://res.www.aaaalireno.com/
            
             /image/fetch/c_limit,w_80,q_auto,f_auto/https://
             
              /assets/logs/cloudinary.png80w/
              
               /image/fetch/c_limit,w_240,q_auto,f_auto/https://
               
                /assets/logs/cloudinary.png240w/
                
                 /image/fetch/c_limit,w_400,q_auto,f_auto/https://
                 
                  /assets/logos/cloudinary.png 400w"
                 
                
               
              
             
            大小数=微宽:50rem 13rem 微宽:40rem 25vw,45vw类=龙哥平面图=经典标识宽度=480高度显示=350/>代码语言htmlXML高山市xml)

完全控制生成图像数、分辨率和大小数属性(它帮助浏览器决定下载哪个图像)控件出自配置选项配置yaml.i配置文件此部分定义标识规则

云名 : 云名 : 预设 : 标识 : mon_width : 80最大_width : 400 下降_max_width: 200步 : 3尺寸 : '(min-width: 50rem) 13rem, (min-width: 40rem) 25vw,45vw图 :从属性:类标识

• 云名:.个人身份证从云形
• 预置数 :启动预设列表你定义网站
• 标识 :是我的预设名之一,我在Livity标签中用它来表示图像文件名前
• 分钟宽度:80定义最小生成图像
• 最大宽度:400定义最广生成图像
• 反向max_width:200定义回退src系统图像宽度
• 级数:3定义图像生成数
• 大小: '(min-width:50rem)13rem,(min-width:40rem)25vw45vw定义大小数响应图像属性依赖设计和断点
• 图:永不阻塞一代全

  / /

• 属性 :启动属性列表向生成者常加

  和/或 元素化

• 类:标识加法类属性带标识标识值,我在CSS中用它来确定标识从不取大于容器宽度的四分之一,并右浮动

您可以定义所有规则, 任意数预设

带插件和免费云式账号网站建设时间减少了90%,服务器存储时间减少了60%,我不必再担心图像优化.大胜.

从这里去哪儿原创性,我想允许作家使用简单标准Markdown图像语法,但我还没有成功搭建这个,尽管偏偏贵重答案解析向Jekyll主管维护者提问帕克摩尔他自己未来我不得不深入Jekyll钩子

归根结底,这是学点Ruby的好方法, 关于Jekyll内部程序,插件工作方式, 和如何建放宝石.

帮助提高插件质量已经有少数问题为ugs或事物应加插件.自由添加您的bug报表和思想,或甚至帮助穿透下拉请求脱机

• 响应图像云
• 自动裁剪图像响应设计提高图像质量
• 响应图像:螺旋套和大小HTML图像属性
• 使网站所有图像三步响应
• 响应式Web设计最佳做法