When selecting images, you also need to make sure you are selecting the right type of image and saving it correctly if you are given an option.
Most pictures on your computer are made up of a matrix of pixels – short for picture elements. These picture elements are the smallest unit your image can be broken down into, and are given a color value. The more pixels, and the more information about the color, called bit-depth, the larger the image will be.
Generally, most images are either 8-bit, which means they can show at most 256 colors, or 24-bit color, which means they can show approximately 16 million colors. There are other bit depths available, but they are rarely used on the web, or may not be used at all.
Generally 8-bit images will choose from a pre-established color pallet, while a 24-bit image will use 8-bits for each of the three color channels, RGB, or Red, Green, and Blue, to represent almost any color we can see.
Non-Web Graphic Files
Sometimes you will be given an image which cannot be displayed on the web.
For example, it is a type which isn’t commonly supported in web browsers because the image size tends to be large, like a camera RAW file format, or is using a format like BMP, TGA, etc. which are not widely supported in modern imaging programs. You may also get files from a designer which is typically used by a designer, but not by other people, such as an Adobe Illustrator (.ai) or an image that uses the CMYK color format. You will need to convert these to something that can be viewed online, unless you are only making it available for download purposes.
Now often, you will want to keep these source files, so you have originals to go back to in case a modification didn’t work as you intended. I keep originals of all the files I can, so if we need a large resolution, or clean image without edits, there is always a clean source file.
JPEG
JPEG is one of the original web file formats, however it existed before the web. The file format is maintained by the Joint Photographic Experts Group, and they are responsible for changes over the years.
It uses a lossy variable compression, meaning that the quality of the image degrades as the quality score goes down. If you look at highly compressed/low quality JPEG images, you will see a “blocky” or “chunky” quality of the image as in the example provided below.
This has to do with the way the compression works. JPEG looks to see how similar, or different, a color is compared to the color that is next it. As colors move, or quality settings force large steps between pixels, artifacts appear in the image.
An image which has drastically different colors side by side (for example an image with a lot of text) does not appear well as a JPEG. However, images where there are subtle changes to color, like in most photographs, do well.
Even at the highest quality settings, there is some degradation, however, it is usually quite minimal. So saving and resaving a JPEG file should be avoided if at all possible.
In a nutshell:
- managed/controlled by Joint Photographic Experts Group
- uses the extension jpg most often
- good compression for small files sizes
- lossy compression – this means that the higher the compression, the worse the image will look
- compression quality can be set to store larger files/better quality to smaller files/lower quality
- always uses 24 bits of color (~16.7 million colors)
- good for photos or images with lots of color
GIF
The Graphics Interchange Format, or GIF, is the second of the original file formats for the web that is still used today. GIF is pronounced JIF, because that’s that way the originator of the file format said it was to be called. It makes little sense, since the G stands for Graphics, which is a hard “G”, but this is an argument for another time and place.
GIF restricted you to 256 at most, or sometimes 255, colors out of a pallet of approximately 64,000 colors. So it didn’t work real well for photo types of images, however it had a couple of strong things going for it. You can actually reduce the number of colors in the pallet in some cases.
First, you could specify a color that would be used to determine if the pixel was transparent or not, so now you could blend a foreground image with your background.
Second, it supports up to 8 bits. This meant, especially important for early days of the Internet when people used dial-up modems and were limited in speed, you could have a 2,3,4, etc. bit image, which had fewer colors, but was also smaller in size – and thus faster to download.
Third, GIF had a built in compression algorithm that worked really well if sequential pixels were the same color. So cartoon style images, charts, etc., could be saved really small.
Note: The pixel on the same line next to it had to be the same. The worst images had pinstripes because the colors would constantly be changing.
Finally, there was an unintended bug in the GIF format. That’s right, in this case, a bug actually became a feature. If you didn’t properly set the end of file marker, it went to display the next set of data over the first image. When people learned how to use this bug, it allowed for someone to build animated GIFs, and now simple movies could be played in a small file format.
Unfortunately, GIF had a big problem. The same compression that everyone loved about it was copyrighted, and the developers of that algorithm wanted royalties from tools that used it to create GIFs. Note: This copyright has expired and is no longer enforceable.
In a nutshell:
- stands for Graphics Interchange Format
- 8 bits of data total (256 colors max)
- allows for one color to be transparent
- allows designer to specify fewer colors which usually result in smaller files
- good for line art, cartoons, and text
- bad generally for photos
- supports animation due to an error in the file format
PNG
The legal issues with GIFs led to the rise of the Portable Network Graphic or PNG file format. PNG was good at compression of similar types of files that GIF was good at. However, it could also handle up to 32 bits of information per pixel. This was supposed to help it be “the” web image format as it could do full color like JPEG, was lossless in its compression, and allowed varying levels of transparency.
In reality however, the PNG compression wasn’t quite as good as GIF, so files were slightly larger, and for photographs, the compression didn’t work well at all. This made the files much larger than a JPG, often 5 to 10 times larger.
When you need to have a fast website, a large 32-, or even, 24-,bit PNG just didn’t make sense.
We do use PNG images for smaller graphics, and they are clean, and well supported, but it never caught on like intended due to these limitations.
They have replaced a lot of the GIF files, but not all of them.
In a nutshell:
- stands for Portable Network Graphic
- supports 8 bits (256 levels) of transparency
- IE 6 and prior do not properly support transparency in pngs (we pray this isn’t a consideration for you any more however)
- provides loss-less compression
- 24 bits of color (16.7 million)
- photo type files are larger than jpeg
- line art/illustrations are usually smaller than jpeg
SVG
Scalable Vector Graphics is one of the most recent additions to the web image formats which have caught on to all browsers. However, instead of using a matrix of pixels to create an image, it used a series of mathematical calculations to define shapes, and make an image.
The plus size of this, is that images can be scaled larger or smaller without a loss in the quality of the image. Also, some images can be represented in much smaller file sizes compared to saving it as a pixel based file format.
Logos, charts, graphs, and other images of these type seem to do well with SVG images. However, if you were to convert a photograph into SVG, you’d probably run into an issue. Not only would the image be large, possibly larger than the equivalent JPEG, the processor on the computer has to calculate the image to display. Complex images will burn through battery life, and slow the rendering of the image onto the screen for older computers and/or mobile devices.
So know when to use the file format, and when to skip.
Types of Images on the Web was originally found on Access 2 Learn
