The Image Compression Prologue
As a web developer, I understand the importance of making sure images are optimized for viewing on the internet. What this means is the image has a good balance of resolution and quality. For example, my camera shoots RAW files that are roughly 24MB in size (per photo). So, putting 10 RAW files on a webpage would be around 240MB in size. Every visitor would have to load that data and, while I don’t expect to get this kind of traffic, hundreds or thousands of visitors could equate to several gigabytes, terabytes, or even petabytes of data being processed as it scales. This is a huge load on the servers and can get expensive for the site owner/hosting company.
Visitors can suffer here as well. Every resource that takes longer to load can make the website appear slow, unprofessional, or even broken. Visitors experiencing these things on a website are more likely to leave the site. So, in order to make my RAW files presentable, I compress them. This is no new practice – most phones and even cameras save in a compressed format by default. I shoot RAW because it is an uncompressed format and gives me more to work with when editing my images (dynamic range, etc.).
Let's Get a Little (More) Technical
Common image formats on the web include JPEG, PNG, and GIF. I won’t go into the details on how those work, there are other articles out there that have already done it and will do a much better job than me. I will give you the important bits, as I understand them. JPEG a lossy format that is great for photographs while PNG is a lossless format that is great for clipart, logos, and images that are limited in color and complexity. GIFs embed limited colors but allow animation in images. A lossy format will lose quality with its compress algorithm and a lossless format will not lose quality. As for file size, saving a photograph as a PNG could yield file sizes equivalent or larger than the RAW files, but a JPEG of the same RAW could be exponentially smaller with no discernable loss in quality. For this reason, I use JPEG format on my images.
Another facet to this whole image thing is transparency. You typically wouldn’t want transparency in your photography, so again JPEG is the best format here. However, a logo or other something like that (something you would use PNG format for) would lose its transparency if converted to JPEG. There’s a new(ish) WEBP format available now which has comparable compression to JPEG but also supports alpha channel (transparency) and animation like a GIF. The WEBP format is intended to be the format for the web. It is for this reason that I am trialing it on this website (and I’m okay with the results so far). The downside to any of this compression stuff is that I will, no matter what, be posting photos that are not of their original quality and resolution.
Photo Quality
The biggest issue for me is finding a good balance. If I compress too much, I will have a zippy website but my images would not be up to my standards. Thus far, my process is a bit awkward as well. I edit my RAWs and process them as high-quality JPEGs in full resolution. Then, I resize them to 2560px along their longest axis and process them as WEBPs at 85% lossless quality. The JPEGs typically go to my phone where I can easily share them on social media or stare at them for my enjoyment. Even sharing them on social media like Instagram or Imgur, they will be compressed further by the algorithms those services use – often times compressing them too much for my liking.
With the current WEBP compression and resizing I am using, the images are about 40% of their original resolution with varying sizes. I am still trying to find the best balance for this format and will do more experimenting, but this is what I have found so far:
Findings
- WEBP at 85% seems to retain a good bit of the original quality and yield adequate file sizes.
- Goin to 80% or below starts to introduce compression artifacts. Most people would probably not notice, so it should definitely still be adequate for sharing – but I notice.
- The areas where quality loss is most apparent are “empty” areas where there are color gradients and bokeh.
- Noisy images are much larger. This has been most apparent on my post about turtles where the underwater photos had low-light and thus high ISO which resulted in more noise. That noise resulted in images that are up to 4 times larger than others of the same resolution.
Why Does This Matter?
My website is a photography website. I want to share my photos in all their glory. If I could get away with it, I would upload everything at full-resolution in a lossless format. That’s the way my photos are meant to be seen, but the infrastructure won’t allow it at this time. So, I have to compress and resize, but maintain as much of the original quality as possible. I am exploring ways to share larger images in ways that won’t hurt the website or create a bad user experience. Until then, I’ll continue to experiment with different settings and find other ways to improve the experience.
