Choose Image Formats for the Web – Part 2

This week continues last week’s discussion on the top five image types used on the web. If you did not see last week’s post, go back to it now to learn about the use of BMP and GIF image files.

JPG/JPEG

Because of the concern over CompuServe’s patent on the GIF format, another format that competed with GIF resulted in the JPG or JPEG format. JPEG stands for Joint Photographic Experts Group and actually consists of a family of formats of which JPG is a member. For the purpose of this discussion, we will consider JPEG and JPG to be essentially the same file format. JPG supports high-definition and high-color-depth images and thus it became the standard for most digital cameras over the most recent years. Note however that the Apple iPhone uses the HEIF format (High-Efficiency Image Format) which you can easily convert to JPG files before adding them to your web pages. Note however that the resulting JPG files are typically larger than the HEIF files. Perhaps that is why the iPhone can pack more photos into the same amount of memory as cameras in other phones. Additionally, most printers support JPG files. Computer browsers and their file explorers (or Apple’s Filer app) support JPG files and can usually show a preview of the image directly from the directory. JPG images can be compressed using a lossy compression algorithm. This means that while compressing the image, the image losses some of its original data for the sake of creating a smaller file size. Think of it as taking closely related colors in adjacent pixels and replacing them with a single common color. On a small scale, you may not notice this loss, but if you were to zoom into the image, the loss of those individual pixels can become noticeable. In any case, JPG has become one of the most popular formats to use to place images on a webpage.

Another advantage of the JPG format is that it supports more colors than GIF files, up to 16 million colors within a single image compared to the maximum of 256 colors in a GIF, making it ideal for digital camera images. On the other hand, it is a bit overkill for simple button images where a GIF file may be your best choice. A major disadvantage is that a jpg image file does not support animation and if the image is compressed too much, the quality of the image can noticeably suffer.

PNG

To rectify some of the problems in both JPG and GIF files as well as to keep the best features of both of these formats, the PNG format, Portable Network Graphics, was created. It was originally developed as a way to sidestep the patent limitations of GIF files and unlike the JPG format, it also supports transparency like a GIF file. The PNG format is lossless and thus preserves the original image quality. At the same time, it supports the full range of color just like the JPG format does while still incorporating reasonable compression which for a web page displaying several graphics can be an important benefit. The one thing that the PNG format does not support is animation, as it is a single-image format. (Both BMP and JPG are single-image formats.) There have been two attempts that I’m aware of for an animated version of PNG called MNG (Multiple-Image Network Graphics) and APNG (Animated Portable Network Graphics), but neither has gained popularity and thus is not supported by most modern browsers. For me, that is no real loss as I believe that the use of animated images should be limited and the support for GIF images on websites meets this limited need.

TIFF

TIFF (Tag Image File Format) will be the last image file format I will talk about here. This format has been a common file type used by scanned images. Because of that, early TIFF files were encoded as black and white pixels only as that was a limitation of the scanners at that time. However, as scanners improved, this format has been enhanced over the years until today it supports a color depth equivalent to JPG files. TIFF files can be saved with no compression, but they also support lossless and lossy compression. One thing that I miss is that there is no support for transparency or animation. I guess that coming from scanned images, there was no need to incorporate this feature. Even beyond the loss of transparency, I personally see few advantages of this image format when it comes to web graphics over JPG or PNG encoded images. Perhaps one advantage of saving an image as a TIFF file with no compression is that you can preserve the quality of an image. It also should be noted that this image format is used by high-end scientific CCD cameras as well as professional photographers, the publishing industry, optical character recognition, and other print applications.

There are many other image formats available through various programs, but most of those image formats are not supported on the web or at least are not supported by all the major web browsers. While you may start from a different image format (like Apple’s HEIF format used by the cameras in their iPhones), you can usually find a program that will let you convert to one of the image format types discussed here.

In closing this two-part discussion on images, let me recommend a free online tool to help you convert from one graphics format to another called FileZigZag which can be downloaded from FileZigZag.

Choosing Image Formats for the Web – Part 1

