Hooray, our first lesson! And it’s a big one, so I’ve split it up into three installments. This week we’ll familiarize ourselves with the basics of image optimization. Next week we’ll continue with a step-by-step guide for web optimization, and the following week we’ll conclude with print optimization.
Image optimization is hugely important. Why? Because every single action that you take – sending an email attachment, posting on your blog, printing a photograph, etc – is impacted by the information contained in the images you are using. Want your site to load efficiently, your emails not to bounce, your printables to look sharp and sparkly? Grab some tea and cookies and get ready to boss those images into shape.
Before anything else, determine what you want to accomplish with your images so you can plan your workflow accordingly. It’s usually pretty straightforward: if you’re planning on emailing, sharing via download or posting online (on your website, blog, Etsy shop, or on twitter or facebook, for example), it’s web prep. If you’re planning on printing it, well – that would be print prep :)
That being said, in some situations you may be working on a project that requires both web AND print files – for example, if you’re creating a catalogue of your work that you want to be able to share online and email to clients but you also need to provide a printed version to mail out. If this is the case, you will need to prep two separate sets of images; so set yourself up to prepare the print files first, then move on to the web files. Always start with the larger files (print) and work down to the smaller files (web) because trying to increase the resolution of a file after it has been reduced will not work. Trust me, it’s not worth learning the hard way.
Resolution is a critical factor that directly influences how good your final digital images will look, so don’t skip it because it sounds intimidating: like many things, there is definitely a gray area, but it really is kinda straightforward. Here’s a quick lesson on resolution – and not the New Year’s kind. Actually, that would be a much longer lesson. Don’t you already feel less intimidated now?
DPI = dots per inch. This number, combined with the dimensions of your image (which we will cover in the web and print installments) will help you determine whether the resolution of your image is correctly set up for either web or print output. Technically this is a printer setting – if you’re working digitally, in Photoshop for example, the definition would be PPI – pixels per inch. We’re going to stick with dpi as a general term, just to keep things simpler.
Fact: There is a finite amount of dpi that looks good on a screen, and I’m not talking about those delicious new iPad screens – I mean your regular, basic ol’ computer screen. Also, there is a finite amount of dpi that looks good in print.
Translation: More/higher does not necessarily mean better – you will reach a certain sweet spot of greatness, and then it just becomes dead weight.
Fact: The finite amount of dpi that looks good on a screen is not the same as the finite amount of dpi that looks good in print.
Translation: even if an image looks GREAT on your screen, it could look absolutely awful in print. Why? Because your computer screen makes things look fabulous at 72 dpi. Paper makes things looks fabulous at 300 dpi. See the difference there? Don’t trust your screen, trust the numbers.
Bottom line: If you’re preparing an image for a web application, your image’s dpi resolution should be at 72. If you’re preparing an image for a print application, your image’s dpi resolution should be at 300.
There are further intricacies to this – with the advent of pretty iPad screens and responsive web design, it’s possible that some online images may be at a higher resolution than 72. Also, when printing, you could venture to go down as low as 150 dpi and still get away with it in some cases (I recommend avoiding this if and whenever possible though). And we haven’t even started discussing bitmap vs. vector – that will be for another post. But as a general rule, stick with this and you’ll be able to avoid a lot of mishaps.
Let’s stop here for today – at this point you should be confident about your workflow and what resolution you’ll be setting your images at. Next week we’ll really get our hands dirty so I hope to see you then. If you have any questions or requests, feel free to let me know in the comments!
Hugs and kisses, the Graphics Governess.