This article appeared in the March/April 2009 issue of Writers’ Journal. It’s part 3 of a 3 part series.
As I mentioned in my previous article, one of the ways to attract and keep loyal readers is to make the blog a pretty place to be. If you’ve been keeping up with the Writers’ Journal column “Photography Techniques,” then you’re also full of ideas on how to supplement your clever words with stunning images. The problem comes when you try and put those digital shots or high resolution scans onto the web. Fear not, with a few simple tricks and a free and easy bit of software, you can have your blog or website dressed for prime-time.
Before we do anything, there are a few vocabulary words and numbers you need to know in order to save you image in the correct format.
RGB – (red, green, blue) One of the color mixing methods. Adding proportions of red, blue and green, creates all the various colors you see on the screen. TVs and Monitors use RGB to display images, therefore you want to save any images out for the web in this format.
CMYK – (cyan, magenta, yellow, key) This is a subtractive method of displaying color, which means certain colors are masked in order to form all the colors you can see. Printers and paper publication devices use CMYK.
Resolution – The level of detail an image has.
DPI – (dots per inch) Originally a unit of measure for print, it’s often used to mean pixels per inch which is the display resolution used for monitors.
Pixel—Unit of measure for web graphics. It’s derived from the points of light on your computer screen that, as a collection, make up the display you see. Sort of like the artwork of Georges Seurat, only using points of light instead of dots of paint.
jpg, gif, tif, png, psd, pdf, eps –These are all types of image files. Why so many? They’re all proprietary formats and they all have different quirks.
The most common image files on the web are jpg and gif. Jpgs are very compact files that download and display quickly. They can contain all the possible colors so they are the preferred format for images. Their compression means that they also degrade a bit each time you save them, so it’s usually best to return to your high resolution original each time you want to do something different with the image.
Gif saves as a slightly larger image file, is limited to 256 colors, and is generally the preferred display method for images that contain text because it is also slightly sharper. There is a quirk to gif formats in that they change the color from CMYK or RGB to “indexed.” This color compression does messy things to the image when you resize it so if you’re editing a gif, change the color mode from indexed to RGB first.
All this file compression is the reason your print publications are going to ask for the images as tif, eps, or pdf.
Png is an Adobe Fireworks file format. You can display png files on the web. Psd is an Adobe PhotoShop document. Psds, like tifs and epss do not display on the web, and you’ll probably only encounter them when working with PhotoShop. Then you’ll save the images out as either gifs or jpgs for displaying.
Uploading to the Web
If you’ve taken your pictures with a print publication in mind, which is probably a good idea, you’ll have taken or scanned them at a high resolution (300-1200DPI). Image files at this level of detail are huge, and far too cumbersome to download for casual display on the web. A typical monitor only displays at 72DPI, so anything above that is wasted anyway. So in the interest of download time and dissuading someone from simply downloading your image for their own use, you’re going to want to reduce the resolution to 72.
But first, consider how large the image will need to be in order properly display on the web. If you’re doing this to beautify blog posts, the software platforms have image uploading and inserting features built in. For most blogging packages, the upload process goes something like this:
1) Click on the insert image icon
2) Browse to the place on your computer where the image resides
3) Select the image
4) Tell the software if it’s small, medium, or large
5) Press the upload/submit button
The image then either appears in your post, or is available to insert into your post. Easy. A little too easy. If you’ve told the package to insert a thumbnail and the image is actually quite large, you’re going to have a problem with the software making decisions for you about how to reduce that picture. Most of them end up posting something that looks less than ideal. To combat this problem, it’s important that you crop and resize the image to the way you want it to look and then go through the upload and insertion process. Allowing the software to make decisions for you is a good way to start your journey to the aspirin bottle.
Sizing for the web
How big do you make it? Well, it depends on the image and how you want it to display. As a rule of thumb, if you want the image to appear in the body of the text with the text wrapping around it, you need to be concerned with the width. 200-350px (pixels) wide is a good, safe number that will allow people to see the detail of your image, while not having it completely distort the flow of the text. When resizing, make sure that you maintain the aspect ratio and let the height take care of itself. You will reduce the DPI to 72 at the same time.
For a panoramic shot, again, you are concerned with the width. 450-550px wide is a good bet. Don’t worry about the height.
If you are creating an image gallery where the person scrolls through from one image to the next with no text to worry about, you want to be concerned with the height. The reason being that your “next” and “previous” navigation buttons are probably going to be either on top or on the bottom. If the height varies, these buttons and everything surrounding your gallery will jump around on the screen. It’s especially annoying for the navigation because it means that the viewer has to look up from the image to move the mouse back over the navigation when they want to move to the next image. It breaks their concentration, not to mention it’s really annoying. 250-500px high is reasonable.
Now that you’ve figured out how to upload a properly sized image, I want to mention a few HTML code settings that you’ll find useful—align=left, align=right, align=center. I doubt you’ll ever have to look at it in code, but this is what the computer reads:
<img src=“your_image_name.gif” align=“right” width=“250” height=“300”>
The software packages allow you to select your picture and then determine its alignment. No alignment at all will default to sitting on the left side of the page with the bottom of the image in line with the first row of text. I can’t think of an instance where you would want that to happen, so you’re going to have to set the image to display some other way. To get the text to flow around the image, set the alignment to either “left” or “right” and it will drop the image down so that the top is in line with the text and the rest wraps neatly around it. Align=“center” centers the image on the screen and is the most ideal for your panoramic shots.
Editing your image
The last thing I want to cover is the software that you’ll use to edit your beautiful images. Professionals are going to use Adobe Photoshop. Photoshop is a fabulous program that will allow you to do almost anything with your images. It also costs around $700. If you have a copy, and are intimidated by it, I highly recommend The PhotoShop WOW! Book by Linnea Dayton and Cristen Gillespie. It has step-by-step instructions to do all sorts of cool things.
For most people, PhotoShop is far more complex than you actually need. In most cases, you’re only going to be concerned with cropping your image to its essential part, resizing it, sharpening it and correcting for red-eye. Some digital cameras and scanners come with software that allows you to do simple things either in the camera or on your computer. If you can’t get the software to function or you didn’t get photo editing software as part of the package, I’ve found a marvelous free program that impressed the daylights out of me.
Pho.to (no www or .com, just pho.to) is super easy to use, covers all the basics, and has fantastic red-eye correction. There are other programs out there as well.
Good luck and happy posting.
Angela Render is an author who has been editing and developing websites for over a decade. She teaches regular classes on internet marketing. Her internet marketing workbook, Marketing for Writers: A Practical Workbook, is available on her website at www.AngelaRender.com.