Preparing Web Graphics
There are lots of things that make the internet a unique challenge for graphic designers, photographers, and illustrators. People in visual fields who have perfected their techniques over years may find that designing for internet media introduces them to a whole new mode of thinking and forces them to reconsider choices that might be obvious in a designing-for-print situation.
.Pngs? Not quite as small as .jpgs or .gifs, but have the benefit of still-pretty-small filesizes that do not blur an image. They also allow for transparency AND millions of colors–bringing you the best of both .jpgs and .gifs. Overall, this is the highest quality image type with a still-manageable file size. One caution when using transparency in .pngs — Internet Explorer 6 totally can’t deal with it. It shows up as what one of my clients called “ugly gray boxes”. IE6 is generally a sucky browser and I encourage people to switch to a better browser, or at least upgrade, but you want to consider your audience. If it’s possible that many of them will be using Internet Explorer 6, steer clear of designs that are dependent on transparency in .pngs.
But let’s get past the idea that the internet and web development are these big scary monsters that normal people aren’t smart enough to understand. Web design is a specialized trade, and like any other specialized trade, it is accessible to almost anyone who is willing to put in the time to learn the standards and the basic way things work. Making images and graphic ready for the web, similarly, is not a difficult feat when you understand the basics.
For starters, let’s talk about RGB vs. CMYK. If you’re familiar with visual media, this is very basic for you, but let’s go through it anyway: CMYK stands for Cyan, Magenta, Yellow, and Key (”Key” is black). RGB stands for Red, Green and Blue. Basically, two different standards of rendering full-color images. CMYK is used almost universally in the printing world; RGB is used pretty exclusively on computer and television screens. Conversion can, obviously, affect the color composition of your image. So Rule Number One: Design your images in RGB.
Rule Number Two is to be familiar with your main file types. Three file types that browsers recognize universally are: .gif, .jpg, and .png. Each has its own limitations and advantages–and it’s important to know them in and out so that you can choose the appropriate file type at the appropriate time.
.gif files are best described as simple and small. They are limiting in some ways because they hold only a limited number of colors. The benefit of this is that it cuts way down on your file size. Gifs are very small and thus very easy for browsers to load quickly. Another very cool trait: .gifs allow for transparency. This can be immeasurably helpful in creating a seamless website. Say you want to, for example, put an image with rounded-off corners on your website. If your website’s background is white, that’s easy enough–just use digital editing software like Photoshop to create white space where you would like the corners to round off. What if you want to put that same image on a different website–one that has a patterned background? The answer is transparency. Your background shows right through, and your image looks just the way you want it to.
Of course, the problem with .gifs come when you want to use a many-colored image, such as a photo. You try limiting a color photograph to 216 colors: the results will be ugly, fuzzy, stippled–or possibly all three. That’s where .jpgs come in. .Jpgs can work with as many colors as your monitor can show, and they also compress to a very small filesize. They do not, unfortunately, support transparency. They do have the excellent feature of letting you choose their quality–ranging from pretty low and blurry to extremely true-to-life. The quality choices correspond with filesize–however, even high quality .jpgs compress pretty small, so I’m in favor of keeping your quality in the “medium” to “high” range. You also have the option of allowing your image to load in a series of three to five “scans.” (Ever load a website and you see a blurry image, then it gets a little clearer, then it loads completely?) Generally, more scans will compress your image a little better, and also let people with slower connections see something while your images are loading.
Now that you have a basic idea of what file types you’re using when and where, we’ll focus on Rule Number Three: Appropriate Size and Resolution. Generally, you don’t need very high-res images for web — you want to keep your filesize down. 72 dpi is a generally accepted standard for web images. I like to go a little big higher with resolution (possibly just because I’m a graphic design nerd). Use your judgment, and find the lowest resolution that still looks good and that you can live with.
Remember that browsers think of images in terms of pixels, not inches. If you have a 10″x10″ image at 72 dpi, that equals out to 720 pixels by 720 pixels in browser terms — larger, FYI, than a lot of browser windows. Most web designers try to design for a browser width of 780 - 1000 pixels, to maximize the number of viewers who will be able to see it without scrolling. Try to keep this in mind when choosing your image’s size.
Optimizing your images for the web is something that becomes second nature with time and practice. You’ll develop favored ways of minimizing file size while maximizing quality, as well as your own opinions about how universally your images can be seen vs. how good they look to your target user. If you need some advice along the way, we hope you’ll contact Luck for Laura on myspace: www.myspace.com/luckforlaura. We strive to educate about image, identity, and self-promotion as a general public service.
prepared for webbilia.com by rorie kelly of Luck for Laura
