使用 CloudCannon 调整 Jekyll 图像大小

Question

我正在寻找一种很好的方法来调整我的客户使用 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>

Answer 1

我会使用 '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

Answer 2

这里是 CloudCannon 的 CEO。我们发现很多人运行都遇到图像大小问题。 Joost 的建议很好，是我们目前最好的答案。

话虽如此，我们正在研究一种在上传时调整图片大小的方法，我们认为这是一个更好的解决方案，原因如下：

大图像不会使您的存储库膨胀太多
无需依赖第 3 方在实时站点上调整它们的大小

如果您想了解信息，请随时与我们的支持人员联系:-)

使用 CloudCannon 调整 Jekyll 图像大小

Jekyll image resizing with CloudCannon

jekyll

image-resizing

cloudcannon