loading...
Cover image for Free & fast image CDN with Statically, supports optimization and transformation

Free & fast image CDN with Statically, supports optimization and transformation

frans profile image Frans Allen Updated on ・4 min read

Statically is a modern CDN (Content Delivery Network, yes of course!) For any static assets, and it is useful to distribute open source content without having to manually configure DNS, SSL, CDN or hosting. Before reading further, it's good to know what Statically is here https://statically.io.

One feature that many of our users use is Images, like the name it's CDN for images that supports for optimization and transformation, allows to resize, crop, and adjust the quality to manipulate image types.

I'm Frans and I'm the creator of Statically. Let's talk about "What is Statically Images"? This service came up with the idea where to help developers optimize their image assets before sending them to end users (browsers), simple. Apart from that, maybe it's because I'm not the type of person to do image editing on a server/computer, I feel it's not an efficient way for me.

It's easier to use online tools sometimes to manage and optimize images, because we know that there aren't just one image on the website, and when it's done all on the computer using Photoshop not to mention uploading it to WordPress, it's tiring :(

Okay without any further do, let's go to the tutorial on how to use this service. We'll see what we can do with this service and how it will help on modern web development and reduce the load on the origin server.

Tell Statically where your images are stored

Yes, just need to tell Statically where your images are usually stored, whether it's GitHub repos, S3 storage, WordPress and others, the most important thing is we will need the original URL of the image.

Let's use the cloud image that I took from my house in Jogja as an example:

clouds

https://statically.io/images/misc/clouds.jpg

In the next step we will add https://cdn.statically.io/img/ to the image URL, so the format will be https://cdn.statically.io/img/:remote_image_url.

Let's try it out

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg

Statically has several other features separated by different paths, such as Screenshot available in the path /screenshot/, and all can be used under the domain cdn.statically.io. If you are interested in knowing what features Statically has, please check this page https://statically.io/features.

Okay, back to topic,

Have you tried to access https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg ?

Does it work?

If so, from here we know that the CDN works well, then we are ready for another stage.

Change the image size

w (?w=:numeric)

To change width (in pixels).

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?w=150

If your image is 800px wide and set w=150, then your image will be 150px wide.

h (?h=:numeric)

To change height (in pixels).

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?h=100

If your image has a height of 800px and sets w=100, then your image will have a height of 100px.

crop (?crop=x,y,w,h)

To crop images based on width, height, X and Y coordinates.

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?crop=100,55,80,80

resize (?resize=w,h)

To resize and crop the image based on width and height.

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?resize=350,150

fit (?fit=w,h)

To change size but maintain ratio.

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?fit=350,350

Adjust image quality

quality (?quality=<10-100>)

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?quality=60

Add filters

filter (?filter=:filter)

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?filter=grayscale

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?filter=negate

More filters will are coming soon :)

Presenting WebP content types

This function is activated by default when the CDN detects that the browser supports receiving WebP content, we call it Auto-WebP. Use this to force Images to provide WebP content.

https://cdn.statically.io/img/statically.io/images/misc/clouds.jpg?format=webp

Also check out the Images playground page where you can customize images just by adjusting a few settings.

Images Playground

I myself use Images for performance purposes on several websites that I have control to manage, one of which is ecobricks.org, and that has proven to help speed up delivery of our images, thanks to the reliable server behind Statically Images.

See also this comparison of GitHub Pages and Statically, where Statically Images plays a major role in reducing the content size from 3MB to 1.9MB.

GitHub Pages: https://tools.pingdom.com/#5baefec061000000
Statically: https://tools.pingdom.com/#5baefee185c00000

At Statically, we believe that static files shouldn't be slow.

The use of Statically Images not only makes it easier for us to manipulate images but also helps us reduce the server load for delivering static assets because once images are cached on a CDN, Statically only needs to present them from the CDN, no need to retrieve them again from your home server.

Discussion

pic
Editor guide
Collapse
ceefour profile image
Hendy Irawan

Thank you mas @frans !

I'm really curious... how does it work (behind the scenes)?

A CDN, especially those with custom origins and truly prioritizes the nearest PoP (not like this), by nature is expensive...
How can you provide it for free... (?)

At least one "catch" I know is no (easy) manual purging, but other than that...?

Collapse
souk profile image
Souk

This post is the docs for Statically. I don't see any instructions on the website.
Is it totally free? Forever? I am hesitating. How are you going to sustain without any paid plans?
I am lucky today, I think I found a gem 🎉
...or not?
But I will surely use for development purpose. Thanks for your effort Frans.

Collapse
frans profile image
Frans Allen Author

Of course, it's free, believe that day is your lucky day :)

I sustain the project with sponsorship.

Anyway, I'm currently working on Docs, hoping to get it done in these weeks, wish me luck.