The Basics of Preparing an Image for the Web

by Brittany Horton on December 20, 2010

Whether it is to illustrate something you are writing about or just something for visual appeal, images are one of the most important elements to web content. From company websites to personal blogs, images are key factors in making your content interesting. If you perform simple analytics tests on your site, you will quickly see how much better your pages with images perform than those without.

When you are prepping your content and making your edits, your top priority may not be the images that correspond to your writings, but they should be; they are just as important. Without images, the content does not have visual appeal and viewers are less likely to continue reading.

This post will go over some of the steps to preparing your images and photos for web use. It will cover the difference between RGB and CMYK, which one to use and why, which image format is best for the web, as well as what resolution is best for web images.

RGB Color Mode vs CMYK Color Mode

RGB = Red, Green, and Blue

RGB = Red, Green, and Blue

CMYK = Cyan, Magenta, Yellow, and Black

CMYK = Cyan, Magenta, Yellow, and Black

RGB= Red, Green, Blue. RGB is primarily used for screen and web. When you take a photograph with a digital camera—point-and-shoot, SLR, or with any recent phone cameras—you are capturing an RGB image. This means that the colors being used to make the image are red, green, and blue. These images are very easy to upload to your computer and add to your website content or post.

CMYK= Cyan, Magenta, Yellow, and Black. CMYK is primarily used for print items, printing a brochure, or even a color book. CMYK images or photographs cannot and will not be displayed on most browsers.

Browsers require an RGB photo; if you try to use a CMYK you may receive an error, or your photo will simply not show. So, how do you know if your image is an RGB or CMYK if you did not create it? Most image editing software has a setting to allow you to change the color mode on an image. If you have Photoshop, you can change your color mode by opening the image, going to Image>Mode and select “RGB.”  Then you can save to the best format for your needs.

What if you wanted a black and white photo for your post or page, can you have a black and white RGB photo? Yes. You just need to open your image, change the mode to gray-scale, or use one of the adjustments to edit the saturation, and then change the mode back to RGB. Once you remove the color from your image by changing the mode, you are not able to just simply bring the color back just by going back to the RGB mode. This way you are able to have black and white RGB photos for your posts or pages.

Image Format

.TIFF File Format.JPG File Format.GIF File Format.PNG File Format.PSD File Format.EPS File Format

What format does your image for the web need to be, there are so many? .TIF, .JPG, .GIF, .PNG, .PSD, .EPS? There are many file formats for images available, and you have to be careful which one you choose to use, as each have their individual purpose. Again, like with RGB, most browsers will only display certain file formats. Image editing software can also help you change your format, you are able to go under File>Save As and choose which format you would like to use. JPG is great for photographs. .GIF is great for images with transparent backgrounds, so if you are wondering why you have a white background on your image  when you don’t want it there, then try saving your image as a .GIF. .PNG and .SVG are also good formats to be displayed on the web. .PSD and .EPS or .AI files cannot be displayed on the web, and are usually too large to do so. If you have one of these files, you will want to open it and save it for the web as one of the web friendly formats.

Image Resolution

In previous posts we have gone over image resolution, but image resolution is completely different for the web. The web only requires a 72 dots-per-inch (DPI, or pixels-per-inch, PPI). That is a lot smaller than the 300 DPI for printing images. This is because most screens can only display 72 pixels-per-inch. If you upload your image at the full resolution ranging in the upper 200-300’s, your photo may take longer to load and slow down your pages. Slower pages are ranked lower on Google, so you want to make sure that all of your web images are at the smaller resolution as to not slow you down. You can also make this change with most all image editing software by either choosing to save for the web, where it will automatically choose the smaller resolution for you, or by resizing your image using the Edit>Image Size or Canvas Size. Some website and blogging programs will resize your image when you upload it to your pages or posts, so if you have this ability on your site, take full advantage, it will save you a lot of time.

Don’t forget to save your web version of your image separate from your print version, this way when you go to print the same photo, it will not be a bad resolution inadvertently.

Online Image Editors

Since we talked about the need of an image editing program, what if you don’t have Photoshop? Here are two free web-based image editing programs that will take care of all of your web image prepping needs.

Pixlr.com

Pixlr is a free robust online image editor. It is very similar to Photoshop and has many of the same tools that allow you to prepare your images for the web. You can crop and make photo and color edits, and when you are done, you can choose four formats to save it as, and save it to your computer, or even to Facebook or Flickr.

Aviary.com’s Phoenix

Aviary has created their online image editor called Phoenix, which also has many of the features you can find in Photoshop. You do have to create an account to be able to save your images, but this is an easy step, and it’s free! With Phoenix, you can also crop and resize your images, and save them as the format you want to your computer.

Leave a Comment

Previous post:

Next post: