Hacker News new | ask | show | jobs
Show HN: Simple image resizing/optimization service (scaley.io)
171 points by hoahluke 3422 days ago
31 comments

My acid test for image scaling software:

http://i.imgur.com/X9vKa2s.png

https://i.scaley.io/png-256x128/i.imgur.com/X9vKa2s.png

This means that you don't use a linear color space for blending colors.

Sorry about the language, the image is not made by me [1].

[1] https://web.archive.org/web/20120904060524/http://www.4p8.co...

edit:

I see that your backend relies on libvips to do the resizing. I have no experience with it, but I could make libvips-tools' vipsthumbnail program work correctly:

  $ vipsthumbnail --linear -f tn_%s.png -s 256x128 gamma-1.0-or-2.2.png
Note the "--linear" option, without it produces the same wrong image.
I didn't think this would come up so quickly! This can actually be fixed with an undocumented option 'gamma'[1]

I didn't include it in the website, admittedly because I didn't fully understand it, and I wanted to keep the service as simple as possible.

Would it make sense for this to be the default?

[1] https://i.scaley.io/png-gamma-256x128/i.imgur.com/X9vKa2s.pn...

Nice! I think it should be the default. Some software might treats as a compromise between correctness and cost (doing the rescaling in linear space is usually more costly). In my view it should be correctness first.

The ImageWorsener's website as an excellent reading material on image resizing and other transformations. ImageWorsener is a "correctness first" image resizing software.

http://entropymine.com/imageworsener/

"Correctness" is not very useful in image processing, it's all about perception and performance.
Well "correct" in the case of linear vs non-linear luminance is pretty much exactly about perception (or at the very least, working to prevent perception differences further down the pipeline), even if it is a somewhat minor effect.

"The Importance of Being Linear"[1] which just came up on HN a few days ago, discusses some issues with non-linearity, specifically in the context of 3D rendering.

[1] - http://http.developer.nvidia.com/GPUGems3/gpugems3_ch24.html

There are lots of specific examples where incorrectness leads to perceptually significant problems. I'd agree that you don't normally notice it in the wild, which is why so much software has gotten away with it for so long.

It is possible to optimize the linearization steps so that they don't detract too much from the performance, especially if you're using one of the better (i.e. slower) interpolation methods.

This page[1] documents some effects of gamma-incorrect resizing. Specifically, check out Figure 12.

[1] http://blog.johnnovak.net/2016/09/21/what-every-coder-should...

Thanks for your detailed feedback on this, I appreciate it!
Averaging two RGB numbers isn't at all similar to how the human eye averages two colours.

The colour experts have a variety of ways to do much better, almost any of them will give you much better results. Pick one and be done. Your undocumented -gamma- option is fine.

If you want the best option you should be prepared to invest a lot of time and attention, in return for which you'll get a result that's perhaps a little better than your -gamma- and a lot better than plain RGB averaging.

Can you elaborate on how colors should be blended?

Is it about the choice of interpolation algorithm? nearest neighborhood vs linear vs cubic, etc

I've written image processing code in the past, though color accuracy wasn't important to it, and I'm curious to understand this better.

I also currently use ImageOptim and would be curious to know if it handles this.

Disclaimer: I'm not an expert in this field.

I define "color" as a visual perception of a spacially homogenous electromagnetic spectra. Notation: c=p(s), meaning color is a perception of a given spectra. It turns out, that these percieved colors form a three dimensional vector space, this vector space is the representation of the infinite dimension vector space of electromagnetic spectras (c_i=p(s_i), p(a * c)=a * p(c), p(c1+c2)=p(c1)+p(c2) ).

We can parametrize this vector space with three numbers. If these numbers are coefficients of a linear system in these space, then we call this parametrization a "linear colorspace". Then physical blending of different spectra results in the same blending in coefficients.

Often we don't use this kind of parametrization (most often sRGB on the web), because perceptual distance is not linear in a linear colorspace, so we can get away with 8 bits per color channel to not introduce obvious banding in the darker regions.

Blending problems occur if someone doesn't know if the three numbers representing a color accually is a member of an actual vector space or not. Nobody would attemt to use the same algorithm in HSV tö blend.

This image is awesome. Thank you for linking it. I'll have to keep it around to test whenever I write resizing code.
Karen handles this PNG reasonably well! https://dl.kraken.io/web/b1c01b1fa0a9b938bea45d8accd0db48/X9...

