This case study outlines a performance and sustainability enhancement project for a custom web application delivering rich, media-heavy reports to users. The application is built with a custom front-end powered by AWS APIs, a headless CMS (Contentful) serving content, and a Digital Asset Management (DAM) system (Cloudinary) providing media assets.
While web pages loaded efficiently using Cloudinary’s automatic image quality transformations and caching, generating downloadable PDF versions of these reports caused extremely large file sizes—up to 70+ MB per PDF—due to browser print rendering behavior. This impacted accessibility, user experience, and bandwidth usage significantly.
In my role overseeing the engineering team responsible for this project, I guided the implementation of optimized, URL-based image transformations applied at delivery across all image types. This reduced image data per page by up to 95% and PDF file sizes by up to 97.5%, improving UX and accessibility while advancing sustainability by lowering data transfer and the related energy consumption and carbon emissions.
Overview
The application delivers complex, content- and media-rich web reports with numerous images, via a custom front-end built on top of AWS backend APIs. Content is managed in Contentful, a headless CMS, and images are served through Cloudinary, a DAM platform known for powerful on-the-fly image transformations and optimization.
Previously, images were delivered using Cloudinary’s default automatic quality transformations, which worked well for web rendering to balance quality and performance. However, when users “printed” these pages to PDF (via browser print-to-PDF), the images were reprocessed by the browser’s print engine. This process caused drastic inflation in image sizes within the PDF output—sometimes resulting in PDFs exceeding 70 MB—affecting usability and sharing.
Challenge
- Web pages (uncached) typically transferred around 3 MB of image data per page, but cached pages transferred only a few hundred kilobytes, which was acceptable for good UX.
- However, PDF files generated by printing web pages ballooned to 70+ MB due to browser-side transformations that significantly increased embedded image sizes.
- Large PDFs caused issues with accessibility (slow loading on various devices), file sharing, and storage.
- The automatic Cloudinary transformations did not fully address PDF optimization because the print-to-PDF process bypassed these optimizations.
Solution
The team implemented explicit URL-based image transformations at the point of delivery for all images, standardizing image sizes and switching from PNGs to JPGs where file size was a priority. This leveraged Cloudinary’s extensive transformation features, such as:
- Automatic format selection (f_auto) to deliver the best format supported by the browser or PDF renderer.
- Quality optimization (q_auto) to balance image quality and file size.
- Resizing and cropping to enforce maximum image dimensions tailored for each image use case.
The transformation pattern used (simplified example):
https://res.cloudinary.com/demo/image/upload/w_{max_width},f_auto,q_auto/{public_id}.jpg
This ensured images were optimized both for on-screen display and for PDF embedding, dramatically reducing image file sizes without noticeable quality loss.
Results
- Image data sent to the browser reduced by up to 95% (e.g., from 2,974 KB to 157 KB on uncached pages).
- PDF file sizes reduced by up to 97.5% (e.g., from 91.8 MB down to 2.4 MB).
- Users benefited from much faster page loads, improved accessibility on devices with limited bandwidth or storage, and dramatically smaller PDFs easier to share and archive.
- These optimizations reduced server bandwidth and client resource consumption significantly.
Sustainability Impact
Reducing image file sizes has a measurable impact on energy consumption. According to the Website Carbon Calculator methodology:
- Every 1 MB of data transferred emits approximately 0.81 g of CO₂.
- Based on our savings of ~89 MB per document,
- CO₂ emissions per PDF download are reduced by approximately 72 g.
Assuming 1,000 monthly pageviews and downloads, this equates to a reduction of 72 kg of CO₂ per year — roughly equivalent to charging around 16,000 smartphones once or the carbon sequestered by about 3.5 mature trees in a year.
Even more emissions are avoided when recipients re-share PDFs by email and other methods.
User Experience & Accessibility Benefits
- Smaller images and PDFs improve load times and responsiveness, especially on slower or metered networks.
- Users on mobile or low-storage devices can access content without delays or excessive data usage.
- PDFs that are more manageable in size encourage sharing and archiving, facilitating broader access to critical information.
- These improvements align with best practices in web performance and accessibility, contributing to a better overall digital experience.
Technology Stack & Best Practices Highlighted
- Custom front-end application built on AWS backend APIs enables flexibility and scalability.
- Headless CMS (Contentful) allows dynamic content management decoupled from presentation.
- Cloudinary DAM provides powerful caching and image optimization capabilities, enabling fine control over media delivery.
- Leveraging URL-based transformation patterns ensures consistent, repeatable optimizations across all image assets.
- Combining caching strategies with optimized media reduces redundant bandwidth consumption.
Conclusion
This project demonstrates how combining modern cloud technologies with smart image optimization strategies can solve complex issues related to large media delivery in multi-format outputs (web and PDF). It improves user experience, supports accessibility, and contributes to sustainability by reducing energy and bandwidth consumption.
Such optimizations are vital as digital content consumption grows and organizations seek to minimize their environmental impact while maintaining excellent service quality.
Tags: Image Optimization, Media Delivery, Data Transfer Reduction, PDF Optimization, Cloud Architecture, Headless CMS, DAM, Web Performance, User Experience, Sustainability, Carbon Footprint Reduction, Digital Efficiency, AWS, Contentful, Cloudinary, Environmental Impact, Green IT, Sustainable Web Design