The Graphics Governess:
Image optimization part 1, the basics
June 14th, 2012
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.
5 Comments
Leave a response:
Subscribe
Categories
- Chez Nous
- Design
- Girlfriday
- Graphics Governess
- Happiness Is…
- Illustration Inspiration
- Panda
- Sketch of the Week
Recent Posts
Archives
- April 2013
- February 2013
- November 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- March 2011
- December 2010
- November 2010
- October 2010
Yay! Finally somewhere I can send people who need a friendly-yet-thorough tutorial on graphics. Like my family, for starters. The number of 5MB snapshots that manage to squeeze their way into my Inbox never ceases to amaze me.
Graphic designers take this stuff for granted. But just try explaining it to a newbie and watch their face register confusion/dismay/panic/glaze-out. The average how-to is either inadequate or too dry and overly technical. Kudos for succeeding in avoiding both traps.
You’re AMAZING. Period. :)
You have managed to take a topic that frightens me and make it possible to understand. I’ll be sitting right up front at the next lesson. I have questions I don’t even know enough yet to ask. One question – WordPress would be considered as Web Resolution? What is the proper resolution for photographs that Belinda mentioned?
Hi Bee! I’m so glad this might be helpful to you! Yes you got it, WordPress is web resolution. In terms of photographs, if you’re planning on emailing them and they’re just to be looked at on screen, I would stick to web resolution just so that they aren’t too heavy and potentially un-sendable. What you can do is tell the recipient that if they’d like to print any of the photos, you can send them the print-resolution version afterwards. Just remember to always save any photos you modify as versions so that the original remains intact! Thanks for stopping by :)