Are Images Bringing Your Site Down?

Here at BKMedia Group our main focus is web design, development and internet marketing. We do, however, offer graphic design services as well, ranging from branding to print work and more traditional marketing.
Oftentimes, our clients use us for a combination of these services, and one thing that usually causes a slight hang-up is images, specifically their sizes and resolutions.

For Print, Bigger is Better

When you’re taking images with a camera, the resolution of these images is usually 300 DPI or higher. DPI stands for “dots per inch,” and it’s pretty straight forward if you think about it. The images are made up of little dots of color, and the more dots of color per inch, the clearer the image will look and the higher quality a printed reproduction will be.

The new iPhone 5 features an 8 megapixel camera, but what does that mean in terms of DPI? Well, for starters, a megapixel is a million pixels, so one of those photos is going to be made up of almost 8 million pixels. The actual dimensions are 3264 x 2448 which may not be exactly 8 million… but it’s close!

So you’ve got a picture from your iPhone 5 camera, and you want to print it out as large as possible to hang on your wall. Since you want the picture to be crystal clear, you don’t want to print at a resolution below 300 DPI, and that means your photo is going to be 10.9″ x 8.2″.

After a while, you decide that the photo is just so good that you want to use it on your website as well. We don’t blame you, it really is grand, but you need to be careful or you’re going to slow down your website.

For Web, Speed is Key

While printing is usually at a resolution of 300 DPI (there are some exceptions for large-scale graphics… don’t worry about it), our computer screens display images at 72 DPI. This means that your iPhone photo, with its 8 million pixels, is going to display much, much larger.

Think about driving down a long, straight highway. A mile has 5,280 feet in it, right? Right. So let’s say you’ve just driven 10 miles – a total of 52,800 feet – down that highway. Suddenly there’s a terrifying shift in the rules of measurement and a mile now consists of only 1,000 feet. By those new standards your recent drive now measures 52.8 miles, as opposed to the 10 it had been.

The amount of feet travelled didn’t change, but your odometer clicked over a mile much more quickly because there were fewer feet per mile. It’s the same basic idea with your image. The image still has the same amount of pixels, but there are fewer of them per inch, resulting in more inches and a larger image.

At 72 DPI your iPhone photo would be 45.3″ x 34″. For reference, your standard website is somewhere around 1000–1200 pixels wide, or about 14–16″. Sure you can just upload that photo as is and adjust it to display at a smaller size, but this doesn’t change the actual size of your image.

That 8 megapixel image, saved as a standard jpeg, is going to be about 1.9 MB in size regardless of whether or not it displays at full size. If you sized the image down before you uploaded it, say to 1088 pixels wide at 72 DPI, your file size would be 378 KB… still big enough for your use, but over 5 times smaller than the original.

Having too many large images on your website can drastically effect your load speed and and even result in a loss of traffic. Before uploading photos to your website, understand where they are going to go and what size is actually necessary for that purpose. Resizing photos using Photoshop, Preview, or any other editing program is not only smart, but essential to a great-performing website.

Technically, this whole article is wrong.

I really apologize. I used ‘DPI’ the entire time, but ‘PPI’ would have been more appropriate in a lot of spots. PPI stands for “pixels per inch” and is the term when dealing with digital images.

They’re similar, but these terms are different because pixels and dots display on screen and on paper respectively, and work differently: Pixels are square and fit together end to end on screen, while dots are printed with varying amounts of space or overlap between them to create the desired result on page.

Here’s the thing, though:

Yes, they’re different (and you can find many passionate articles screaming at you about that fact), but you’d be hard-pressed to find someone who ever uses both terms independently. Maybe because it’s so deeply engrained due to the long history of print, but DPI is the overall favorite. Even industry applications like Photoshop seem to interchange DPI and PPI.

So for the sake of keeping everyone from being confused, we’ll keep referring to it as DPI, and we won’t tell if you don’t! As long as we know the difference, we’re good, right?