When serving many images from your site pages, their weight should be properly managed. Large images can skyrocket your page weight thus leading to the three essential problems:
- Degraded user experience.
- Lower search engine rankings.
- Decreased conversion rates.
All three depend on the page-loading time. As large images increase the metric, you encounter higher bounce rates and a decrease in pageviews per visitor session. Google now treats your site’s performance as a signal to its core algorithm and may lower the position in search results for slower pages.
You can improve your page-loading times and overcome the previously listed issues by serving your Fotorama images from a content delivery network specializing in images, Image CDN.
This approach well combines with cutting off any storage needs 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.
Aside from global content delivery, 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. It’s free and folks managed to perform large-scale research on how exactly image optimizations affect web performance and compiled an article on prioritizing and implementing. Here are the Medium references:
Every file uploaded (or ingested) to Uploadcare gets assigned a unique CDN URL that you can further use to request an image or modify it in near real time with simple URL directives.
Use those CDN URLs as sources for your Fotorama images to ensure serving optimized content to your site’s visitors: improving your behavioral metrics such as pageviews and bounce rates.
We crafted an essential example:
<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>
The basic example covers using raw CDN URLs: serving unmodified images. Then, the next step is about applying the needed Image Transformations; you can find the complete list of possible options in the Uploadcare Docs. As already mentioned, you apply the transformations by appending them to the original CDN URLs. Some examples for the 3.6 MB original:
Automatically serve images in the next-gen WebP format if a user browser supports it (1.6 MB):
Apply compression presets to save image bandwidth (1.0 MB):
Resize images (94.8 KB):
You can combine optimizations to maximize the effect (57.3 KB, 64x optimization):
You can implement optimizations manually or configure your frontend to automatically add the needed postfixes to CDN URLs. You can understand the current state of your website’s performance with Google PageSpeed Insights. Use the same to track your progress as you implement optimizations.
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 contact Fotorama.io in case you have any questions.
Consider checking out the Uploadcare’s guide on integrating with Fotorama for further reading.