You need to know your graphics. Have you ever browsed through a nice brochure and come across a fuzzy graphic? Or visited a website and waited a long time for a huge image to download? And when that image finally downloads, it is unnaturally stretched? These problems are created when people create content without knowing about these three graphics basics: file types, file sizes (as in pixel dimensions), and resizing.
Why should you care? Because when you hire a designer to put together your website, or you work with an agency on a brochure, or your professional association wants your photo or logo to include in their newsletter or their signage, you will be asked for a file and might be asked to make sure it is a specific type or size.
UPDATE: I was recently asked for this information is a form that my client could easily send out to her colleagues — so here is a version of this article in PDF form.
File Types: Raster or vector?
All digital images can be divided into two categories: raster and vector.
Raster images are photographs, scanned images, and images made up of dots (pixels) of varying values. The larger or sharper the image, the larger the file size. Best for photos. Typical raster file types include JPG, GIF, and PNG. Often created by Adobe Photoshop (.psd) or captured with a scanner or camera. If your designer asks for a photo, send a raster image.
Vector images are those that are drawn using drawing packages and are made up of drawn lines, shapes, and points. Best for line drawings, logos, and computer-generated images. Because the computer stores data about lines and points rather than every individual pixel, a vector file can be scaled to any size without increasing file size and without degrading the image quality. Best for non-photographic images such as logos, because the computer can generate the image in multiple sizes for you, ensuring the crispest possible image. Typical vector file types include EPS. Often created by Adobe Illustrator (.ai). If your designer asks for a logo, send a vector file (if you have it).
Graphics file types
Following are some of the different file types you may encounter.
- JPG – (raster) the most common type, used for photos
- GIF – typically used for lower-resolution photos or for drawn images. Common for web graphics. Supports transparency
- PNG – Can be used instead of JPG or GIF, supports transparency
- EPS – a portable vector format, good for sharing logo files
- AI – an Adobe Illustrator vector file.
- PSD – an Adobe Photoshop file (hopefully with layers!)
Size topic #1: Do you want pixels with that?
When you’re talking about photos, you’re usually going to be dealing with JPG files, and then you need to be aware of how many pixels the file contains — so get out your calculator.
You often hear design professionals talk about dpi — or dots per inch. This term is a leftover from analog press days. What they’re really talking about is pixels. That term “dpi” tells you, for every inch of the graphic, how many pixels there should be. For example, a 300 dpi image has 300 pixels for each inch of the graphic. So if you know that your image is going to be printed at 4 inches wide by 3 inches high and the designer tells you it needs to be 300 dpi, that means the image needs to be a minimum of 1200 pixels wide (300 x 4) by 900 pixels high (300 x 3).
How many pixels are enough?
This is a generalization, but a good cheat sheet for starters:
- Web and PowerPoint projects: 100 dpi.
- Large-format printing (the wall of a tradeshow booth or large sign): 100-200 dpi
- Standard business print work: 300 dpi minimum.
- Art prints (or other high-end output): 600 dpi minimum.
- Photo editing (use the highest-resolution images you can get): 1200 – 2400 dpi.
Size topic #2: Size does matter
It’s best that you use images that are big enough for your needs but not much bigger than necessary.
Too Little: Let’s say you have an image that is 300 pixels wide by 500 pixels high, then you decide to print it to a full 8 x 10-inch page. Doing the math (300 / 8) you see you’re using just 37 pixels for every inch of the width of your image — which will be very fuzzy indeed. For good quality in printing it’s best to have about 300 dpi — so if you want that 8×10 printout to look good, start with an image that is at least 2400 pixels wide (300 * 8).
Too Much: The more pixels in your image, the larger the file size will be; and the more room it will take on your disc and the longer it will take to download from a website. Let’s say you want a 2″ wide by 4″ high photo on your website. Knowing that web images should be about 100 dpi (or certainly no less than 72 dpi), you should use an image that is no more than 200 pixels wide (100 x 2) by 400 pixels high (100 x 4). Yes, you can get more detail and quality from a larger image — but in most cases, unless a person zooms in on the image, that extra quality won’t matter. Don’t make visitors to your website wait for downloads of large images if they don’t have to.
Resize with care
My final point is this — when you resize an image, be careful to resize it proportionally. In most programs this means that you hold down the shift key as you drag the corner of the image. If you don’t have graphics tools for resizing your images, try PicResize or Google for “online image resize” to find other options.
Moral of the story
You don’t have to be a graphics expert with expensive software to get good results. Know the basics and nobody has to know that you’re not a pro.
Click a tag for related posts:agencies audiences Basecamp blog brand business call to action community computers customer support editing email estimates fonts freelance gadgets graphics iPad job hunting logos mac marketing messaging Outlook packaging planning PowerPoint presentations productivity product review professionalism project management projects recommendations resume reviews self publishing social media stock photography Technology tradeshows web design windows Word writing
- Serious Layout in MS Word
- A Supercomputing vocabulary primer
- Planning categories and tags for an organized blog
- Improving Your Presentations
- 1-minute Photo Improvement
- Why Do You Blog?
- Batch Processing with Affinity Photo
- The Entrepreneur’s 10-Step Condensed Business Plan
- iPad: How Old is Too Old?
- Do I Have Enough to Quit My Day Job?
- Leave Localization to the Pros
- Make Your Calendars Play Nice Together
- Free Graphics Sources
- Mirrored Margins in MS Word
- A Tale of Three Headsets
- Time to Move On
- The Event Plan: a Tradeshow Primer
- GoToWebinar Basics
- Outlook for Mac: So Close!
- From Windows to Mac
- Evernote is Awesome
- Set Up a DocBook Toolchain
- Your Professional Resume
- Stock Photography Tips
- Tricking Your Customers is Disrespectful
- Deadline Management
- Manage To-dos With Basecamp
- The Brydge+ iPad Keyboard
- LinkedIn for Job Seekers
- Week Numbers in Outlook
- Hidden Impacts of Project Schedule Delays
- Getting Started in Self-publishing
- 13 Tips for Your Blog or Newsletter
- Do Religion and Marketing Mix?
- Consistent Color = Brand Power
- Outlook Automation with “Quick Steps”
- Comment Spam: I Give Up
- Good Design Housekeeping
- File Naming Sanity
- PowerPoint Graphics Tips
- Comment Karma
- Comparing Two iPad Keyboards: ZAGG and Logitech
- Outlook Rules 101
- Consolidated Outlook Inbox
- Five Steps to Plan a Website
- Choosing a Domain
- Outlook Productivity: Tagged Searching
- Considering a Switch from Windows to Mac?
- Tradeshow Giveaways & Promotional Gifts
- Why Rush Jobs Are Evil
- Online Printing: Customer Service is King
- Estimate Etiquette
- Getting Organized With Outlook PSTs
- WordPress vs. Weebly
- Comparing 5 Online PM Tools
- Choosing your Next Non-Mac Computer
- Is it Really a Blog?
- Your Laptop’s Video Connectors
- Know Your Graphics – or Look Like You Do
- Add a Keyboard to Your iPad
- Letterhead in an Email World
- Use Simple URLs
- Keep in Touch with Your Customers With Email
- Rolling Up the Feedback
- Keep Agency Project Costs Down
- Merchandising and Your Brand
- Your Email Address and Your Brand
- B2B Social Media: Are you overlooking StumbleUpon?
- Email Marketing vs. Spam
- The Long-copy Sales Page in 5 Steps
- You Need a Writing Style Guide
- Why Reference Cards?
- Lose the Hyphen!
- The Minimalist Marketing Plan
- Your Business Name and Domain
- Trade Downloads For User Data
- Monitor Social Media For Product Feedback
- Take Every Branding Opportunity
- Messaging 101
- Creative Use of Your Customer Service Stories
- Don’t Stop With a Call To Action
- Creating a Text-based Logo
- The Reluctant Social Media Networker
- Save Money With an Effective RFQ
- User Communities and Exclusivity
- Recommendations and Your Reputation
- The iPad As Business Tool