使用 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

我会使用“图片大小调整服务”或“图片大小调整 CDN”。

我已经对一些进行了基准测试。它们的工作原理都差不多，但都有各自的特点。有些是免费的，有些则不是。谷歌甚至有自己的非官方免费图像调整服务(有人知道链接吗？)。 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，您将只有一次机会创建调整大小的图像。如果请求失败(或图像已更改)，则无法更改或清除缓存。缓存将在一个月左右自动删除/过期。