There are many different image formats that you can choose from but only a few a common to most websites. I’m going to limit my discussion to the five most popular here and give you my opinion about the pros and cons for each of them.

BMP

This image format was one of the first ones used on the web because many early digital cameras captured images using this format. BMP stands for Bitmap image and is a device independent format. Thus, it works well on all personal computers, tablets, laptops, and phone. It can support from 1 bit per pixel (essentially just black and white dots much like a newspaper print image up to 24-bit color which supports over 16 million colors. Early computers supported graphics of only 16 colors. While this was rather limiting, it served the needs of early games and data charting (after all, most charts don’t need more than 16 colors because more than that can be confusing). Over time, as computers supported more color depth (bits), BMP images added more bits per pixel to support images. However, because of the rather simplistic encoding of the colors in a BMP image which used lossless algorithms, the sizes of these images rapidly grew. One advantage is that the format is capable of supporting a transparent color. You will often see reference to an alpha channel with formats that support transparency. With greater bit depth to support more colors and increasingly realistic images, the size of BMP files grew, and they started to take an increasing amount of time to transmit across the internet to a person’s browser. While the format in theory supported compression, it was almost never used. As the Internet grew and the demand for more graphics changed the nature of the Internet, there had to be a better format to transmit images without losing quality.

GIF

The early days of personal computer usage were driven in part by the popularity of newsgroups. However, it was clear to many that newsgroups that only supported text could not present information as clearly as groups that supported graphics. But computer transmission speeds were significantly slower then as anyone who remembers the old dial-up modems can attest to. Therefore, images that did not support compression typically had to balance the use of few colors (color depth), the size of the image, and transmission speeds. A file format that supported data compression to reduce the total amount of data that needed to be transmitted while not affecting the quality of the image was desired. To fill that need, CompuServe, one of the early online service providers in America, developed an image format to download color images from its servers. This format, called GIF, stood for Graphic Interchange Format and was originally proprietary to CompuServe and to those to whom they licensed its use.

As personal computers became more popular in the 1980’s a common format was needed to encode graphics that could be displayed on different computer systems while at the same time keeping the time required to transmit a graphics file as reasonable as possible. This format was originally protected by patents held by CompuServe. Companies that created browsers that supported this format were expected to pay a royalty to CompuServe. However, these patents had expired by 2004. In the meantime, someone came up with a way to add coding to the GIF image that allowed multiple images to be displayed one after the other. While these were still multiple still images that were displayed sequentially, the effect was add simple animation to an image. Early examples were the Dancing Girl and the Dancing Baby. However soon people were adding animated GIF files everyone in their websites. While a little animation is interesting, too much animation becomes distracting and even can seriously affect some people and can cause seizures in those sensitive to flashing images. As a result, The Americans with Disabilities Act, while allowing animated gifs, requires that they either stop after 5 seconds or provide a way for the user to pause the animations. They must still have alt text and they cannot blink or flash (which is defined as three times in any one second) to get attention.

GIF files are still commonly used for buttons, logos, and icons because these generally do not require a large number of colors. In fact, the size of a GIF file is based on the number of colors it needs. While it can vary from two colors, black and white, the limit is 256 colors. On the plus side of this restriction is that these 256 colors can be any of the 16+ million colors possible with the RGB color palette. That is because each gif stores a table of the colors it can use. If the GIF file uses from 129 to 256 colors, the file must use 8-bits to identify the index in the table for each color. On the other hand, if the image is a simple button, logo, or icon with fewer colors, you can reduce the file size by reducing the number of bits used per color. For example, if you remove at least one color from an image with 129 colors so that it only has 128 colors, the resulting gif can be encoded as a 7-bit gif reducing the file size. In fact, utilities can still be found on the internet that can reduce the number of colors in a gif. They typically do this by converting some of the least used colors to other similar colors. Taken to the extreme, a 2-color button can be encoded as a 2-bit image. Each color in the color table requires 3 bytes. One byte is used for each of the primary colors in the RGB color palette: red, blue, and green. However, now instead of requiring 3-bytes per pixel to represent a color, each pixel can simply be defined by pointing to the color in the table. This decreases the image file substantially over the equivalent BMP file.

Another advantage of a GIF image file is that one color can be defined as the transparent color. In other words, when the image is placed on another background, you will see through the portions of the image with the transparent color to see the underlying background image or color. The use of transparency for one color is common for logos to avoid the ‘ugly’ box around an image when the image is placed on a background of a different color.

Next week we will discuss the other three common image formats found on the web.

Dithering vs. Pixelation

Do you know the difference between pixelation and dithering of images on a web page? Read more to find out.

Dithering vs Pixelation, are two terms that many get confused about when talking about the world of web images. Both affect the quality of the image as seen on a computer screen, but they are the result of two very different processes.

Dithering is something that you might encounter in images displayed on a computer that have had their color depth reduced. It is most commonly seen with photos that start with a very high color depth where it may not be easily reduced to the color depth supported by computer graphics. Ultimately, it is a function of the graphics card or the graphics chip of the computer used to display the website. However, on older devices that use an 8-bit definition for each pixel (rather than 8 bits per red-blue-green color), only 256 colors may be displayed on the screen at one time. Why only 256 colors? Because when only using 8 bits, you can only count from 0000 0000 to 1111 1111 which is 0 to 255 or 256 possible colors for each pixel. While that may seem to be a lot of possible colors, it is not enough to truly represent all the colors in a photograph. Therefore, computer systems have two choices, they can Example of color ditheringeither replace a missing color with a color that is close to the original that it can support and thus introduce a color banding effect, or it can introduce noise, dithering, by mixing dots of two or more colors to simulate the missing color. If you look closely at the screen showing a dithered image, you might see some of these individual dots of color. Of course, most computer screens today support millions of colors so dithering is no longer needed.

Perhaps a simpler way to understand dithering is to look at pictures in your local newspaper. Most newspapers publish pictures using black ink on a white or beige colored paper. Yet the pictures appear to have shades of grey. If you use a magnifying glass to view the images, you can see that the image really consists only of various sized black dots on the paper. As the dots either grow larger or are placed closer together, the image appears darker. Fewer or smaller black dots in an area result in a shade of grey. If the dots are small enough, most viewers of the images in the paper do not even notice them. The same applies to the colors used in the Sunday Comics. However, when we are talking about images in the comics, the dots of color are not limited to black ink but could consist of yellow, blue, or red ink. Now that you are thinking about these three colors, think about what color ink you have in your computer printer. Do you have ink for hundreds if not thousands of colors? Of course not. Your printer simulates colors when it prints an image by using small dots of each of these three colors and even black to create shades. When you buy a printer, they usually list the dots per inch, or resolution, that the printer supports when printing. The larger the number of dots per inch, and thus the smaller the dots, the less noticeable the dithering is to create any color and to print color photos. Modern printers can even overlay two or more colors at the same position to achieve different colors without resorting to dithering of different colored dots. (You may have noticed that printing requires red, blue, and yellow ink while your computer screen requires red, blue, and green to produce colors. Perhaps we can get into that difference another time.)

Dithering also occurs when taking a high-resolution audio track such as a 24-bit resolution track and reducing it to a 16-bit resolution. Why do this? First, a 16-bit resolution track takes is smaller than a 24-bit resolution track and second, most people cannot hear the difference until they have extremely good audio equipment and great hearing.

In any case, dithering occurs when reducing the depth of a data stream either by reducing the number of colors in images or reducing the number of bits to reproduce sound in an audio track.

So, what is pixelation? Pixelation occurs when you take a smaller image and attempt to zoom into it, making it larger. Let’s say you start with an image that is 100 pixels by 100 pixels. That means that the image has a total of 10,000 total pixels. Each pixel has its own color. Now double the size of the image so that the image is 200 pixels by 200 pixels. The Pixelated Imageimage now has 40,000 pixels or 4 times as many. In effect, each pixel of the original image now is represented by 4 pixels. But if each original pixel had a single color, what color should the 4 pixels have? The easy solution is to use the same color for each of the 4 pixels. This technique however creates a visible block of each color pixel that degrades the quality of the image. Is it possible to use the color of surrounding pixels to provide each new pixel with a color that smooths out the image? Yes, but even that does not really improve the sharpness or clarity of the image as that would require creating information where no information existed before. While some sharpening is possible by weighing the transition colors, you will not get the clarity that you see on some TV shows where they take a fuzzy picture of a car, zoom into the license plate, and read with crystal clarity the numbers and letters. The only way to truly do that is with a higher resolution camera that supports a high number of pixels.

Anyway, that is all for today. Hope you had a good Easter weekend, Passover week, or Ramadan month for those of you who celebrate any of those.

C’ya next time.

Raster vs. Vector Graphics

I’ve seen many sites with bad images. I mean really bad images! However, that is something that you can easily fix. Let me explain how.

I’ve seen many sites with bad images. I mean really bad images! Generally, I’m not referring to professional sites such as those of large Fortune 500 businesses. Rather, I’m referring to smaller sites, mom-and-pop organizations, non-profits, and public entities such as school districts. Yes, especially school districts. Before I get into details as to why they are bad, let me first define the difference between two fundamental types of images, raster versus vector images.

Raster images are the cause for most of the worst offenders. After considerable thought, I believe I can identify the underlying reason why the graphics on these sites make the sites look bad. To begin, we have to understand how raster images differ from vector images. Raster images consist of individual dots, pixels, of color. If you are using a digital camera, or more likely today, your phone to take pictures, the resulting image is a raster image, one based on individual pixels. The number of pixels in camera images varies from the early days of 640 x 480 pixels or even less to today’s phones that take photos with 4000 x 3000 pixels or even more. The number of pixels will also vary if the images have been cropped to remove unimportant parts of the picture. To view the actual size of your images from within your file browser, you can include the ‘Dimensions’ attribute as one of the columns displayed as shown here.

A screenshot a file directory showing the attribute Dimensions which indicate the size of the image in pixels.

When it comes to displaying these images on a computer screen, the result depends on the zoom level along with the resolution of your monitor. For now, let’s assume that you have not changed the zoom level on your display. Further, let’s assume you have a monitor that displays 1920 x 1080 pixels. Now if you attempt to display an image such as the first one in the above example that requires 2449 by 2203 pixels you will find that the image extends beyond the edges of the monitor. At 100% zoom, the image cannot fit on your screen with one pixel of the image assigned to one pixel of your monitor’s display. Therefore, you have two choices, crop (trim) parts of the image that are not important or reduce the image size by using a zoom factor of less than 100%. Today, you must resize most digital camera and phone images on the screen on your web page.

Resizing an image is easy. Most software that lets you edit images has a resize option. With an image selected, you can select a Resize function that displays a dialog similar to one of the following.

Dialog to resize images from the software PAINT using a check box to maintain the aspect ratio of resized images. or  Dialog to resize images from the software PAINT using a check box to maintain the aspect ratio of resized images.

Most graphics software lets you resize either by percentage or by pixels. If you know exactly the size you want, resizing the image to the exact pixels you need makes the most sense. In any case, the dialog shows you the image size, horizontal and vertical. The dialog shown above on the left displays a checkbox with the text: Maintain aspect ratio. Selecting this option lets you can change either the horizontal or vertical dimensions of the image and the other dimension is automatically adjusted to keep the aspect ratio (ratio between the width and height of the image) the same. In the dialog shown above on the right, the same functionality is achieved by clicking the lock icon which then shows lines connecting the lock with both the Width and Height options to indicate that it will keep the two dimensions in the same ratio.

What happens if you do not maintain the aspect ratio between the horizontal and vertical sizes of the original image? Then you will ‘stretch’ which flattens the image or ‘compress’ which narrows the image compared to the original. For some images which have no obvious natural aspect ratio, this distortion may not be noticeable such as an image of a landscape. However, if the image is of something that the viewer knows the relative height and width or aspect, such as that of a person, the distorted image can be quite unflattering.

Some web design programs support this same capability when adding an uploaded image to a page. These operate in much the same way as the dialogs shown above.

Unless you have the perfect image size to begin with, you generally will either need to expand or shrink the image. What happens when you do either of these two things?

If you start with a small image and expand it, thus adding more pixels, the software cannot create data where there is no data. Suppose you double the size of an image. Where you had a single pixel, you now have a 2×2 square of four pixels. When this happens, what color do you think the pixels will have? Typically, it is the color of the original pixel. This creates a block texture in the image known as pixelation which gets worse the more you expand the original image.

On the other hand, if you shrink an image to half the size of the original image, the program takes a 2×2 square of pixels, each having its own color, and reduces them to a single pixel with some average color. This process works better than expanding an image and thus reducing images is less noticeable to viewers of the image on a web page. However, this occurs at the expense of fine detail which is irrevocably lost. This is most noticeable when there is text on the image or if the user tries to zoom in on the page to ‘see’ details of the image that no longer exists.

I spent a lot of time discussing raster images because they are the norm for most websites and for images taken by digital cameras and phones. But remember I said that there was a second type of image. That is a vector image. The primary difference between a raster image and a vector image is that unlike a raster image which consists of individual dots, a vector image uses line segments and fill areas and a lot of mathematics (which we will not go into here) to ‘build’ the image and color it. As a result, the software can easily scale vector images with no loss of detail because it is just a matter of mathematics to increase the line segments and fill areas. That perhaps is an oversimplification, but the takeaway is that a vector image can typically be resized with no loss of detail. Some graphics programs allow the user to design images as vector graphics. This type of image can be especially useful for things like corporate logos which can then be used in different sizes for different places on the website without having to create a new logo file for each location.

Assuming that most images you use on your website will be raster images, you may want to consider resizing them before you upload them to your web server. Sure, the website, or more specifically, the viewer’s browser, can resize the image for the viewer when the page is displayed. However, this requires the transfer and use of an image that may be substantially larger than the size needed for the page. Remember that the more data that a page requires before it can be built on the viewer’s browser, the slower the page can be rendered. I have seen pages that have over a dozen images that take over a minute to render because each of the images was saved from a 12-megapixel camera and then resized to display as essentially thumbnail images. By resizing the images prior to uploading them to the web server’s file system, you can reduce the amount of time needed to transfer the image file across the internet as well as the time it takes the browser to render it for display on the page. Thus, my general rules when resizing images are:

    1. Crop the image to only show the portion that is important.
    2. Resize the image to approximately the size needed on the web page before uploading it
    3. Upload the cropped and resized image to the web server before placing it on the web page using your site-building tool.

That’s all for this time. Hope you learned a little about how to efficiently use images on your web pages.

What Makes a Bad Website?

Attractive, welcoming websites are not just an accessibility issue. However, building attractive, welcoming websites may make your site more accessible.

When you visit a website, especially for the first time, have you ever had an immediate like or dislike for the site? If so, why? Could it be that it took far too long for the website to display on your screen? Most people get frustrated if a website or even a webpage takes more than 10 seconds, much less 30 seconds. At one time, that was the standard. Hard to believe, isn’t it? Of course, connection speeds were lower back then, but so too were the demands that web designers placed on a website.

Maybe the site color scheme is the problem. I’ve seen some websites with color schemes that almost hurt my eyes when I looked at them. Often the font colors are too similar to the background like a blue text on a black background (or vice versa) or perhaps a lime green on a white background. When the text is too hard to read, I typically just move on to another site. But what if you have no choice. Well, there are ways to deal with this issue in some browsers that have accessibility controls. There are also some add-ins for your browser that can make the text easier to read by changing the text and background colors. But what if the problem is not a solid background color, but a pattern, gradient, or even an image?

Then there is the question of fonts. Some fonts work well across all browsers because they are common such as Arial, New Times Roman, Calibri, and Courier. There are also generic fonts like Serif and Sans-Serif which most browsers use as defaults if the website tries to specify a font that is not installed on that machine. However, there are hundreds if not thousands of other fonts. Some are easy to read. Some are quite decorative (which can mean hard to read). You probably would never create a website using a script type font (handwriting) unless your goal was to give the effect of a handwritten document. Some other fonts are best reserved for posters or possibly titles, but never for the entire document.

It is not just the font choice, there is also the font size, the font style, and the font color which I touched on briefly above. Some of these factors can be easily adjusted by the person’s browser. For example, if the font size is too small or too large, one can in nearly all browsers adjust the zoom factor of the page. Font style is not as easily to adjust. But consider that an entire page of bold or italic text should never be used because both styles should only be used to emphasize individual words or perhaps phrases. Notice I did not include underlining as a possible font style. Underlined text should be reserved for text that serves as a link to another page or site. It should never be used to underline regular text on a page least it confuses a reader into trying to click on it. This is especially a problem when the text is a section header within the text. The viewer may think that because the text is underlined that it is a link to additional information and attempt to click on it. When they discover that clicking on the text does nothing, they may think that the link is broken. Another situation occurs when a page contains only links. Some web designers think that having everything on the page underlined looks bad and they refrain from using the underline style. This can sometimes work if it is obvious that everything on the page is a link, but in any case, the link should still be displayed in a different color and when the user passes over the link with the mouse, the color should change and perhaps the underline appears at that time. On the other hand, if the page is mostly text with the occasional link, color alone may not be sufficient to identify the links which will frustrate the viewer.

What about the websites where it looks like the page designer tries to put all the information on the first page forcing the user to scroll and scroll and scroll to get through the content? While this may be acceptable for a book, it is not acceptable for most web pages especially when different topics are discussed as your scroll down through the page. When the viewer first opens the site, how are they to know where to find the content they are looking for exists within this long scrolling page or if it even exists? Of course, one solution might be to place a Table of Contents at the top of the page which describe each topic to be found on the page with a link that jumps directly to that point in the page. However, instead of doing that, why not put each topic on a separate page and link to the page instead. This method makes more sense even to the web designer because individual pages are easier to maintain. This also brings up the question about navigation.

How easy is it to navigate around the website? Can you get to the information easily from the home page of the site? Can you easily return to the home page when you are finished reading a topic? Is there a hierarchy of topics that go from more general information to very specific information? Then there is the question of how to display the menu. Should you use a series of major categories that run across the top of the page that open a drop-down to the next level in which the individual items in the drop-down display a flyout of more detailed information? This will work if there are not too many levels. After about three or four levels, this type of navigation gets very confusing. Another method uses a side menu which begins again with only the major categories. In this case, each time you drill down a level, the side menu changes to display only the pages beneath that item along with perhaps an option to return to the site’s home page. If you only want to go back one or two levels, you can always use the back arrow button in most browsers to step back up the hierarchy to any point.

Does the text use a lot of jargon or TLAs (that’s Three Letter Acronyms)? Sometimes web designers forget that the jargon or TLAs that they use everyday may not have the same meaning to the viewer or perhaps no meaning at all. For example, if you saw CIA in a sentence would you know if they were talking about the Central Intelligence Agency or the Culinary Institute of America? Using words specific to an industry may make it difficult for some viewers to understand the content of the page.

And while we are speaking of understanding the content of a page, did you know that some word processing programs like Microsoft Word can evaluate the complexity of the text used on the page and compare it to grade levels from elementary school grades through graduate level? Generally, a good rule of thumb is to write using words and phrases that require an 8th grade level of reading comprehension. Unless you are writing for an elementary school level site or PhD scientific study site, this target grade level may be best.

I suppose that I have rambled on enough tonight. Over the coming weeks, I hope to dedicate time to explore these and many more topics in greater detail. How are these topics related to accessibility of your website? Perhaps some of you have already surmised that you can address many of these issues directly while at the same time ensuring that your site is accessible to the most people. In fact, accessibility guidelines may require that you redesign your website and in that process resolve all of these issues. A website that is easy to read and use is not just something needed for people with various vision, hearing, or motion control issues. It is something that benefits us all.

C’ya soon.