Web graphics can increase your pageviews and generate a lot of interest. The down side is these graphics can also be the source of many issues. You have roughly 10 seconds for your web page to load otherwise you run the risk of losing your audience.
In this series, you will learn how bitmaps work, when to use JPEG, GIF, and PNG formats and how to create web page graphics that load quickly. In the last part of this series, you will learn how to use image slicing if your web images are too large to load all at once.
How Bitmaps Work
When you look at a bitmap (aka a raster image) under extreme magnification, you will see that it consists of rows and columns of pixels. Each pixel contains a color, which, when viewed at a distance, creates an image. This works well, but when you zoom into an image it will begin to look ragged.
The image above has been magnified by 1200%. This means that the pixels will become more obvious as the image is enlarged. When using bitmaps for the Web, it is best to use images at the same size at creation or to reduce them. This will reduce or eliminate the above issues.
On the Web, it is important to reduce images to as small a size as possible while retaining the quality of the original. To make sure you get the best results, here are a few things to consider: The final compressed file will depend on the subject matter in the original image. An image with large areas of similar colors will compress more than a complicated image where there are plenty of colors and many transitions. As an example, an image with a clear blue sky will compress more than an image filled multiple textures and patterns.
In the next section, we look at the different formats available to you when compressing files for the Web. These most popular formats are JPEG, GIF and PNG.
What is a JPEG?
The acronym JPEG (Joint Photographic Experts Group) describes a 24-Bit file format designed for compressing photographs, photo-realistic artwork and grayscale images. The JPEG format is used for still images. It is an excellent format for reducing the size of your images; it also stores image data as a 24-Bit format. JPEG also supports 32-Bit files as (CMYK) and 8-Bit grayscale files.
If you want your Web pages to load quickly, file compression is of the utmost importance. To understand how this process works, one needs to think about how big the files will be for Web pages. On the Web, you will be working at “screen resolution.” These days, screen resolution is roughly 96-100ppi (pixels per inch).
Many users use a resolution of 1280×1024 pixels for a typical 19″ monitor, so if you create graphics that are larger, they will be bigger than the full screen and the user will have to scroll to see the entire image.
JPEG is a great choice for sharing images cross-platform. On the down side:
- JPEG is a “lossy” format, meaning that each time you save the image you lose data. If the image is saved too many times, it could develop artifacts, which is where portions of the image begin to clump together.
- It is not possible to make JPEG images transparent, unlike GIF or PNG formats.
- Another issue is aliasing, a staircase effect on the edge of images, sometimes referred to as “the jaggies.” This can be evident if you use a high compression setting.
JPEG works well with full color and grayscale images, and other work such as continuous tone drawings. It is not the best choice for line drawings, images with a few colors or cartoons. In this case, GIF or PNG-8 would be a better choice.
What is a GIF?
The acronym GIF stands for Graphics Interchange Format and is an 8-Bit format. It is ideal for use with images containing few colors, (anywhere from 2-256 colors) such as cartoons, lettering and line drawings.
GIF images have a small file size and they tend to load quickly. When using GIF, the temptation may be to reduce the color palette as much as possible, but going too far can create banding and color shifts. Another thing to be aware of is that if you have an image in the JPEG format and you want to convert it to GIF or PNG-8, be aware that there may be a color shift.
GIF offers 1-Bit of transparency, but this can be unpredictable and can create halos around images. If this is the case, I recommend using this transparency option to match the color of the Web page background, if possible. Note: 1- Bit refers to an opaque color (as in black) or completely transparent with no gradations in between. If transparency is crucial, use the full version of PNG. The down side is that this will increase your file sizes.
What is the PNG format?
Another image option is PNG (Portable Network Graphics) format. PNG offers up to 48-Bit color and 16-Bit grayscale. Unlike JPEG, PNG is lossless, so no matter how many times you save the image, no data loss occurs. It also offers an alpha transparency of 8-Bits (256 shades). This allows you to create effects such as anti-aliased text, drop shadows, glows, gradient fades, etc. This also allows you to create tight masks.
PNG also offers Gamma correction cross-platform (gamma refers to the process used by many image manipulation programs to measure image brightness and contrast). PNG is capable of adjusting these settings automatically so images display properly cross platform.
On the down side, PNG files tend to be five to ten times larger than a JPEG image and there is no support for animation. The only area where they come close is with the PNG-8 format, which creates files that are sometimes smaller than a GIF. If you use the PNG format, do not use PNG to compress JPEG files. This can cause problems with image artifacts.
In our next issue, we look at several strategies of compression for JPEG images using Paintshop Photo Pro X3.
