HUGO

Cloudflare image resize and development preview

This is a quick one.

If you’re using Cloudflare’s paid plan you have access to the image resize feature and it’s as simple as pointing the visitor to a different URL of your image. Details are here: https://developers.cloudflare.com/images/image-resizing/url-format

But doing that means that you won’t be able to see the image while development, so the quick fix is using a partial, like cfimg.html:

{{- if eq hugo.IsProduction true -}} 
    {{- (printf "/cdn-cgi/image/width=1920,quality=75/%s" .img ) -}} 
{{else}} 
    {{- .img -}} 
{{- end -}}

And then just use the partial:

{{ partial "cfimg.html" (dict "context" . "img" "big-hero-6.jpeg") }}

This can also be used in a shortcode, of course.

2 Likes

I like the trick… but… using Cloudflare might not be the best idea: Why you should avoid Cloudflare's CDN | Usecue web development. Additionally, Hugo can natively resize and crop your images, which might render your trick obsolete. Just set your image directory as your resource dir and you can do things like:

{{- $image := resources.Get "someimage.jpg" -}}
{{ ($image.Fit "1600x1600 q50").Permalink }}

Seems more powerful to me and also works on your local machine.

I had a client worry about privacy issues like the ones mentioned in that link. So after some research this is the response I shared from Cloudflare:

And in this use case, using their CDN was a huge improvement in performance. The website in question is https://gregory-ms.com/

Initially the site was using the builtin resize from Hugo but this site has a lot of content and became a slow render and development process.

2 Likes

Hello Bruno,

Just curious, how lot of content impact slow render ? never had this pb

Content wise it breaks down to this:

-------------------+-------
  Pages            | 5318
  Paginator pages  | 1173
  Non-page files   |   69
  Static files     | 1729
  Processed images |   41
  Aliases          |   25
  Sitemaps         |    1
  Cleaned          |    0

Looking at the templateMetrics, the culprit is a specific single.html I am using.

     cumulative       average       maximum
       duration      duration      duration  count  template
     ----------      --------      --------  -----  --------
  4m55.095833163s   59.615319ms  445.032246ms   4950  articles/single.html

In the current state of things this isn’t a problem, but eventually I will have to optimize the render of articles.

1 Like

Thanks for the response.
But I was not clear enough.

I was curious how slow render was related using a CDN or not as I thought it was an argument for using Cloudflare for your client

In cases where the site has a lot of images, using the resize function from Cloudflare means you don’t need Hugo to process the files and it gets built faster. :slightly_smiling_face:

4 Likes

GDPR is all politics. Not being disallowed by GDPR (the lawful limit) or being privacy friendly are two completely different things. Just look at the facts. You have to trust Cloudflare completely for this to be safe. I do not. You are even allowed to use Google Analytics, whereas Google is known to profile your visitors. That does not mean you should.

May I ask what your hosting setup was prior to using Cloudflare? I would only expect an improvement when you would host your website on a machine with very limited RAM or one that is located on the other side of the world. When you spent only 10 euro/month on a VM you can already outperform Cloudflare with ease. I get TTFB’s of about 10 to 15ms.

We are going off topic. If you wish to open another thread and present your arguments why Cloudflare is not compliant to privacy, and in what way they actually make a website slowet, I am more than happy to participate.

2 Likes

We are… I like the trick and I can see why it is useful for sites that have a lot of images to process. Thank you for sharing.