Let's talk about pixels

March 17, 2017 // Tagged in: Tools

How many pixels do you need? To display on a phone? Tablet? Laptop? Desktop? Projector? What if you want to print an ink-on-paper poster of a photo of your work? Is 600 pixels enough? If you use a huge image will your site load slow? How many pixels do you need!?!?

Screens vs Paper

You need a lot more pixels for printing stuff ink-on-paper than you do for screens. 300dpi (dots per inch) is good for printing, but you can use a lot less for online.

I currently shoot with a Nikon D750, which is a really nice camera, but considered a bit below a pro camera. It takes frames with 6,016 x 4,016 pixels. Using 300 dpi as a guide, a D750 frame would be great for printing poster images up to 20x13". And while 300dpi is prefered, you could really go bigger if you wanted to. The "raw" files from the D750 are about 30mb each, and the "jpg" files are about 15mb each. You definitely never want to display a 15mb image on a page! It would take forever to load! However, you might want to display a smaller image and have a Press Kit link to download a 15mb version if someone was going to print your work in a magazine. Also, large images can be cropped in the future if appropriate. If you start with not so many pixels, you can't really crop without getting down to a really crummy image.

Portrait vs Landscape

Further complicating your pixel calculations is the fact that laptops are pretty much always horizontal or landscape, but phones are mostly vertical or portrait. So which way do your images go?

My students tend to use about 2/3 laptop & 1/3 phone during the semester, but just the opposite, 2/3 phone & 1/3 laptop when school isn't in session. Safe to say, laptops and phones are both huge, and you can't ignore either format.

HDTV & Bigger & Bigger

Personally, I try to always be sure things I put online work well on both laptops and phones, but I confess I might bend a bit toward laptops in that I sometimes format images as HDTV landscapes. The aspect ratio (width to height) of HDTV is 16x9. In movies that ratio is expressed as 1.77 or 1.77:1. In pixels HDTV is 1920 wide by 1080 tall. AKA 1920 x 1080. AKA 1080p.

The next step up, WQHD (Wide Quad HD) is 2560 x 1440. Or 1440p. The aspect ratio is still 16x9 or 1.77, but it's a lot more pixels. On a 1080p monitor, your 1920 x 1080 image will be full screen, huge, and hopefully fantastic. It won't look bad on a 2560 x 1440 monitor, but it won't be quite such a giant image anymore.

Then there's 4K or Ultra HD which is 3840 x 2160. It's the format that excites technofetishists today. Then there's 8K or UHDTV or Ultra HDTV which is 7680×4320. Note that my D750 with the huge files isn't even enough to fill an 8K screen.

But, Phones?

Mostly they use fewer pixels. The giant iPhone 7+ is 1080 x 1920. But the iPhone SE is only 640 x 1136. The Samsung Galaxy S4 Mini is 540 x 960.

Futureproof Portfolio?

So what size images do you want? Will giant images bloat your site? Will smaller images that might look OK today look bad in the years to come?

960 Pixels

Many websites on laptops & desktops don't go wider than 960 pixels. So that could be wide enough for your work. And it would load fast.

But the images you use might serve many purposes. What if someone wants to look closely at your work? What if they view on large monitors? What if you want to grab a copy of your own image for another application? What about the future?

HDTV, 1920 x 1080

It's only a personal preference, but I like making HDTV images, 1920 x 1080. By "HDTV" I don't mean that the image must be horizontal or must be 16x9. I mean that my large dimension tends to be 1920 pixels, and the other dimension can be more or less than 1080 as the nature of the image warrants. Peeps in the 960 pixel camp would say this is way too much and will only be slow in loading. Then again, even my small, 12" Macbook Retina has 2304 x 1440 pixels and a 1920 x 1080 image can start to look a little anemic and not fill the full width, depending on display parameters. So sometimes I make 2560 x 1440 images. They're probably too big. But they're nice.

Generally speaking, I'll suggest HDTV: 1920 x 1080.

By which I mean, a long dimension of 1920 x however many pixels the short dimension of your particular image turns out to be.

Smaller Previews

When you do use larger images, most of the portfolio platforms you use will display smaller images that load faster. If you right-click and "open image in new tab" then you can see the full image. Phones also tend to only download what they need. But you should double check that this is true, otherwise your page load times could get long enough to drive visitors away. And if you're coding your own, you'll definitely need to use smaller preview images for any larger files you want to post.

pixel whale sculpture at the Vancouver Convention Center in Vancouver, British Columbia, Canada Digital Orca by Douglas Coupland, Vancouver Convention Center, Vancouver, BC. A Pixel Whale - or actually since they're 3D they're not "pixels" but "voxels" (volume-pixels) - a Voxel Whale. Photo by TMAB2003.