Week 13 Page 11: Production Issues
A Few (Very) Quick Production Tips for Graphics |
|
Here are a few production considerations you should be aware of when creating graphics for the web: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Download SpeedGraphics and animation may make your site visually interesting, but they also have the potential to slow it right down (and scare off your audience!). Using graphics and video in an online design is a continual balancing act between creative freedom and bandwidth limitations. Of course, bandwidth has greatly improved and most people have access to high-speed Internet connections at home but it's still important to keep file sizes in mind. This is even more essential now that many people are using mobile phones to access information on the web using phone networks. Data download size and speed is important to them! Here are few ideas for keeping your site's file sizes under control. Minimize the use of images:A few well-chosen graphics are better than a page-full! For text and background color, try to use background color rather than an image. This is particularly important now that more people are accessing the web using mobile phones. Use the right resolution and size:Reduce the resolution of your images to 72 dpi. Also make sure that your images are saved at the right dimensions — you should not "shrink" images once you import them into Dreamweaver (or equiv.). Insert width and height parameters into the HTML (Dreamweaver does this automatically) — it helps the browser to know the image dimensions before it downloads the file. Also think carefully about making your images responsive to different device screen sizes. Keep your image dimensions small:Don't use huge images unless you absolutely have to. Pinpoint the best part of your image and crop away the rest! Explore the idea of thumbnail image galleries if you want to display portfolio or gallery images at large sizes. Use a small tiled image to create a page background. Optimize your images:Use Photoshop (or equiv.) to reduce the file size of your images (Save for web and devices menu). Make sure you select the right format for the image: .gif or .png for images with large areas of color, .jpeg for photos and images with complex colors. Reduce the number of colors in gif image color palettes as much as possible. For .jpeg images: use slight blurring on the image if you can get away with it (JPEG compression prefers images with few details, subtle color gradations, and few hard edges). Here is a good article on the benefits of optimizing and some techniques for optimizing PNG and JPEG images: Of course, if you reduce your images to minimal file sizes, the quality is seriously impacted. Look at the thumbnail images at this site:
Reuse images:Once an image is displayed in a browser, it is stored in the browser's cache and doesn't need to be downloaded again. Navigational menu bars/icons, lines, dingbats and logos are great candidates for reuse since they usually appear on every page. Just make sure you are linking to the same image each time and not a copy in another folder. Find ways to reuse your images! Consider using image "sprites" -- a single file with multiple images. The correct image is then displayed using x,y coordinates. Use background fills or tiling:To create different background colors use background color settings or small tiled images. The tiled images can create interesting image effects (e.g. grain, pattern). Make sure the edges of the tiles are not obvious or obnoxious! Limit animations and video:Animation and video are nice but not essential. Since they are a greater burden on bandwidth, only use them when they add significantly to the content and the message. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Anti-aliasingIf you create graphics with transparent backgrounds, make sure the edge of the remaining image does not have a halo of light or dark pixels around it (called anti-aiiasing artifacts) that show against the web page background you're designing). This is easy to do in Photoshop (see the article under optimization)... If you're creating a .GIF or .PNG image, just select the matte color that corresponds to the background. Artifacts are a sure sign of tacky design! You may also encounter anti-aliasing artifacts if you use clipart from the free archives online. Here's a sorry example! And here's a website with the same problem (perhaps it's deliberate!): http://taylorssteakhouse.com/ Links to an external site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Monitor Brightness InconsistenciesBeware! PCs and Macs do not display images in the same way! If you do your production work on the PC, the images on the Mac will be noticeably lighter. PC images look much darker. There can also be variations on the same platform since most people change the brightness of their monitors and don't usually calibrate them. It's definitely worth checking your uploaded site design on a variety of computers!! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JPEG moire effects and artifactsBe sure to select the right image format for your graphics. JPEGs are not ideal for images with consistent flat color (use PNG format for large flat areas). JPEG compression will create strange ripples and moires in large areas of color. Look closely at the type on the poster below and you can see the jpeg moire effect. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Broken LinksCheck that your image links work! This may seem very basic, but sometimes the links will reference your hard drive instead of the online image and you will never realize! It's a good idea to look at your site on someone else's computer... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Keep your high-resolution originalsIt's always a good idea to keep a high resolution original version of any images for your site. So before you change the resolution to 72 dpi, always make a copy. You never know when you might need to enlarge or change the image! I make a special folder called "original artwork" to store all my high-res images in. If you're scanning the artwork/images, make sure you scan it at a higher resolution (at least 150-300 dpi). |