Issues with Cloudflare Images
blog.klungo.no
blog.klungo.no
Every point the author says is 100% correct. I'll add one more point, which ended up making it a total non-starter: you can't import lots of images because their rate limits are so pernicious. If you have tens of thousands or millions of images, keeping within their single digit per second rate limit, which appears to be totally non-negotiable, makes it impossible to add images at any scale.
They have another product called Cloudflare Images which can work from Workers: but here the pricing is almost absurd and from the data they show on their dashboard, they only cache a tiny percentage of the requests. This means you end up paying a lot more than makes sense.
Just a perspective from a user point of view, but I hate Cloudflare. All I remember about them is staring at their DDoS protection page for multiple seconds before a site's content loads.
EDIT: I'd argue that DDoS protection should be provided on the network level, not on the application level by some Javascript on a page. So yes I do hate Cloudflare for providing that service.
Or do you hate CloudFlare for offering such a (optional) feature?
https://krebsonsecurity.com/2016/10/spreading-the-ddos-disea...
Thank you for the response, but, at the end of the day, people are going to judge Cloudflare on how quickly and accurately they can solve these issues.
(Personally, I'm kinda glad we didn't. They were without doubt the sort of customer we should have already fired...)
Approximate date in images is a huge issue. There's a range of ways to express uncertainty to date, not after. not before. circa. between. year good month uncertain. If you invested in this space, you could help simplify the thinking. Ramming it into specific YYYY:MM:DD:HH:MM:SS values is really bad.
Google is a bad actor here in photos: they don't re-index on tag modification except for very specific changes and its opaque and poorly documented. If you do better it has good qualities about market and mind share.
I kept getting frustrated with the complexity and changing costs of solutions out there, so about a year ago I launched https://www.simplefileupload.com. It's a super easy, flat rate cost solution to quickly allow users to upload images and files. It provides a customizable upload widget and serves files via a CDN and firewall to protect against attacks. It doesn't have query param image resizing yet, but it's coming!
You just add the JS snippet, SFU handles all the storage and just returns a URL.
And bonus points, it's directly uploaded to S3. From the documentation: "Simple File Upload uses direct uploads. In a direct upload, a file is uploaded to S3 from a user's browser, without first passing through your app."
(just to clarify tone above, it's a total joke because your implementation is a lot better than mine was tracking to be)
BTW - I’m part of the dev advocate team at Cloudflare, would you want to chat sometime about your experience with Images? Definitely would love to hear your perspective as a dev on what could be better!
The limit is 5MB, and the default cost per month would allow you to serve 3.5M images from CF.
The original image is my biggest complaint. I was making a service where users would want to batch retrieve what they've uploaded. No response on the forums to that.
Also hit the CORS issue, so rather than fetching an image and loading it into a canvas I have to use a fake image element. This makes the canvas untrusted.
Delete was also annoying. I wanted to blow out my dev environment and there was no way to just purge everything.
I kinda stalled, was going to try S3 since the original image thing was such a breaker for me. I was vocal about all these same issues, making my own threads and bumping others in the forum.
Because it's not just a CDN but does many more things. With this product description (taken from CF blog post) I'd expect it to behave like a storage bucket containing the files (including the raw file), with an image resizer and CDN attached.
CF Images always seems like a LOT more $$ than other image hosting tools out there. What other service did you end up going with?
The nearest competitor is likely over 10x more (Caveat: For the workloads I've applied this on).
Also honestly no idea why they never jumped on the NFT bandwagon.
Oh, they're also apparently a tiny team (<50) too, so that probably helps
The website itself was already using cloudflare's CDN. So I added a simple cloudflare URL rule to redirect all requests hitting /images/XXX to the 3rd party image hosting service. Within a month our client's image hosting bill dropped from $~10k/month down to about $90/month, which I felt great about.
I did made one terrible mistake though - I forgot to tell our client about the configuration change. So cue a monday morning panicked phone call from our client when they got their bill, asking what on earth was happening that caused all their web traffic to disappear overnight. They thought (based on the bill) that their website must be broken and they were freaking out about it! Oops!
Are you saying that
1. Originally all requests for images went directly to the egregiously-priced image host
2. You changed that traffic to be routed through Cloudflare instead so it would be cached
3. That reduced requests to your image host enough to cut your bill by 99%
?
We tucked cloudflare in front of the image host using a URL rewrite rule. Cloudflare's cache reduced the number of requests made to the image host by 99% or something.
Link a repo from GitHub then change the name of your GitHub repo and the pages breaks but won't let you relink your Github repo anywhere.
I opened a ticket with support. I have gotten no where in two months (Opened on October 7th 2021).
We ended up switching to Netlify that has a more mature product.
In case someone from Cloudflare cares to investigate this is request ID# 2275043 in your support system.
Changing your repo name shouldn't break the project nor prevent subsequent builds. It's just the Pages dashboard will still show the old repo name - so the only way to update that is to delete the project and make a new one: this is a bug we're working to fix!
that's probably the logical continuation of video hosting - if you upload something to, say, YouTube, you also don't expect to be able to retrieve the original video from there. It may be a high-quality version, but it still gets reencoded on upload...
Where-as Vimeo is closer to a video hosting service.
Used to be available (ProRes Video (apch) 3840x2160 23.976fps 685 mbit/s [V: prores hq, yuv422p10le, 3840x2160, 685726 kb/s]).
Slightly higher quality than the one they published on youtube (judge for yourself).
Best practice when it comes to images on the web is to use a fixed number of sizes. Why they limited it to 20 I do not know though. You should never allow dynamic image resizing since it is commonly used in various attacks.
Also, using a fixed number of sizes might be best practice when it comes to a website you have full control over, and can plan the content for. When it comes to user-generated content, where you want to give the user the opportunity to select a custom crop for an image, you don't necessarily have that kind of control.
The alternative we considered was doing the crop on the client before uploading the image, but that ensures loss of information, and makes it impossible for the user to edit their selection at a future time without re-uploading the image.
[0]: https://developers.cloudflare.com/images/image-resizing
Can you say or link to more? I'm not following this. Like... attacks... on Cloudflare?
Adding a rate limit to image resizing is no harder than adding it to any other URL.
But okay, thanks for providing more context. I have not used Cloudflare Images at all, so I don't really know, just trying to make sense of it.
Dynamic resizing opens you up to a DDOS attack, essentially: someone would request the image at 1x1, and 1x2, and 1x3... you get the idea. But yeah, if there was anyone able to mitigate that risk via other means you'd think it would be Cloudflare.
What is the idea behind this? It doesn’t seem to add anything other than to leverage caching a bit better.
Cloudflare started as DDOS protection and should add similar features rather than limit functionality.
#1. Simple pricing [1]. We only charge for optimize bandwidth out. No other charge.
#2. Complete analytics [2] on number of images served, bandwidth usage, response times, formats of images served etc.
#3. You keep original images in your own storage [3]. We only cache it the first time we fetch an image to resize. This is to prevent any lock-ins and easy integration.
#4. You can easily setup any custom headers including CORS for all images from a dashboard.
#5. Complete dynamic resizing available with a simple API. As noted by CF officials below they can’t do it because they are a DDoS prevention company first. We are a media processing company first.
#6. No direct upload necessary. Our performance will be top of the line regardless of where the original images are stored.
#7. Max input size in free plan is 8192x8192 pixels. It’s even higher in paid plans. Plus all image formats including animated GIFs, Lotte, SVG are accepted and optimized when possible.
#8. Batch deletions not required as we don’t own originals
#9. We are super responsive to support and help our customers. We will let our reviews speak for that.
Hope you like it.
[1] https://www.gumlet.com/pricing
Thanks!
Update your UI and now thumbnails need to be 400x400 instead of 250x250? Just update the parameters and you're done. No need to manually resize your whole back catalogue as they'll be done on demand.
I like Cloudflare but some of the pricing decisions on the premium features definitely leave me scratching my head.
Something fundamental seems to have gotten out of hand when it comes to the entire offering.
What I’ve been doing is first resize an image to multiple specific sizes using Vips (https://www.libvips.org/API/current/using-cli.html)
for size in 8120 5260 3840 2560 1920 1200 992 768 576 320
vipsthumbnail $img --vips-progress --linear \
--size=$size --vips-concurrency=(sysctl -n hw.ncpu) -o $size'_%s.png' \
--eprofile='/System/Library/ColorSync/Profiles/sRGB Profile.icc' \
--delete --rotate
end
Optimize them using ImageOptim (https://imageoptim.com/mac) imageoptim (dirname $img)
Then use some kind of template to add a srcset on my websites.This one is using Plim (https://plim.readthedocs.io/en/latest/syntax.html#tag-attrib...) which I use on Lunar’s website (https://lunar.fyi)
img alt="background" srcset=${
','.join(f'/static/img/stars/{width}_stars.png {width}w'
for width in [8120, 5260, 3840, 2560, 1920, 1280, 1024, 768, 640, 320])
}
This one is using Hugo which I use on https://alinpanaitiu.com {{ $paths := (
apply
[8120, 5260, 3840, 2560, 1920, 1200, 992, 768, 576, 320, 64]
"printf" "/images/%d_stars.png %dw" ) }}
{{ $srcset := delimit $paths "," }}
<img
alt="background"
srcset="{{ $srcset }}">
Having a CDN in front which could do this for me is what I’ve been dreaming of, so I can simply have an images folder with the unaltered images instead of all those variants. But what I want isn’t always what I need.Maybe what I need is something like a reverse proxy that can generate the variant on the fly when it is requested by the browser through the srcset.
As a side note, after upgrading to Enterprise, I feel quite disappointed with CF. Caching and the core features work great, but other features feel much less mature, enterprise support appear slow and not that on top of things. Sorry for the rant, but needed to vent a bit :)
I wrote a pretty comprehensive cloudflare worker for this years ago I should look at open sourcing..
Cloudinary has two parts - a Digital Asset Manager for storing content - an service for optimising / resising images (and video) that then uses Cloudflare, Fastly etc as a CDN
Akamai, Cloudflare, Fastly all already have image optimisation services, so if you're using them already why use Cloudinary.
The DAM piece is more of an issue as most CMSs aren't great on the asset management front but looking at commerce etc platforms they're getting better
Regarding the DAM: CMS and Ecom systems are indeed getting better, but media assets you upload to them become siloed in the CMS. Cloudinary acts as a headless DAM that you can embed in any CMS and use as a single source of truth, relieving a lot of the pains of handling media files and their versions.
FD: I'm a Cloudinary employee
I've also used CDNs and CMSs to achieve the same thing including invalidating images in CDN caches when they change
Given the choice I'd always go for a solution that uses one of the good three CDNs combined with a CMS that can invalidated edge content
The only thing that is shitty about the cloudinary model is the bandwidth costs. If someone could combine the functionality of cloudinary (it is genuinely unmatched in the space) with the cost of cloudflare... I'm in. They're even doing a great job on video editing (changing encoding format, bitrate, container, splicing in audio, cropping, thumbnail...) again using the same "just change the url and it's done" approach.
Saying CDNS will eat this by offering mediocre asset management is not apt.
I am working on an alternative service for the optimized images and deliver them over a CDN [1], for the images it generates a series of down-scaled images and provides a helper script to get the right image. Right now all the documentation and examples are focused on NodeJS [2], but I am working on examples for Dart, Ruby and Python.
Some of the features are:
- Optimized images - Custom domain - Public and Private files over a CDN - Upload widget, API, UI, dashboard and webhook - Bulk delete and bucket manipulation - CORS configuration
I am working on a couple features for the private files and image handling (based on the feedback from the users), let me know if you want to give it a try!
[1] https://bucket.listws.com [2] https://bucket.listws.com/docs/bucket/docs/intro
Edit: Changed suggested name of fit mode for clarity.
fit=cover will return a square (as requested), but will enlarge it (which you never want because it wastes bandwidth).
fit=crop will cut off excess pixels if either dimension exceeds 512, but it does not always return a square. (And contrary to the docs, it does not behave like fit=scale-down.)
Original: https://via.placeholder.com/400x600 Resized: https://gregbrimble.com/cdn-cgi/image/fit=scale-down,w=512,h...
* You bring your own storage
* You bring your own CDN
For instance, you configure your CloudFront distribution to source from the Image Transformation service. You configure your Image Transformation service to source from your S3 bucket.
This seems like the best of all worlds to me. Does this exist?
Disclaimer: I work for the company
[1] www.gumlet.com
But surely pricing and analytics is something that needs to be resolved.
Images get fetched from original, resized to the size needed by the client device (desktop vs mobile), and optimized to an appropriate format
There are objective reasons why dark mode is worse than light mode, but I think anyone should be able to pick whatever mode they prefer.
See this for more info:
https://levelup.gitconnected.com/why-dark-mode-causes-more-a...
I have no data to back this up, but I suspect the main reason dark mode is so popular these days it's because there are a lot of users using devices in poor light conditions. The second big reason is probably more cultural, as dark mode looks more modern, unlike these damn boomer UIs from the 90s (sarcasm).
Some people argue about energy efficiency and OLED, which is true, but that seems like a niche use case to force dark mode on all your users.
At least for me dark mode brings back all the feelings of the 80s text UI, which was predominantly white/gray on black or perhaps white/yellow on dark blue - and quite readable. (I also recall that in some domains MDA monochrome monitors with green or orange on black were popular).
It's not in "dark mode" though, it's simply a dark theme, and those have been around since forever. I'll look around for a theme that supports both when I get the time, but until then I echo the suggestion of a sibling comment to use the reader mode.