So many people ask me about file formats for web designers and web developers. Whether they be account managers, project managers, or even digital strategists want to know the difference between file formats that work best while web designing. For web designers and web developers and anybody on the creative side of advertising this is an easy one… but this post is for everyone else.
Quality vs. Size
When designing for the web we want the smallest size possible, making your site load faster. You also want your images to look good. So… you need to find a balance between having a clean professional image and having a small enough file size.
Types of Image Files
There are many file types, but these are the standards for web development: JPEG, GIF and PNG.
Bitmap Images (In General)
Bitmap graphics are the most common graphic format (and the above mentioned formats fall into this category)in use on the web and, indeed, on the computer.
Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is small; a single image may be composed of hundreds of thousands of individual pixels. Much like cells revealed from a piece of tissue when seen under a microscope, these pixels are only clearly and individually visible when the image is magnified (fig 1).
A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors. Complex fills, shading and gradient effects can easily be rendered. The Bitmap image offers as much freedom as an empty canvas.
In Bitmap graphics, there is an immutable connection between pixels and the image they compose. When a Bitmap graphic is saved, the computer is really saving an exact visual picture of the image: this pixel goes here and is this color; this pixel goes there and is that color, and so on and so on.
This connection is responsible for the effects seen when resizing a bitmap graphic. Given three image sizes – an original, one smaller, and one larger – each will naturally contain a different number of pixels. Pixels do not change sizes, but the image has. It takes more pixels to fill the volume of a larger space, fewer to fit into a smaller space. (fig 2)
When attempting to enlarge or interpolate bitmap images… the computer must add additional information (pixels) to the original image to allow it to fill the new larger area. Since there is no source for this information, it must be interpolated based on what is currently available in the image. Because the computer is not especially skilled at guessing games, Bitmap images that have been scaled larger are frequently blurry. After extreme size increases, individual pixels “blocks” are more apparent (as though we held a magnifying glass up to it) and the image is said to be “pixilated.” An enlarged image will never be as clear as the smaller original. This blurriness also occurs for the same reason any time a Bitmap graphic is manipulated, by rotating, skewing or distorting.
JPEG
JPEG is a compressed file that has very good quality standards. Because of its compression, colors and data are squeezed out of it to create smaller file sizes. This can cause some blur with images with sharp edges, which is great for photos / images. If you look at a photo there are no straight lines or edges. Everything is blended together, which why JPEG is great for photos.
GIF
GIF is used by web designers more for illustrations rather than images. Transparency and transparent backgrounds is a feature that is supported by GIF.
PNG
PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG. PNG can also support transparent backgrounds. The only downside to a PNG file is that some old web browsers don’t support PNG. This problem is becoming less and less a concern, but it still is a concern with older browsers.
Then we have VECTOR File Formats
Rather than being composed of pixels, Vector graphics consist of points, lines, and curves which, when combined, can form complex objects (fig 3). These objects can be filled with solid colors, gradients, or patterns.
Vector graphics are mathematical creations. For this reason, the programs that are used to create them save instructions on how the image should be drawn, rather than how it looks. They can be redrawn at any size, in any position, without losing any quality. A vector graphic resized to 5 times its original dimensions is simply reproduced, exactly, at the new size. It can also be freely manipulated without losing coherence, like a rubber band that can be stretched an infinite number of ways.
The price of this scaling flexibility is that Vector images must remain relatively simple in comparison to Bitmap images. It is next to impossible to render the nuances of a photographic image in a vector editor; as a result, illustrative vector graphics have a distinct look and feel, even when produced in detail.
However, Vector graphics are ideal for producing artwork which frequently needs to be presented in different sizes or colors. Logos especially fall into this category. A logo produced with a vector application can be blown up to fit on a billboard or scaled down to adorn a letterhead with no loss of quality.
Flash File Format
Flash started out with it being a scaleable vector file format for the web (I think back in 1997). It requires a plugin to allow it to operate in browsers which is now ubiquitous (98% of all internet users have version 9). Recently with Web 2.0 being a reality and less of a buzz word, javascript has taken much of the low hanging fruit from flash. Rollovers, animation, slideshows, transitions can be done with jQuery and related javascript. Flash has now become the defacto standard for video online. Flash also remains the number 1 tool for creating rich interactive content on the web such as animations, 3D web based interactions and animations (CS4 and Papervision), and now Flash content has the ability to be searched by Google and Yahoo ( still should not really be used to count on high SERP’s ). Adobe Flash created content by web designers and web developers is delivered at an amazingly low file size considering what kind of “web interactive experience” is output — and those web designers and web developers who started with it 10 years ago have a big leg up… being able to create stunning content with amazing quickness and efficiency. Flash gurus can create creative ways to make content very manageable ( which make updating web designs easy ). One reason Flash design has become so popular is due to it’s wide user base — allowing designers and developers to share ideas and propel it’s use of amazing interactive content into it’s ubiquitious form.