At the same time shaved off 46% of the size (from 4.02 KB to 2.16 KB)

Wow, TIL. I had never realized that luminosity doesn't scale linearly. Awesome post.
Unfortunately we have evolved for wildlife survival, not mathematical simplicity ;) We're very nonlinear in the hearing department too!
I'd like to echo the sentiment that offering 100% uptime and 3x, 5x, 10x refunds is a dangerous decision and actually will not increase paid signups. I've been doing operations/DevOps for over a decade (in fact I just launched a consulting startup (https://elasticbyte.net) that helps companies manage their cloud infrastructure). 100% uptime is a red flag, ops professionals never guarantee 100%.

You instead should offer standard 99.9% (44 mins a month) or 99.99% (4 min 30 sec) with standard SLA language.

Theoretically, I could sign up then DoS the site myself for a nice payout.
CloudFlare doesn't allow this kind of use of their service. Once you start pushing enough bandwidth they will ask you to go away. And since you offer free unlimited CDN bandwidth, when that happens and you move to a different CDN provider your bill could increase 50 times over a day.
It's not bandwidth that is restricted by our terms of service it's...

SECTION 10: LIMITATION ON NON-HTML CACHING

You acknowledge that Cloudflare’s Service is offered as a platform to cache and serve web pages and websites and is not offered for other purposes, such as remote storage. Accordingly, you understand and agree to use the Service solely for the purpose of hosting and serving web pages as viewed through a web browser or other application and the Hypertext Markup Language (HTML) protocol or other equivalent technology. Cloudflare’s Service is also a shared web caching service, which means a number of customers’ websites are cached from the same server. To ensure that Cloudflare’s Service is reliable and available for the greatest number of users, a customer’s usage cannot adversely affect the performance of other customers’ sites. Additionally, the purpose of Cloudflare’s Service is to proxy web content, not store data. Using an account primarily as an online storage space, including the storage or caching of a disproportionate percentage of pictures, movies, audio files, or other non-HTML content, is prohibited. You further agree that if, at Cloudflare’s sole discretion, you are deemed to have violated this section, or if Cloudflare, in its sole discretion, deems it necessary due to excessive burden or potential adverse impact on Cloudflare’s systems, potential adverse impact on other users, server processing power, server memory, abuse controls, or other reasons, Cloudflare may suspend or terminate your account without notice to or liability to you.

  You further agree that if [...] if Cloudflare, in its
  sole discretion, deems it necessary due to [...]
  other reasons, Cloudflare may suspend or terminate
  your account without notice to or liability to you.
I gotta say, that statement isn't very helpful in letting people know what to avoid doing.
these clauses are pretty common for this type of contract. it allows the service provider to not have to worry about whether or not their contract allows them to kick an abusive customer off their platform.
This is a pity, as Cloudflare could serve a much larger niche otherwise. I suppose there's no such thing as "free". Oh well...
Agree on this. In the beginning, we wanted to use CloudFlare for https://uploadcare.com (we're not a direct competitor, but provide image transformations as a part of our services). But it's against their policies, they confirmed it. The only option is to use a proper CDN.

A disclosure: I'm the co-founder of Uploadcare.

That is really good to know about Cloudflare. CDN cost an important thing for anyone to take into consideration when they price their free/paid tiers and something that not everyone does.

I always try to price fee tiers so that one paid customer pays for about 100 or more free users and aim for at least 5% conversion of free to paid. It's not a hard-fast rule but a good starting point. If I can't hit that (even after crippling the free tier) I just drop the free tier altogether and make it a free trial instead.

Thanks - I've reached out to them to discuss
This is the tester/hacker in me talking, but have you checked for cases where one can loop your own images hundreds of times? (e.g. https://i.scaley.io/jpg/i.scaley.io/png/i.imgur.com/DZjrx4E.... but more than 2 times)

A simple url DOS attack from my puny browser may cripple your entire server.

I made this mainly because I wanted a service to use for my own projects - but the existing solutions were either prohibitively expensive or didn't have uptime guarantees.

The backend for the processing service is nodejs and sharp[1], processed images are cached on CloudFlare. The processing servers are a custom instance type in an autoscaling group on Google Cloud.

Any feedback is greatly appreciated!

[1] https://github.com/lovell/sharp

Cloudflare does not permit storing just images in any of their plans. Their terms state that serving disproportionate amount of image or video via their service will be violation of their terms. You should check it before using it for longh term or providing cheaper cache options to users.
Ah, great info - thanks for the heads up. I'll dig into that and look into alternatives
Instead of looking for an alternative, why not get in contact with Cloudflare and talk to us about it?
I definitely will do that!
@Jimaek commented similar thing. If some big site starts using your service, your promise of unlimited bandwidth can fall flat. Just be cautious and read terms carefully I would say.
Often when competitors are expensive it's for a reason. Occasionally you'll have stumbled onto an old industry where tech can disrupt things and lower costs, but for cloud-based image serving, everyone is essentially using the same tools and CDNs. You should have a really good reason why you will be able to deliver at a lower cost or with lower margins, otherwise it's likely you will have to end up with the same 'prohibitively expensive' rates, or will go out of business.
Well, from first glance, you're lowest plan is more expensive than imgix's $10/mo minimum. I see now that you have a free plan and I get that you're following the SaaS pricing plan status quo, but if you claim to be a lower-cost competitor, you should make the free plan more prominent.

I have a lot of media-heavy side projects. I use Cloudinary for 1 and imgix for the rest.

It's really hard to compare you price-wise to imgix because you are charging based differently.

One thing I like about imgix is that I can give them access to an S3 bucket and perform transformations on master images that aren't public-read.

Note that sharp uses libvips which happens to be LGPL. I was wondering if this is an issue for commercial products (IANAL).
LGPL is very lenient and especially meant to ease use in/at commercial products.
Fun feature you should add: the ability to crop around faces. I.e say you have a long and tall image and you need it to be square, you could pick the center, top, or bottom to zoom in on, which do you choose? It would be nice to set a flag and say "find the subject(s) of this photo and crop around the subject(s)".
Yeah, that is a good idea. The Google Vision API actually makes it pretty easy to do. It is pretty amazing that this kind of thing is now possible. You can chain together a bunch of transformations into one like [find face] + [crop photo]. Here's one example of that implemented https://www.filestack.com/docs/image-transformations/facial-...
Now I'm kicking myself because I did something very similar for one of my clients based on AWS and shared it publicly (https://github.com/pbudzon/aws-image-gateway)! Not sure how it compares cost-wise, though. It's a combination of CloudFront, API Gateway, Lambda and S3. I'm quite sure CloudFront doesn't have limitations on what you can cache, like Cloudflare seems to have.

Like others who commented, I don't get the idea of image-resize-as-a-service, so I remember I laughed at my client when they asked me for this. For some reason I believe it's better for the world if we don't make people think it's ok to throw around gigantic images around the cables when it's completely unnecessary...

Not your fault. Developers tend to sometimes underestimate the power of releasing a command line utility as a web based/API tool that can help non techies do simple stuff. Image resizing is a recurring candidate but there are others like conversion tools (to pdf), checkers/monitors (ssl for example) etc. Yes, you could do these on your server with a simple cmd line but tons of folks are willing to pay to be able to use a browser/API to do the same.
It feels like a compelling property here is to have a "single point of continuously increasing quality"—that is, one changing chunk of code that is continuously improved and battle tested as more and more users report issues that require workarounds.

(But of course ever-changing externally hosted web services like these have their drawbacks.)

Awesome work! I have a suggestion/question. Why did you chose the pattern

  /:options/:image 
over

  /:image/:options

? Seems the latter would be more user friendly.
If the image url is in front there isn't exactly a sure fire way to tell where that url ends and where the options should begin. Of course there are work arounds, but the way it is now it seems that it would cover every case.
Good point. Didn't think of that.
Looks really well done! Can someone compare/contrast with Imgix?
As so often:

Please don't show a blank page when no javascript is available.

Maybe a message that you should enable javascript or better some basic information what your service does.

Transloadit is great. I'm using it right now with an open-source video project (https://github.com/xiaofei-mo/mysteriousobjectsatnoon). The encoding process is just ffmpeg under the hood, but not having to write all of the glue code to get it running with AWS has saved me a ton of time.
Thanks! Transloadit founder here - just wanted to say if there's anything you feel we could do better we'd love to hear that too :+1:
Looks nice. Is the service smart enough to figure out the file type, for example, image from facebook

https://scontent.fbed1-2.fna.fbcdn.net/v/t31.0-8/11206479_82...

Thanks! And yes, it doesn't pay any attention to the original filename, image format is detected by the data stream. Here's that image resized to 600px wide:

https://i.scaley.io/600-max-https/scontent.fbed1-2.fna.fbcdn...

I have to admit that I don't quite understand "image scaling as a service". Scaling is almost certainly a case where shipping the image over a network is significantly more costly than just doing the scaling locally?
Here the only binary program you need installed to scale the image is curl. If you want to do it yourself, you need a whole bunch of image processing libraries installed. Because of that, you'll probably end up separating your image processing logic onto its own host on your internal network, anyway. Then you're back to where you started, making an http call to an external service. Unless latency is a critical factor, an image scaling API is attractive because you do not need to waste development time setting up (and scaling) your own image processing environment.
In this case you also don't have to store the images.
> Because of that, you'll probably end up separating your image processing logic onto its own host on your internal network, anyway

Not everyone is obsessed with microservices.

As someone who has never hosted an image service like this, what actions do you have to take to stop "bad" people from using your service? For example, uploading inappropriate / illegal / violent images.
I developed a website for the university I attend that anyone can upload photographs of older exams for each course. In order to solve the image content problem the system checks every uploaded image with a 3rd party image recognition API[1] before saving it. Works pretty good so far!

[1]https://clarifai.com/

100% Uptime Guarantee? I'd like to see a status page with some stats and maybe simple graphs akin to https://status.github.com/.
They uses Cloudflare for image caching so it's the Cloudflare uptime. Correct me if I'm wrong.
Cloudflare actually doesn't have any uptime guarantees until you're on the enterprise plan, afaik. If Cloudflare were to have an outage which caused downtime of Scaley then the guarantee would cover that outage.
Neat. what stack are you using ? Something similar for those on GCP : https://goo.gl/dU0aKy
How does this differ from Imgix?
It can't be open like that "just use our URL" because it will bring many free-riders and shutdown your server.

But it also can't be a closed system with private keys and all that, because the hassle is too enormous -- the user will need a server to get the key for each image and so on.

I have the impression that all services of this kind suffer from the above dual-problem.

<snark>For something called "scaley" your logo looks very blurry on my high-dpi display. Use SVG!</snark>
My problem is usually making the cropping "smart". I need a content-aware cropping so that the resulting image looks good. It doesn't seem to come up too often as a known and requested feature in most of these services, I am wondering how come, this seems like a "must have" for me
Have you considered implementing IIIF? That's an emerging standard for constructing image URLs which has a growing amount of existing client support:

http://iiif.io/api/image/2.1/

I wonder if any thought was put into waifu [1]. While in western countries there is not such a big usercase, I know in Asia a good upscaling algorithm for manga would be really popular.

[1] http://waifu2x.udp.jp/

Very cool! How is this different from some of the alternatives like Filestack https://www.filestack.com/. I'm not trolling, genuinely curious.
The main thing I've tried to focus on is simplicity - you can just use it by changing some URLs.

There are definitely other services out there which address the same thing, the closest one is probably https://rsz.io/ which even includes some more processing features, but it doesn't have the CDN and I couldn't find any info about uptime.

https://github.com/springernature/immagine

If you want to host it yourself...

This looks like a great service, but the 3x, 5x, and 10x refunds make me very very nervous for you. 100% uptime is practically impossible. Good luck!
Its based on the time being down, not rounded up to a month.

Downtime of an hour equals a dollar or something

Oh that makes me feel better. Makes sense too
Maybe you could implement Rotate from EXIF data.
Nice features and presentation. Looks great.

But those aren't URLs. Do you document how images are retrieved, http or https?

I wonder how is scaley comparing to kraken? I have used neither. Would love to hear others' experiences.
btw I am interested in all kinds of web performance optimization services including image hosting. If anyone is interested to partner up email me at dak@prospectone.io
Could you clarify a little? What do you mean you're interested? You're founding a business and need a technical co-founder? You're a dev founding a business and need a technical partner? You're a dev looking for work in that area?

Might be my English (not a native speaker) but your message isn't clear.

Pretty slick.

Have any signups yet?

sudo apt-get install imagemagick?