Cloudflare image resize and development preview

tips & tricks
1

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.

5 Likes
2

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.

3

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
4

Hello Bruno,

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

5

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
6

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

7

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:

5 Likes
8

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.

9

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
10

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.

11

I started exploring this a bit tonight, hasn’t come as natural to me not being a particularly great developer and a novice Hugo user.

But I do want to serve the best possible scaled images when I publish things and I was mostly curious in the differences between Hugo’s local image processing engine and something like cloudflare or netlify image offerings with variant/flexible resize and caching.

I weighed the pros and cons for a few weeks while debating what I was going to do next. So I figured I’d give Cloudflare Images a whirl to just see what it is all about.

I do wish they would give you like 100 images to try it out on the free tier.

12

Hugo gives you more control over your image optimization, but comes at a cost during build time (unless you’re running Hugo in a persistent environment, like a server).

My personal setup: I keep my images in Hugo to make switching to different hosts easier and reduce broken images. When build time gets to be too long, I’m planning to take the lazy route and use CloudFlare Polish + Mirage on their Pro plan.

1 Like
13

Were you just manually uploading the images to Cloudflare?