You can greatly accelerate your page-loading times and thus overall web performance by serving your Fotorama images from a content delivery network specializing in images or Image CDN.
This approach is well combined with cutting off any storage and getting your image gallery serverless.
CDN is a large and geographically distributed network of nodes capable of caching your assets in many locations simultaneously. When users load your site or app, their browser requests page assets, and CDNs pick the best node to deliver content as fast as possible.
Image CDN can then be defined as a content delivery network for images. Aside from quickly delivering content, image CDNs are capable of on-the-fly image transformation and optimization to further leverage your web performance.
This article is based on using Uploadcare image CDN. Folks managed to perform large-scale research on how exactly image optimizations affect web performance, read their article on Medium.
In return for an uploaded (or ingested) file, Uploadcare returns a CDN URL you can then use as a source for your Fotorama image. Here’s how it looks like:
<div class="fotorama" data-allowfullscreen="true"> <img src="https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/"> <img src="https://ucarecdn.com/a9ed82c6-14f1-462e-849e-3b007c2aae87/"> </div>
You can learn more about connecting Fotorama with Uploadcare in this guide.
On top of delivering images from the nodes that best suits your users, Uploadcare provides on-the-fly image optimizations that further accelerate your assets.
You apply Uploadcare image optimizations by simply appending them to initial CDN URLs. Some examples:
Automatically serve images in the next-gen WebP format if a user browser supports it:
Apply compression presets to save image bandwidth:
You can combine optimizations to maximize the effect:
A few more things you can do with Uploadcare:
- Apply automatic image enhancement, Uploadcare Docs
- Apply Instagram-like photo filters, Uploadcare Docs
Have fun optimizing and drop me a line in case you have any questions.