How right-sized graphics can lend a whole new dimension to your online appearance

Most organizations would never send their leaders to a news conference in pizza-stained sweatpants and a moth-eaten Planet Hollywood t-shirt. But a startling number of them do the digital equivalent.

They stretch low-resolution logos and graphics to serve as cover images. They shovel photos online without noticing that the call to action is getting cropped out. Use intricate, complex images as pinkie-nail-sized profile photos.

The result is a blotchy, pixelated, distorted, unreadable mess.

If you’re swallowing hard as you read this, and recognizing your own organization in these words, take heart. Because even if you aren’t a graphic designer, there’s a simple way to take a huge step toward a better first impression.

And that’s to learn the pixel dimensions that your social platform uses… and then stick to them when you create your graphics.

Do that, and your profile photo will suddenly look crisper and cleaner; your logo will be recognizable; your infographics will still contain all their info.

These tips and resources can help:

  • When you’re creating graphics for the web, set your app’s measurement unit to pixels instead of inches, picas or centimetres (which don’t mean a lot when you’re dealing with screen measurements).
  • Always preview your graphics at their actual size (also known as 100%) before uploading them.
  • Don’t keep hunting down the same specs over and over again. There are some lovely folks who’ve done that work for you and shared it online:
  • Store that information where you can get it when you need it. Scroll past Dan’s infographic, and you’ll find a table with all the values listed as text. I’ve copied that table into Evernote, and now it’s at my fingertips when I need it. (That feels especially clever when I have Photoshop open on my laptop and Dan’s table open on my tablet.)
  • Can’t find the specs for a particular image? You can measure it yourself.
    • Install a browser extension that gives you an on-screen ruler (such as MeasureIt for Firefox for and Tape for Chrome).
    • Or if you have a little HTML and CSS knowledge, right-click on the image and choose Inspect Element (or your browser’s equivalent).
  • The good folks who build platforms like Facebook and Twitter often change their interfaces, and that means changing image dimensions, too. So when an update comes out (like those banner images everyone’s been introducing over the last year or so), check to see if you need to rebuild your images – or create a whole new one.

Let’s be clear: how you look on a social platform like Facebook and Twitter isn’t nearly as important as what you do.

But as with the rest of life, a little attention to your appearance often makes a big difference. First impressions matter: looking crisp and professional can get you through the front door of people’s attention, and allow the conversations to happen that lead to deeper engagement.

About Rob Cottingham

Political speechwriter for national leaders, provincial premiers and Vancouver mayors. Cartoonist behind Noise to Signal. Online engagement strategist since the days of dial-up modems. F2F humorist ("stand-up comic" for you old farts).

2 thoughts on “How right-sized graphics can lend a whole new dimension to your online appearance

  1. Thanks for the Tips and links, Rob. Very handy.

    Also, if you see an image on the web and want to know how big it is: right-click or Control click and choose Open Image in New Tab (or similar).

    Many, or maybe most, browsers show the dimensions in the Title Bar, along with the file name.

    For an image on your own computer (on a Mac, anyway) drag it onto a browser window, and again the pixel dimensions are displayed in the Title Bar.

    Cheers,

    Miraz

  2. Great suggestion, Miraz! Especially if you have lots of tabs open and Inspect Element isn’t as snappy as it could be.

    Every once in a while, you’ll notice the Open Image in New Tab option stubbornly refuses to appear when you right-click. That’s a sign that the site is displaying the image as a CSS background. (Facebook does this with cover photos.) If so, just use Inspect Element.

Whaddaya think?