In the world of digital graphics, optimizing images for the web has never been more essential. In an era where PageSpeed Insights and GTmetrix scores can make or break your online presence, the need for efficient image compression techniques is paramount.
Historically, Adobe Photoshop reigned supreme in this arena with its venerable “Save for Web” tool. But as the digital landscape evolves, we find ourselves wondering if this trusted companion can still keep up with the times.
In this article, we will delve into the critical importance of image optimization for web performance, especially in the context of today’s demanding requirements for lightning-fast load times. We’ll also explore why Adobe’s “Save for Web” may have lost its edge and how modern alternatives are quietly emerging as the frontrunners in the ever-evolving world of web image compression.
The Evolving History of ‘Save for Web’: From Pioneer to Relic
Back in the early 2000s, Adobe ImageReady introduced ‘Save for Web’ to simplify the painstaking task of optimizing images for the web. This user-friendly tool allowed for compression adjustments, format choices, and a preview of expected file sizes, making it a favorite among graphic professionals.
Adobe attempted to modernize with ‘Export As’ in CC 2015, but it falls short. It lacks support for efficient modern formats like WebP and AVIF, limiting designers and developers who strive for top-tier web performance and quality.
Considering Adobe’s reputation and cost, it’s perplexing that ‘Save for Web’ remains outdated, especially when alternatives like Affinity Photo 2 and free web-based tools like Squoosh offer efficient and quality image optimization solutions.
In a rapidly evolving digital landscape, this raises questions about why a crucial feature like image optimization lags behind, reminding us that even industry giants must adapt to meet users’ evolving needs.
Making the Choice: “Save for Web” vs. Modern Alternatives
In the realm of graphic design, Adobe Photoshop has long reigned supreme. However, even the giants must evolve. Let’s talk about Adobe’s trusty old “Save for Web.” It was a hero in its time, helping designers navigate the tricky waters of image optimization for the web.
But guess what? Times have changed, and “Save for Web” didn’t quite keep up with the digital revolution. It’s like an old classic car that’s starting to show its age in a world of sleek, high-performance vehicles.
Enter the contenders: Affinity Photo 2 and Squoosh. Why these two? Well, I’ve got skin in the game here. I use them regularly, and they’ve proven to be stellar choices for modern image optimization. So, let’s take a closer look at why these new kids on the block are giving the old guard a run for its money.
Affinity Photo 2: The Modern Competitor
https://affinity.serif.com/en-us/photo/
Affinity Photo 2, a direct competitor to Photoshop, offers robust image optimization features without the legacy baggage. Its export options are well-suited for the demands of the modern web, providing a fresh and efficient approach to image compression. Additionally, Affinity Photo 2 allows users to utilize advanced resampling methods like Lanczos for superior image quality.
However, I must point out a “flaw”: there is no a/b comparison between the original and the save preview.
Squoosh: The Web-Based Solution
On the other hand, Squoosh, a free web application, has gained popularity for its simplicity and effectiveness. It allows you to quickly and easily optimize images directly from your browser, making it a valuable choice for web designers and developers. Notably, Squoosh offers the option to save images in the highly efficient avif and MozJPEG format, a feature not present for both Photoshop and Affinity Photo.
Despite being the most comprehensive and perhaps useful software Squoosh is a webapp and adds a step to the workflow… there is also cli version, but you lose the advantage of the user interface (which allows you to fine-tune the quality).
Real World Testing
Testing Methods
For the purpose of rigorous evaluation, I have employed a systematic approach to assess the image optimization methods under scrutiny. Here’s a breakdown of the methodology:
Original Image Selection: To initiate the testing process, I begin with a PNG image, generated using Stable Diffusion. This base image measures 1024 pixels in dimensions. The rationale behind this choice is to mitigate the inherent “photocopy” effect that often arises from repeated JPEG compression. By starting with a high-quality PNG, I ensure that any subsequent compression processes are devoid of accumulated artifacts.
Image Selection: I’ve generated some images with stable diffusion prompting for something like “cat image driving an airplane, bokeh photography”. This combination of highly detailed subjects and softly blurred backgrounds provides a challenging test scenario, requiring a delicate balance between detail preservation and effective compression. This diverse image set allows for a comprehensive assessment of the image optimization techniques in question. Okay, come on, I’m kidding… I just like cats 😛
JPEG Conversion: The PNG image is then subjected to JPEG compression using a designated software tool, denoted as “XYZ.” It’s worth noting that the quality of the resultant JPEG image is contingent upon the specific codec employed during conversion. In this evaluation, the primary criterion for comparison is the file size, as it is the paramount factor in assessing the balance between image quality and file weight.
Image Analysis Metrics: To quantify the quality of the compressed images, an array of metrics is employed, ensuring a comprehensive evaluation. These metrics include Structural Similarity Index (SSIM), Mean Squared Error (MSE), and Peak Signal-to-Noise Ratio (PSNR). These objective metrics provide a robust basis for comparing the visual fidelity of the images.
To facilitate the analysis process and maintain consistency, an online tool available on GitHub is utilized. This tool offers a user-friendly interface for computing SSIM, MSE, and PSNR scores, making it accessible for others interested in conducting similar evaluations. The tool can be accessed here: Image Analysis Tool.
This meticulous testing methodology, encompassing both image generation and comprehensive evaluation metrics, ensures that the assessment of image optimization techniques is conducted rigorously and yields insightful results for quality-to-file-size comparisons.
Testing images
Adobe Photoshop 2024
Affinity Photo 2.1.1
Squoosh
Conclusions
When we delve into the seemingly simple task of saving images in the JPEG format, it becomes abundantly clear that Squoosh emerges as the undisputed champion. This assertion is firmly grounded in its utilization of MozJPEG, a codec renowned for its highly efficient compression capabilities. This sets it head and shoulders above conventional JPEG codecs such as libjpeg-turbo or libjpeg and others that are commonly employed in this arena.
To put the significance of this into perspective, Squoosh manages to make images ~20% lighter while maintaining the same quality. This translates into a ~20% reduction in download time for a webpage – a substantial difference. And let’s not forget that we’re currently considering only JPGs, while Affinity, for instance, provides the versatility to handle a variety of formats, including WebP, making it a powerful contender in its own right.
However, it’s fascinating to note the non-linear behavior of image compression when comparing different software platforms. What might be considered a quality level of 60% in Photoshop could roughly equate to an 80% quality level in both Affinity Photo and Squoosh, based on visual assessments. This discrepancy underscores the intricate nature of image compression algorithms and the distinct approaches adopted by various software solutions.
As designers and developers, it is imperative that we remain vigilant in our quest to strike the perfect equilibrium between image quality and file size. We must harness the capabilities of tools like Squoosh while acknowledging the subtle nuances that set them apart from their counterparts. These considerations serve as our compass, guiding us towards delivering exceptional web experiences that seamlessly merge performance with visual brilliance.
Join the Conversation and Share Your Experience
In the ever-evolving world of digital design, the choice of image optimization tools plays a pivotal role in shaping the performance and quality of your web projects. As we’ve explored the evolution and limitations of Adobe’s “Save for Web,” the emergence of modern alternatives like Affinity Photo 2 and Squoosh, it’s clear that the landscape is continually changing.
Your insights matter. Have you faced challenges with Adobe’s “Save for Web” or discovered game-changing alternatives? We’d love to hear about your experiences and preferences when it comes to image optimization.
Drop a comment below and join the conversation. Your input could help fellow designers and developers make informed choices for their web projects.
Let’s keep the discussion going in this dynamic realm of digital design!
No comments yet, be the first!