With the introduction of Apple’s Retina displays in iMacs and the iPhone 5, the internet has begun birth pangs of a new era. Higher resolution in images, video and cameras. Retina displays are only in Apple products at the moment, but the new technology is poised to take over the market, with PCs and Android phones creating their own version of the Apple patent.
The mad dash for new image rules across the internet
Web designers everywhere are beginning to scramble with the release of the new Apple products featuring the Retina display. Within about six to eight months, the number of visitors to your site will probably double or triple. While it may not be a significant number yet, I promise that within a year most major websites will either have been completely redesigned to accommodate Retina display devices, or will have already altered the way the images in galleries and promotional images are displayed to service retina display users and visitors.
What this means, long term, is that saving your webcomic in Photoshop as ‘save for web’ will be obsolete.
Apple Retina displays run at 326 dpi, or ppi (dots or pixels per inch). The displays were designed to be SO densely packed with pixels that the human eye would not be able to distinguish them individually. This is wonderful news for the web, but bad news for us.
Note: I have had some people get a little confused about what ‘dpi’ means and if it’s relevant for web image saving. Any web designer will tell you plainly that dpi is used for both web and print. PPI is an older term that is used less and less in design circles. Talking to someone about “PPI” is the same as asking an American to sit for tea and crumpets while you listen to the latest ragtime song from the roaring 20s.
What does this mean for my webcomic?
This means that down the line, your webcomic may become unreadable to some extent if you don’t begin saving it at a higher resolution. If you save your webcomic at 72 dpi, it will become to highly blurred and distorted that any detail you intend will be lost in some way on the Retina display.
How to I prepare for this? How do I keep my comics sharp and easy to read?
I originally wrote this post for everyone: people who use Comicpress, and those who post on tumblr, blogspot, and more. However there was a little confusion, so I will clarify and be as specific as possible for the possible scenarios you may encounter, depending on your method of distributing your comic.
For Comicpress users:
Start saving your comics at 150 dpi, at least. This is generally recommended for most web images for Retina displays. I currently save my images at 300 dpi, which makes them larger, but much clearer. 200 is the safest, as the rule of proportional expansion occurs on any image with a resolution higher than 72dpi.
The law of proportional expansion
Instead of giving you maths to hurt your brains, I am going to break it down to this: If your comic is 800 pixels across, at 72 dpi, it can’t expand any more or pixelation (distortion) occurs. However, an image saved at 300 dpi can expand to 1000% before distortion occurs.
So an image saved at 200 dpi is a good medium between the required basic 150 and 300 dpi. Images saved at 200 dpi won’t crash your readers’ browsers if they run on older versions of Firefox, Chrome, Safari or (GASP) Internet Explorer. 200 dpi images will also expand appropriately for a Retina display without visual loss.
While saving at a higher dpi allows you to keep your comic size at 800 pixels across, saving a 1600-pixels-wide image at 72 dpi accomplishes the same effect. The choice is up to you.
(However in my opinion, it’s best to keep your original size and save at a higher resolution.)
BEWARE: This is the ONLY safe way to do this with Comicpress. However this will increase your bandwidth use. There is no escaping this fact. Some webhosts of lesser caliber and honor will charge you penalties for higher-than-normal bandwidth usage. I use Hostgator for all of my websites, because the cheapest packages offer unlimited bandwidth. I would strongly recommend you look at Hostgator or some similar hosting service that will not be lame and charge you for high bandwidth usage.
Non Comicpress users
For non-comicpress users, you have a little more flexibility in how you present your work. You can upload images at a higher DPI, but you also have another option.
Keep saving your images at 72 dpi, but double the size. Seriously. If your webcomic is 800 pixels across, make it 1600 pixels across.
There are also CSS code classes and media queries you can use to do the same thing, but I don’t want to make your head explode. A quick google search will yield the best results.
Retina display is here to stay, so if we want our comics to stay readable and relevant, we must begin saving them differently now!