Servage Magazine

We all have appreciation for respectability on the web and decent layouts of web content. This is why seasoned web designers favor pixel-perfect icons and typography online. The desired result of design pros is always to display expert quality while providing brilliantly performing sites that stand out in the crowded, world wide web. Many tech-savvy clients also insist on well polished work in their projects. Despite great effort, many web designers often end up with a product that doesn’t meet expectations and at times, causes disputes between client and developers. From my extensive experiences with site design, I can recommend some useful ways for obtaining pixel-perfect results; pixel hinting is one of ...

Meet the Formats Once you have your hands on some images, you need to get them into a format that will work on a web page. There are dozens of graphics file formats out in the world. For example, if you use Windows, you may be familiar with BMP graphics, or if you are a print designer, you may commonly use images in TIFF and EPS format. On the Web, bitmapped (pixel-based) images need to be saved in one of three formats: GIF (pronounced “jiff” or “giff’), JPEG (“jay-peg”), and PNG (“ping” or “P-en-gee”). There is a fourth format I want you to know about, SVG (Scalable Vector ...

Photoshop also asks if you’d like to start with your own optimization settings or let Photoshop select GIF or JPEG automatically. Curiously, PNG is not an option for automatic selection, so start with your own settings if you want to save as PNG. Optimization in Review If this collection of optimization techniques feels daunting, don’t worry. After a while, they’ll become part of your standard production process. You’ll find it’s easy to keep your eye on the file size and make a few setting tweaks to bring that number down. Now that you have the added advantage of understanding what the various settings are doing behind the scenes, ...

Optimizing JPEGs JPEG optimization is slightly more straightforward than GIF. The general strategies for reducing the file size of JPEGs are: • Be aggressive with compression • Use Weighted (Selective) Optimization if available • Choose Optimized if available • Soften the image (Blur/Smoothing) This section explains each approach, again using Photoshop’s and Fireworks’ optimization tools. Notice that there is no color table for JPEGs because they do not use palettes. Before we get to specific settings, let’s take a look at what JPEG compression is good at. This will provide some perspective for later techniques in this section. Getting to know ...

  Both GIF and PNG formats allow parts of an image to be transparent, allowing the background color or image to show through. In this section, we’ll take a closer look at transparent graphics, including tips on how to make them. Remember that there are two types of transparency. In binary transparency, pixels are either entirely transparent or entirely opaque, like an on/off switch. Both GIF and PNG files support binary transparency. In alpha (or alpha-channel) transparency, a pixel may be totally transparent, totally opaque, or up to 254 levels of opaqueness in between (a total of 256 opacity levels). Only PNGs support alpha transparency. The advantage of PNGs with alpha transparency is that ...

Technically, all you need to create SVG graphics is a text editor (and genius visualization skills, as well as heroic patience!), but you’ll be much happier having a graphics program doing it for you. Fortunately, in Adobe Illustrator, you can choose “SVG (svg)” from the Format menu when saving a drawing and ta da—SVG file! If you don’t have Illustrator, try downloading the Inkscape image editor, which is made specifically for SVG (inkscape.org). It is available for Windows, Mac, and Linux. It takes a little getting used to, but you can’t beat the price (free). Adding SVG to a page An SVG image can be ...

GIF compression GIF compression is “lossless,” which means that no image information is sacrificed in order to compress the indexed image (although some image information may be lost when the RGB image is converted to a limited color palette). It uses a compression scheme (called “LZW” for Lempel-Ziv-Welch) that takes advantage of repetition in data. When it encounters a string of pixels of identical color, it can compress that into one data description. This is why images with large areas of flat color condense better than images with textures. To use an extremely simplified example, when the compression scheme encounters a row of 14 identical blue pixels, it ...

So far we have focused on the tried-and-true bitmapped web graphic formats, but there is another up-and-coming option that I’d like you to be familiar with. It’s somewhat misleading to call Scalable Vector Graphics (SVG) “up-and-coming” because the specification has been in development since 1999 and it became a Recommendation in 2003, but thanks to improving browser support, we may finally be able to take advantage of the benefits it has to offer. As I mentioned at the beginning, SVG is a bit of an oddball. Unlike other web image formats, SVG is a vector image format, meaning that it contains instructions for drawing shapes rather than grids of pixels. This makes SVG ...

  It is possible to add transparent areas to images that have already been flattened and saved as a GIF or PNG. The GIF containing a yellow circle on a purple background that blends in fine against a solid purple background, but would be an obvious square if the background were changed to a pattern. The solution is to make the purple areas transparent to let the background show through. Fortunately, most graphics tools make it easy to do so by selecting a pixel color in the image, usually an eyedropper tool, that you’d like to be transparent. In Photoshop, the transparency eyedropper is found on the Color Table dialog box (Image ➝ Mode ➝ ...

  When optimizing GIF images, it is useful to keep in mind that GIF compression works by condensing bands of repetitive pixel colors. Many optimization strategies work by creating more areas of solid color for the compression scheme to sink its teeth into. The general methods for keeping GIF file sizes in check are: • Reducing the number of colors (the bit-depth) of the image • Reducing dithering in the image • Applying a “lossy” filter • Designing with flat colors   Reducing the number of colors The most effective way to reduce the size of a GIF file, and therefore the first stop in your optimization journey, is to reduce the number of colors in the image. Although GIFs can contain ...