A bitmap is a mapped array of pixels that can be saved as a file.

Both JPEG and GIF are bitmap graphic formats. Currently, the only other way to store an image is as a vector graphic. You can’t easily scale bitmap images, but you can control every single pixel and thus achieve many effects impossible in vector graphics. Conversely, vector formats offer advantages of scalability and lower bandwidth requirements. When you compress a bitmapped image, you suck out some of the visual information.

To bypass this, the portable network graphics format (or PNG, pronounced “ping”) was designed to store a single bitmap image for transmittal over computer networks without losing this data.

Bit depth describes the file size of an image by orders of magnitude.

When wrangling with file size versus image quality, it’s often important to minimize the bit depth of an image while maximizing the number of colors. To calculate the maximum number of colors for an image of a particular bit depth, remember that the number of colors is equal to two to the power of what the bit depth is. For example, a GIF can support up to eight bits per pixel, and therefore can have as a many as 256 colors, since two to the power of eight equals 256.

To crop means to cut the pieces of an image that you don’t need.

Cropping differs from resizing because when you crop an image you retain the dimensions of the image. Resizing an image actually shrinks the image into smaller dimensions.

Dots per inch (DPI) measures the resolution of images on a screen or printed page. The more dots, the better the resolution

Producing images for the web invariably means minimizing the number of colors (and therefore the file size), and the index color system is another step in this squishing process. With a 216-color palette loaded, Photoshop will map an image to those colors when you move it into index color mode. While this helps the compression and allows you to choose bit depth, it also makes the colors dither, or shift numerically, to the palette. One way to compensate for dithering in the index mode is to use a histogram, which is basically a bar graph of each color’s frequency in the image. In most image-processing programs, you can manipulate the histogram and determine how much weight to give certain colors in the resulting palette.

If a computer-displayed image is interlaced, then it is rendered in alternating horizontal lines.

For example, browsers display interlaced GIFs in alternating passes, skipping every other line and rendering a kind of blurry image first and then sharpening it on subsequent passes. This is useful if you’d like your viewers to get a general idea of the image while they are downloading it. Interlacing for GIFs was designed to make bigger images quicker to download, but the problem is that an interlaced GIF actually has a larger file size than a non-interlaced GIF, so use this method cautiously.

If you’re at all interested in e-biz, you’d better get serious about tracking webographics. A user’s webographic profile includes platform (Mac, Unix, or Windows), browser make (IE, Netscape) and model (3.0, 4.0), and connection speed (T1, 28.8, 14.4). Each of these factors can have a dramatic effect on a user’s experience, and every developer must decide whether to build a site that’s accessible to everyone (meaning fancy cutting-edge doodads are out) or create something really cool that won’t work unless users upgrade. We, of course, recommend the former.

Firefox and IE displaying canvas graphics elements side by side.
Picture courtesy Vladimir Vukicevic’s blog

According to Mozilla engineer Vladimir Vukicevic, Internet Explorer isn’t adapting to the next generation of web standards fast enough, so he’s going to have to do it himself.

Vukicevic has been working to introduce HTML 5 graphic canvas elements to Firefox. As we mentioned in our preview of Firefox 3.1, canvas elements introduce the ability to render two dimensional, and soon three dimensional, graphics directly through web pages without a download. The graphics are part of the next-generation HTML 5 standard, and it’s something Opera and Safari have already implemented.

The problem is the leading browser on the internet, Microsoft’s Internet Explorer, doesn’t support Canvas elements and have announced no plans to support it in the future. If you were a Mozilla developer behind a cool new feature and you knew people weren’t going to use it until the leading browser on the web implemented it, you might feel tempted to lend the other browser a hand.

Vukicevic did exactly that. His ActiveX component adds the ability to see Canvas elements in Internet Explorer exactly the same way Opera, Safari or Firefox 3.1 users will. According to Vukicevic’s blog post:

“Canvas is just one piece of the full modern web platform, but because it’s so self-contained, it lets us experiment with pushing the web platform forward even for browsers that have fallen behind (or that might not be interested in an open web).”

The code isn’t finished yet. There are still some graphic implementations needed to bring the feature up to standard. Even more daunting, there are installation issues with Vukicevic’s solution:

“Currently, the experience is pretty crappy… In theory, with the right signatures, the right security class implementations, some eye of newt, and a pinch of garlic, it’s possible to get things down to a one-time install which would make the component available everywhere.”

Still, this is great news for Internet Explorer fans. HTML 5 technology aims to bring multimedia elements, such as audio, video and graphics to your browser without depending on third-party media solutions. The standard, if implemented among all browsers, allows web developers the tools needed to ensure the same user experience no matter what browser you choose to use.

For the rest of us, it means a seamless and rich multimedia experiences in our favorite web pages — no more missing plug-ins or add-ons.

However, Internet Explorer hasn’t been very open to adapting to developing standards as Opera, Safari and Firefox has. In part, this is because it is pushing its own .NET based technology, including its Silverlight multimedia browser plug-in, to achieve the same goal. Pushing adoption of its technology instead of web standards such as HTML 5 (using the weight of Internet Explorer’s leading market share) means the company has more power to influence the future of emerging internet technology.

This is where Vukicevic’s add-on is so unique. In a way, it forces Internet Explorer to play along with the web standards community without its direct involvement. In turn, web developers will be more apt to use the technology. And if all browsers use the same standards, it means rich internet multimedia for all.

Pikipimp is a fun new online photo service that allows you to edit your photos Mr. Potato Head-style, adding in hats, beards, bikinis, jewelry and more to create new images.

To use Pikipimp upload a photo to the site and then drag-and-drop supplemental images into your picture. You can then drag, rotate and resize the beards, bikinis and other items to fit over the content of your image.

Below the main editing area is a layers “palette” with options that amount to a stripped down version of Photoshop. You can drag-and-drop to re-order the layers, control the transparency and manually enter dimensions.

When you’re editing and resizing the images may at times be blurry or pixelated to reduce load time, but clicking the “preview image” button will show the sharpened final result.

When you have everything just the way you like it, you can save the image and Pikipimp will generate some cut-and-paste code you can post on any page you want. There’s also a link to download a .jpg copy of your creation.

The photo below was at some point Wired.com columnist Tony Long who I felt, like the rest of us here at Wired.com, could use a makeover into a Nordic Jesus Pimp.

Pikipimp isn’t going to change the world, but it is an impressive piece of online software and a fun way to while away the the last few hours of your monday.