Ask Penny: Image File Sizes

Penny Shima Glanz is our resident tech expert, and today she’s here to talk to us about image file size.

From Penny:

Two questions I often hear from my clients are: why does my site load slowly and why are my images fuzzy (or tiny)? To answer this we need to understand image file sizes and formats.

First a small reminder: this post is to provide a basic overview, there are many things I’m glossing over. If you have a specific question you’d like me to cover in detail, please ask!

Remember way back when we had dial-up internet access and tiny monitors? Websites weren’t full of images, and those that were often showed a small snippet of the image, asking the site visitor to “click for a larger image.” Then high-speed digital connections and digital cameras became ubiquitous and websites became a media-rich environment with full-page magazine spread inspired layouts. It became much easier to just point, shoot, and auto-upload.

There are times when that’s a great solution and there are times you should stop and think before pressing upload.

While you don’t need to do massive amounts of post processing with fancy and expensive software, it is important to think about the images that come out of your camera(s) and what you can do to make them work better with your website.

There are three factors we need to take into account: file size, image resolution, and image type. For the most part they go hand-in-hand, but different choices at each point affect the images.

There are three main image types on the web jp(e)g, png, and gif. These all take the digital image and convert and compress differently.

Think back, did you ever look at (old) newspaper images with a magnifying glass? When you look closely there are many small dots and if the image is enlarged then it looses the defining edges, vibrancy, and becomes fuzzy.

Keeping that in mind, let’s pretend I took this image of this sheep I knitted and colored it on graph paper of various sizes with two different boxes of crayons, one box offered 8 and the other 64 crayons.

The first sheet of graph paper will have a big grid. The box of 8 different colors of crayons are at your disposal, but you can only use one crayon for each square and it must be filled in completely. Yes, you can outline. Is your image going to be very detailed? No.

The next sheet will also have the same number of grid squares, but instead of just 8 colors, you now have a choice of 64.

Has that really changed anything? No. So what if you move to more grids for the same size paper and the same box of 64 crayons?

That looks a little more like a sheep and yes, I am purposely taking it to the extreme.

In these three images I converted the photo into a grid. That compressed the information, which is what the different file types do. They compress the image in different ways. You want your images to be crisp and clear and convey the information you need, and you also want to make sure it’s a file size that makes sense for your site visitors.

The different image types convert the images differently. Jpgs are the traditional format for photographs on the web for good reason, as they provide the highest image quality.

Next let’s think about the image size. I’m sure you’ve tried to upload a photo and there is a disclaimer that the image can’t be larger than so many pixels. Do you care? Image size influences the file size. A specific size of an image may be required by a part of a website. Larger images can be shrunk, but I’m sure you’ve seen very fuzzy “pixelated” images that were too small. Is bigger always better? No.

Yes, the format and the image size affect the final file size. While computers, smart phones, and internet connections are constantly improving, a smaller file will load faster on your website. That means happier site visitors. Further, if they are on a mobile device, they might be happy to have a lower data charge! Happier site visitors means more visits and hopefully more business.

For the most part I recommend .jpg for your images on blog posts and ecommerce. When you save your jpgs, you can choose how much compression — how many boxes and colors of crayons — you want. There will always be a trade-off between file size and quality.

At the moment I don’t see a compelling reason to size them larger than 1024px on an edge, but please keep your originals, that could change.

Thanks so much, Penny! If you have a tech question for Penny, leave it in the comments below and she’ll be back in the future with an answer!

Penny Shima Glanz is a computer scientist with a passion for information management and how we interact with technology. She started PennyWise Consulting, LLC to help solo and small businesses figure out how to make the most of their technology needs and budgets. When not wrangling technology she can be found knitting, snuggling with her cats and reading, or out on a muddy trail run at sunrise.