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.
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:
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.
To change width (in pixels).
If your image is 800px wide and set w=150, then your image will be 150px wide.
To change height (in pixels).
If your image has a height of 800px and sets w=100, then your image will have a height of 100px.
To crop images based on width, height, X and Y coordinates.
To resize and crop the image based on width and height.
To change size but maintain ratio.
More filters will are coming soon :)
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.
Also check out the Images playground page where you can customize images just by adjusting a few settings.
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.
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.