As you probably know I am the main web developer for a little project called Tails Gets Trolled. It's a webcomic, meaning the principal method of delivering content is via images. Not to toot my own horn but I've been doing pretty well in regards to serving images in a way that is useful to users. My main attack strategy for this is using responsive image design.
This idea is pretty well established and is used on a plethora of websites. One issue I have found with these articles is that the images they talk about are often not the content, but additions to the content. Most of the images they talk about are Hero Images or logos in the header. While the conventional wisdom for these is to optimize exactly to CSS screen size, I opted for a different approach for TGT's comic pages, optimize for double the screen size. Often mobile devices have CSS sizes of 300px-600px, and have truely double pixel density. This means they are actually capable of displaying content that is 600px-1200px in width, respectively. Since these devices have smaller screens, it doesn't make sense to serve an image with a pixel width that is larger than what they're capable of displaying. Similarly, larger images often take longer to load.
Recently, I've gotten some pushback for this decision, and would like to provide a defense of it. My points are below:
Many articles have been written about load time being a very significant factor to a good user experience on the web. I am all about bringing TGT to as broad an audience as I can muster. As part of that we, as an organization, must prioritize load times. If I can muster it I want a site that loads quickly on all platforms, to ensure a great user experience for everyone who visits the site.
This is for both personal and user-centric reasons. Obviously a site that loads quickly feels good to use. Go to your bank, ISP, or insurance company's website for a moment. Browse. Feel how sluggish websites can be. Now go browsing around this site, or Tails Gets Trolled. You can feel a difference, right? Especially in TGT's case, the bandwidth used is actually quite high, due to the image-centric content, yet it still feels easier to use and more responsive than those quite large sites. Why is that? Well, take a look at the next point:
Imagine, for a moment, you're a poor man with only a $50 AT&T shitphone from Walmart. While I was not poor at the time, I was a little stubborn and anti-Apple, so when my iPhone broke and I was at college a state away from my parents I purchased one of these. The screen was awful, viewing angles in the single digits, the resolution was bad, the modem was quite slow. It was around the two years before I joined the TGT team, and it gave me an appreciation for sites that would load quickly on it.
Sites that are lean and efficient are something I pride myself on building. This site, TGT, my govt. name site, all use very light tooling. This is intentional, light tooling allows me to really aim for half-second load times, making my sites a breeze to use on quick uplinks. However, it must also be stated that this also comes with the benefit of these sites loading quickly on mobile. Whenever I test this with bandwidth throttling in Firefox's Inspector, I'm honestly blown away by how quickly contentful paints happen.
Every site I design (with perhaps the exception of the one you're reading on right now) is designed for users. That's why I don't run ads on anything, it's not a user-centric design choice. I've written about this before, but high-bandwidth usage is a problem. It's a symptom of a site that doesn't respect the user, you can see this quite often in websites that do run ads. The amount of information required to serve you "relevant" ads is quite frankly absurd. On to the third point:
This is a sad reality. If it were up to me, people would have large screens to really appreciate the art team's skills. However, that's not the world we live in. Looking at the access logs we keep, I would estimate 25% of our traffic is from mobile devices. This metric increases for non-English versions of TGT. Serving multi-meg lossless PNGs to these devices flat out does not make sense. In addition to the low bandwidth of these devices, some mobile plans still have data caps, so it would not make sense to waste some of that providing detail that the user cannot even appreciate.
Tails Gets Trolled is hosted on a server, our server provider has a monthly bandwidth cap that is 1TB a month. This is a lot, if you spend it wisely. Right now our average "maintenance" usage is 140 GB, but as you might imagine this ramps up quite quickly when new pages are releasing. For example, when Chapter 28 was releasing, we got to around 75-80% of our usage cap. That's damn significant, and if TGT is to grow in the future we could hit that usage cap quite easily, with just a 25-33% growth in audience. This was before I had implemented responsive images, so I imagine this usage will drop when Chapter 29 releases.
In short, I do this not out of malice for the hard work of the art team, but to bring TGT to as wide an audience as I can. It makes sense to serve images like this, wasted bandwidth is not only a drain on our resources but also a drain on the users'.
Thanks for reading! If you have any questions or comments, please email me, if I think it's worth putting on the site as a rebuttal I will gladly do so (with your permission, of course).