使用 CloudCannon 调整 Jekyll 图像大小
Jekyll image resizing with CloudCannon
我正在寻找一种很好的方法来调整我的客户使用 CloudCannon 上传的图像的大小。
我查看了用于执行此操作的 Jekyll 插件,但它们似乎不能很好地与 CloudCannon 配合使用。
有没有人有任何提示或技巧来让它工作?
这是我目前使用的代码:
<div class="section blog">
<div class="container">
<div class="row blog__items">
{% for post in site.posts %}
<div class="blog__item col-xs-6 col-sm-4">
<div class="article">
<div class="article__head">
<a href="{{ site.baseurl }}{{ post.url }}" class="article__media">
<img src="{{ site.baseurl }}{{ post.image }}">
</a>
<h3 class="article__title"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
</div>
<div class="article__body">
<div class="article__meta">
<p class="article__date"><small>Posted on {{ post.date | date: "%d %B, %Y" }}</small></p>
</div>
<div class="article__text">
{{ post.description }}
</div>
<a href="{{ site.baseurl }}{{ post.url }}" class="article__cta btn btn-primary">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
我会使用 'image resize service' 或 'image resize CDN'。
我已经对一些进行了基准测试。它们的工作原理都差不多,但都有各自的特点。有些是免费的,有些则不是。 Google 甚至有自己的非官方免费图像调整服务(有人得到了 link?)。 ImgIX 很好,但我前段时间测试时在低流量网站上的表现非常糟糕。他们似乎最近(2017 年)解决了这个问题,但我没有重新测试它。
对于低流量网站,我建议使用免费 images.weserv.nl。
要使用此解决方案,请替换此部分:
<img src="{{ site.baseurl }}{{ post.image }}">
有了这个:
<img src="//images.weserv.nl?url={{ site.baseurl | replace:'http://','' }}{{ post.image }}&w=600">
这将创建一个默认的压缩图像,宽度为 600 像素,质量设置为 85%(如果是 jpg)。有关详细信息,请参阅 documentation.
请注意,使用 images.weserv.nl 您将只有一次机会创建调整大小的图像。如果请求失败(或图像已更改),则无法更改或清除缓存。一个月左右缓存会自动deleted/expire
这里是 CloudCannon 的 CEO。我们发现很多人 运行 都遇到图像大小问题。 Joost 的建议很好,是我们目前最好的答案。
话虽如此,我们正在研究一种在上传时调整图片大小的方法,我们认为这是一个更好的解决方案,原因如下:
- 大图像不会使您的存储库膨胀太多
- 无需依赖第 3 方在实时站点上调整它们的大小
如果您想了解信息,请随时与我们的支持人员联系:-)
我正在寻找一种很好的方法来调整我的客户使用 CloudCannon 上传的图像的大小。
我查看了用于执行此操作的 Jekyll 插件,但它们似乎不能很好地与 CloudCannon 配合使用。
有没有人有任何提示或技巧来让它工作?
这是我目前使用的代码:
<div class="section blog">
<div class="container">
<div class="row blog__items">
{% for post in site.posts %}
<div class="blog__item col-xs-6 col-sm-4">
<div class="article">
<div class="article__head">
<a href="{{ site.baseurl }}{{ post.url }}" class="article__media">
<img src="{{ site.baseurl }}{{ post.image }}">
</a>
<h3 class="article__title"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
</div>
<div class="article__body">
<div class="article__meta">
<p class="article__date"><small>Posted on {{ post.date | date: "%d %B, %Y" }}</small></p>
</div>
<div class="article__text">
{{ post.description }}
</div>
<a href="{{ site.baseurl }}{{ post.url }}" class="article__cta btn btn-primary">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
我会使用 'image resize service' 或 'image resize CDN'。
我已经对一些进行了基准测试。它们的工作原理都差不多,但都有各自的特点。有些是免费的,有些则不是。 Google 甚至有自己的非官方免费图像调整服务(有人得到了 link?)。 ImgIX 很好,但我前段时间测试时在低流量网站上的表现非常糟糕。他们似乎最近(2017 年)解决了这个问题,但我没有重新测试它。
对于低流量网站,我建议使用免费 images.weserv.nl。
要使用此解决方案,请替换此部分:
<img src="{{ site.baseurl }}{{ post.image }}">
有了这个:
<img src="//images.weserv.nl?url={{ site.baseurl | replace:'http://','' }}{{ post.image }}&w=600">
这将创建一个默认的压缩图像,宽度为 600 像素,质量设置为 85%(如果是 jpg)。有关详细信息,请参阅 documentation.
请注意,使用 images.weserv.nl 您将只有一次机会创建调整大小的图像。如果请求失败(或图像已更改),则无法更改或清除缓存。一个月左右缓存会自动deleted/expire
这里是 CloudCannon 的 CEO。我们发现很多人 运行 都遇到图像大小问题。 Joost 的建议很好,是我们目前最好的答案。
话虽如此,我们正在研究一种在上传时调整图片大小的方法,我们认为这是一个更好的解决方案,原因如下:
- 大图像不会使您的存储库膨胀太多
- 无需依赖第 3 方在实时站点上调整它们的大小
如果您想了解信息,请随时与我们的支持人员联系:-)