Making the Case for Real-Time Image Processing
A tool to demonstrate the importance of trimming page weight and the difference imgix's real-time image processing service can have on a web page's performance.
Simplifying to better demonstrate savings
imgix is an integrated image processing and delivery service that optimizes, serves, and caches customers’ images worldwide to improve their website performance. The Page Weight app was developed to show prospective customers the value of imgix's image optimization tools, and the value of optimizing images more generally. With Page Weight, anyone can submit a URL to test the weight of the images on their page compared to the optimization that imgix's tools can provide.
We redesigned the tool to more clearly show the possible savings, moving away from the original version’s emphasis on comparing the customer to top websites. Displaying the difference between the originals and the optimized versions in different and interesting ways illustrates the power of optimizing and imgix’s service.
An engaging user experience
Dwaiter was tasked with developing the redesigned front-end to create an engaging user experience. Using state-of-the-art front-end tools, we created a reactive interface to effectively convey the benefits of imgix's service. We seamlessly integrated the VueJs framework to control the logic of the user interface, GSAP to power eye-catching and interesting animations and used other tools to create a modern HTML5 application. This front end was expertly paired with the existing back-end application, with some augmentations and improvements, to ensure that all requested features were of the highest quality.
Showing results on any screen size
Demonstration apps need to be useful to any user at any time. That is why Page Weight was built to be fully-featured on any screen size. The fully responsive front-end interface allows on-the-go users to pull up their Page Weight reports on mobile devices to review and share the results. The sharing features of Page Weight allow easy posting to the user's favorite social media sites. And with the massive presence of social media on mobile devices, having a demo tool that can be used on any device is a must for high user engagement.
Immersive interactions
Using the VueJs framework, we built an image selector that compares the worst image found on the submitted website with the imgix-optimized version of that image. The optimized image can be changed based on the user's selection of image formats and quality or quantization settings, highlighting the difference between the original and optimized images under different settings. The interface also lists issues found in the original image that can be addressed through imgix optimizations. Providing a real-world comparison with immediate interaction and ease-of-use gives users an immersive glimpse into the powerful tools they can access with imgix.
Eye-catching animations
We created animations that grab attention but quickly get out of the way so that users can focus on the content. Our favorite animation is the vise grip, which illustrates the effect of imgix's compression tools on image and page weight reduction. This animation is composed of multiple moving parts working together seamlessly to make a simple but lasting impression.
Testimonial
Working with the d̲waiter team felt like working with an in-house special-ops task force. They accommodated our workflow, approached the project with great enthusiasm, and delivered a quality product.
Other Projects
Explore More by Dwaiter
