Disclaimer: I’m a senior front-end web developer by trade (and have been for over a decade), so I have a pretty solid grasp on the pros/cons of this argument. This is something I discuss with teammates ad nauseum. I’ve been in heated discussions with development teams of 30+ people over image formatting issues on multi-million dollar projects. I’m not trying to blow my own horn, merely explaining my history a bit so your first response isn’t “Who is this schmuck and why should I listen to him?” I certainly don’t know everything about the web – far from it – but my foundation here is pretty rock-solid.
Anyway, on to the post…
I see a ton of confusion from web comic creators about the image format for their comic. Some people swear by the old stand-by, JPEG. Others swear by PNG, a (most of the time) lossless format that supports alpha transparency (basically, the image supports many levels of transparency… or at least PNG-24 does, never use PNG-8 for anything).
If you want to skip right to the end, use JPEG.
Here’s why:
PNG-24 is a great image format. PNG-32 is the same format, Photoshop simply calls it PNG-24 because… reasons. Ask Adobe. PNG-24/32 has been a god-send to the web development community, largely replacing the old (and bad) GIF format. Unlike the JPEGs we traditionally use for the web, it can be lossless (good) and it can support transparency (very good) but it’s also very, very large (bad). I use PNGs all the time for icons, logos, and other images that never display larger than 250-ish pixels in width. It’s a great, quick way to support imagery that requires transparency to let the background shine through and complement your design. PNG-24 supports 16,000,000 colors, the same as JPEG, so we no longer have to fight the 256 color palette of GIF and PNG-8 (if you’ve ever heard the term “web safe color”, it was borne out of having to work in an extremely limited 256 color palette, a limitation of the 90s and early 2000s web). But that size… Oh brother, the size of a large PNG. Your typical PNG-24 file will clock in at 3-4x the size of the equivalent JPEG saved using Save for Web at quality 70 in Photoshop (the default used by most web designers).
Why does size matter? Because a web site isn’t only about how it looks, it’s also about how it renders and the experience it provides the end user. If your entire page loads in roughly a second, your reader is engaged with your site immediately. That’s a good thing. If the rest of your page loads in a little over a second but the main content image takes 2+ seconds to load, what kind of experience is that delivering to your end user? Also, how long do you expect them to stick around your site if they want to read 50+ comics but each page takes four seconds to load? There’s a reason your website hosting package probably costs less than ten dollars a month: it’s not very good. It’s a shared server that could have hundreds of other sites consuming its bandwidth and processing power. Every image you load on the page, every additional plug-in you use, every snippet of PHP code you ask the server to process consumes a small fraction of that limited bandwidth… So don’t waste it on unnecessary imagery.
But does image size matter? You’re damned right it matters. On a webcomic site, it might matter more than anything else. I’ll show you an example from this very site. Each one of my comic images (using the JPEG format, which means they’re relatively small) is, give or take, about 400KB. That’s 0.4 MB in size. If I save that same file in PNG-24 format, it clocks in at a massive 3.3MB. Nearly ten times the size of my JPEG.
The entirety of the rest of my page code is roughly 750KB in size, including advertisements. That means the rest of my page code is roughly 1/5th the file size of that massive PNG I referenced a moment ago.
So what do you think happens when you try to cram a 1.5MB PNG file (double the size of the rest of my page code) into every page load on a server that may already be stretched to its limits? And we’re only talking about one image. What if you display two comics per page? Three? Or 10-12, as I do on this site?
And I haven’t even brought up mobile data caps. How do you think your end user will feel when they realize that, by reading 40 pages of your comic during their lunch break, they have consumed 250MB of their 2GB data cap for the month? If the user is tech-savvy enough to figure it out, they’ll never again visit your site without a wi-fi connection handy.
Okay, so we’ve established that PNG is much bigger than JPEG and that it can cause issues with user experience either through a slow user connection or through server capacity issues. But what about the quality? I’ve heard many people say PNG displays text better than JPEG. Well, it’s a lossless format (most of the time, anyway) so that’s not really news. A large PNG is going to be crisper than the equivalent JPEG saved properly for web use. Does that matter?
In a word, no. And before you bail out of this article, let me explain why…
Welcome to 2011. Say hello to the iPhone 4.
Apple gets a lot of shit for either claiming to invent things they clearly didn’t invent or they get praise for claiming to invent things they… clearly didn’t invent. The iPhone 4 is a little bit of both sides of this coin. It was the first popular device to break through the pixel barrier and give us a display with pixels so small they could hardly be seen by the human eye. Which was great! Huzzah, Apple!
But this meant a complete rethinking about how we present websites to end users. No longer were exact-fit images (a 100px image in a 100px container) going to cut it. Those images looked blurry, pixelated, and something of a mess on these new pixel-dense screens (which, if you’re reading this on a device that either cost more than $400 or was manufactured after 2013, probably applies to that thing in your hand/lap/desk right now). What did that mean? It meant images needed to get bigger. A lot bigger. It quickly became common web practice to pack a 200px image into a 100px container, which bumps the resolution from 72 PPI (pixels per inch) to roughly 150 PPI (144px really, but who’s counting?). That meant images needed to contain four times as many pixels as they did previously. That also meant the already-cumbersome size of PNG just became a really big problem. But it also became a real boon to those of us who display text in images (ie. webcomickers). No longer were we constrained by the crappy, pixelated rendering of imaged text on monitors. We can now pack a 1500px image into a 750px container, doubling the resolution of the image on these rich, powerful new displays. Which loops us back around to JPEG…
Now that we can pack these dense images into a display and they render beautifully on retina devices (which is just a loose term for these new displays used by almost everyone, coined by Jobs in that iPhone 4 keynote presentation), we can blow up JPEGs to double the size and achieve better rendering than a PNG that is much smaller in physical size. Oh, and the JPEG file still clocks in 2-3 times smaller than the PNG, even though it physically contains four times as many pixels.
But enough talking. Here are a few examples of the same image. The first two are desktop images, the latter two are best viewed using a phone. If you own a desktop with a pixel-rich display (basically, any laptop that is 1080p or better should show a significant difference), you’ll see what I’m talking about. I’m going to list the physical size of the image along with its file size. I think you’ll find the differences startling.
If you don’t own a pixel-dense desktop display, pull this page up on your phone and scroll down the page. I did the same for phones, using the iPhone 6/6s as a baseline for screen size (375px in width).
Desktop PNG. 972px by 1008px. 1.4MB file size.
Desktop JPEG. 1800px by 1867px. 550KB file size. Nearly four times the pixels of the PNG, a little over 1/3rd the file size.
Phone PNG. 375px by 389px. 275KB file size.
Phone JPEG. 750px by 778px. 190KB file size. Exactly four times the number of pixels of the PNG, yet just over half the size.
If you own a retina-grade display, which images render better?
Yep, the JPEGs. And those JPEG files come in at anywhere between 2-3 times smaller than their PNG counterparts.
There you have it.
As a footnote, how should you save your JPEG? If you’re using Photoshop, do not “Save As” and select JPEG. Cmd+Opt+Shift+S brings up the Save for Web screen in Photoshop (Ctrl+Opt+Shift+S in Windows). This is an optimized form of saving, which will result in much smaller JPEG output while retaining high quality (I use 50 or 70 quality depending on the image size and on-page compression but play around with it a bit… But rarely, if ever, go above 70). A good rule of thumb is that a 1000px by 1000px JPEG should come in around 300-450KB in file size. If you’re way over or under that number, something may be wrong with how you’re exporting the file. A 600px by 600px JPEG shouldn’t be larger than 150-ish KB.
There are few things you can do to easily improve your user experience than by presenting the viewer with rich, detailed images that load quickly and keep the page’s responsiveness snappy. Take advantage of the tools available to you and that means use PNGs only sparingly and for specific reasons, most of which will revolve around “I need need transparency in this image”.
Everything else? Use a JPEG.
Share this page:
