New pages:
Dump pg. 4
Vectors pg. 2
I also put new stuff up randomly on the HTML Experiments page, so check in there every once in a while. If you're following me on Twitter, you see all of that content as it goes up.
Sunday, January 9, 2011
Site update
New pages:
Dump pg. 4
Vectors pg. 2
I also put new stuff up randomly on the HTML Experiments page, so check in there every once in a while. If you're following me on Twitter, you see all of that content as it goes up.
Thursday, January 6, 2011
Let's Be Formal
Warning of those who have a tendency to tl;dr - this is going to be long and technical. If you're brave enough to stick it out through this post, you'll understand the major formal qualities of filetypes in digital image making. I'm going to limit this discussion to popular filetypes exchanged on the web. From raster filetypes, we'll look at JPGs, GIFs, PNGs, and also BMPs to explain concepts behind the other types. I also will explain general qualities of vector images, as they are used online, but as of yet are not as widely supported as raster images. Lastly, all of this is heavily annotated with links to Wikipedia, because their sample images of concepts are very helpful.
Raster Images - the Bitmap
Raster images are essentially two-dimensional grids of color values, called pixels. The most basic qualities that all raster images have are a resolution, and a color depth. These basically just mean that each raster image has a fixed width and height, and a number of possible color values that can exist in the grid. When computers first started becoming popular, screen resolutions were low and computers could represent very few colors, if any. Nowadays, the standard number of colors that a computer can display is about 16.7 million. Each pixel displayed on your computer screen is a value made up of three bytes - one for red, one for green, and one for blue. Typically for colors on the web, values are expressed in hexadecimal, so for example a bright red is #ff0000.The code denotes that the red byte be set to its max value of 255, or #ff, and that green and blue are set at #00 each.
The most basic way to represent a true color image as a file is to simply lay these three-byte images out in a grid. The most common filetype that does this is the BMP (bitmap), well known to MSPaint aficionados. However, as true as the colors are, the files tend to be very large at high resolutions, making them unsuitable for web distribution. Thankfully (sort of), the human eye is only capable of distinguishing about 10 million colors on a good day. This means that we can cheat, and reduce our palette to reduce file size.
Image Cheats - Compression, Indexing and Dithering
This is where things start to get fun. The most common technique used in reducing file size is called compression, and I'll admit the exact methods of compression are beyond my scope of knowledge. However, I can describe the general principle and the effects of compression. JPEGs, possibly the most common filetype exchanged online, use lossy compression, which means that the original bitmap is broken into chunks by an image editing program and those chunks are converted from pixels into mathematical averages of the color content of each chunk. Here's an example:
This is Lena, a popular digital test image made some time in the 70s. I think someone scanned her from an old Playboy. Anyway, this file is a BMP; you might have noticed that it loaded from the bottom up (an odd quality of BMPs on web browsers). This image takes up 768KB, almost a megabyte.
If we compress the image extensively as a JPG, we get this:
This image only takes up 3KB! Obviously, this is very exaggerated compression; usually it's much slighter on most images. Notice that the chunks that the image has been reduced to are converted into large pixels or gradients. People working with JPGs call chunks when they're noticeable "artifacts," as they are reminders of the compression. Although someone interested in high-res photography might not want any artifacts in their image, some digital artists like the abstract qualities that compression can provide, and use it expressively. Sometimes digital artists will intentionally change random bits within JPG images to "bring out" glitches and therefore wild, colorful artifacts. A good example of such images would be Maxwell Paparellas' Intoxications series. PNGs also use compression to some extent, but the effects are not nearly as dramatic as the JPG. More on that later.
The infamous GIF is not a filetype capable of this sort of compression. This is largely due to its age - developed in 1987, when color on computers was still pretty hot stuff. GIFs use another method of reducing file size, called indexing. Indexing essentially changes how pixels work. Instead of referring to a color value, an indexed pixel refers to a color in what's called a color map or lookup table, like a palette. Here's Lena again:
Here we've reduced the image to 32 colors in the color map. I've drawn in the map on the right side, so that you can see all the colors that the image uses. This drastically shrinks file size (76KB, 1/10 of the original BMP) while maintaining good color. Indexing also gives the image a texture, as can be seen especially on Lena's shoulder. GIF makers often enjoy the added textures of various indexing methods, and look for interesting ways to employ them. To use a personal example, check out my GIF of Scott Ostler at dump IRL: 32 colors used for the total animation gives the light on his face a gritty, laser-like quality.
When I reduced the colors, I asked the program to simply average the whole palette down. However, we can again take advantage of the human eye and "cheat" if we so desire to make the image appear to have more colors. The way we do this is called dithering, arranging colors in patterns at the pixel level so that colors appear to blend. The textures from different dithering methods can bring interesting visual sensations to images. Here's Lena with the most common methods to illustrate:
Notice how much truer to the original the dithered versions are. Also notice the difference between the positioned quarter's checkerboard patterns and the Floyd-Steinberg quarter's texture. I like to think of the F-S method as "pore-like." Anyway, GIFs have an upper limit on the number of colors that they can display as well, 256 max. This puts their color depth at much lower than the average JPG, so the filetype is more suited for both images with very few colors and for images where a dithered texture is desired. Again, personal example - in Mirage I pitted F-S dithering of a black and white image against the antialiasing (slight blurring of edges) that most web browsers apply to images. This encourages hallucinatory moire patterns to occur in the shadows of the wavy buildings. In this way, you can anticipate how browsers treat images and design your base images to take advantage of that output. Browser rendering of images is a whole different subject which we'll save for the future.
Animation and Transparency
GIFs have two more formal qualities that make them interesting as filetypes, transparency and capability for animation. GIF animations can have as many frames as the artist might want, but more frames add to the file size quickly. We're going to use a sample other than Lena this time, the popular crab monster from dump:
Interesting things to note about this guy: the reduced color palette, very few frames of animation, and the transparent background surrounding the crab. The pixelation is an intentional move on the artists' part. GIFs have the capability for pixels to be either completely opaque or completely transparent. This allows artists to put an emphasis on the form of a shape or animation. This also makes things interesting for building animations, as GIFs treat each frame as a layer of the same image. When making animated GIFs, the artist must specify frame by frame the duration of each frame in milliseconds and the method of adding the frame to the image. The minimum duration for a frame to be visible is about 17ms, or 60hz, the standard refresh rate of monitors. Frames can be as slow as you want. A frame can either replace the previous frame, or combine, i.e. overlap onto the previous frame. The above image replaces each frame with the next frame. If we change the layers to combine, we get this:
The crab leaves "tracers" of the previous frames, then erases them when it returns to frame 1. This can lead to some interesting effects; check out Tom Moody's "GIF Heavy Hitters" figure, which brings an emphasis onto the path of motion in space. In addition to these possibilities for GIF animation is the GIF's loop qualities. GIFs can loop infinitely, or loop only once per display. Finite GIFs have been largely unexplored due to poor browser support and general lack of apparent possibility, but they can exist.
Returning to transparency as a topic, the advantages that the PNG filetype have over other graphics formats is their capability for gradual transparency. Unlike the on-off method of transparency used in GIFs, PNGs can add another byte onto each pixel value for an alpha value. PNGs also support up to 16.7 million colors outside of transparency.This makes PNGs very useful in web deisgn, where gradual transparency can be used for all sorts of interesting effects.
I mentioned that I was going to return to a comparison of PNGs and JPGs regarding compression. I honestly have a poor understanding of PNG compression, but I know from personal experience that when PNG images use few colors, their file size is usually much smaller than a comparable JPG, and artifacts do not occur. When PNGs are used for photographs, often they are much larger in file size than their JPEG counterparts. Basically, JPEGs more suited for photos, and PNGs are better for layering, abstract images and illustrations.
I think it's time for another Lena sample. Here she is as a PNG with varying alpha values. 532KB - not great size-wise, but pretty good for having an extra byte added on to each pixel. Notice how she blends into the gray background. If you were to remove the alpha channel on this image, the missing areas would reappear.
Wow, kinda misty and romantic. I should point out, you can dither alpha values and save an image like this as a GIF. You get what's called the "screen door effect." Depending on your computer and browser, this image might be antialiased and gain a moire pattern around the outside. You might want that for your images, but if you just want simple, gradual transparency, stick with PNGs.
Vectors and Reproducibility
We're almost finished! Vector images are a completely different ballgame. Remember how I mentioned that compressed JPGs are made up of lots of small "chunked" mathematical functions? Vectors take that a step further. Think of a curve, like a sine curve. In math, we can use points, curves and calculus to define the areas of regions of space. Vector image editors like Illustrator and Inkscape allow users to draw simple shapes, which are stored as mathematical functions. This makes these sorts of files incredibly small, and also scalable.
Rather than having to define a value at every point in a grid, the computer is given a mathematical function to trace and fill in.
Lena, you've changed somehow... As you can see, this drawing is composed of curves, simple shapes, fills and gradients. Simple vectors can be very reminiscent of airbrush drawings due to the ease of using gradients and sharp edges. Because of the clean appearance and the scalability aspect, vector images are very useful for graphic designers who make illustrations and logos for publications. Most print work needs to be at very high resolutions, and so pixels just don't cut it when you need a banner graphic 8 feet wide. Also, I should mention that above I posted a raster version of the original vector graphic. Some of you might be able to view the original in browser. Try scaling the image up and down in browser, if you can; you'll notice the edges stay sharp instead of becoming pixelated, like the scaled up crab monster above. For those of you unfamiliar with how to do that or unable to see the SVG file, here's a larger raster version. The two most commonly browser-supported vector formats are SVG, an open-source format, and SWF, the Flash standard. SWFs allow for interactivity and animations, but require proprietary software to write and view.
This brings us to our conclusion, the subject of reproducibility. As I said, vector images are notable for their scalability. Keep in mind, though, that since the raster versions of a vector file are limited to their native resolution, they are not as easily reused. When a raster image is uploaded to the internet, anyone can edit it, take credit for it, and reuse it at the resolution it exists at or smaller. An artist can have ownership over a vector image by distributing it online as rasters and keeping the vector file private. That way, if authorship is ever called into question, the artist can produce the highest resolution possible, the vector, as proof of ownership. This is an issue I haven't seen discussed in the art community before, so I'd love to hear any artists weigh in on this possibility of content management. Unlike raster files, where there is no original source, so to speak, vectors are like paintings in that they are original objects, but also are like digital images in that they can be infinitely reproduced. It's an interesting paradox.
Many digital artists know that by putting their work online, they expose it to a remix culture where the work will be infinitely reproduced, lose authorship and take on new meanings in different contexts. This is a formal quality of sorts for all online content, and I believe it's one of the main reasons why collectors and institutions are hesitant of purely digital art. Finally it should be kept in mind that all of the image filetypes I've discussed (except for the BMP) share what might be called a formal quality at this point: common support on all web browsers. Because these images are viewable by most people online, they are suited for online display. There are ways to translate these files into formats viewable outside of a computer, but their suitability for the online environment is part of what makes them unique and important as art media.
If anyone thinks that I've missed formal qualities of these filetypes, please share your thoughts in the comments. This essay is meant to be constructive and open to growth.
Raster Images - the Bitmap
Raster images are essentially two-dimensional grids of color values, called pixels. The most basic qualities that all raster images have are a resolution, and a color depth. These basically just mean that each raster image has a fixed width and height, and a number of possible color values that can exist in the grid. When computers first started becoming popular, screen resolutions were low and computers could represent very few colors, if any. Nowadays, the standard number of colors that a computer can display is about 16.7 million. Each pixel displayed on your computer screen is a value made up of three bytes - one for red, one for green, and one for blue. Typically for colors on the web, values are expressed in hexadecimal, so for example a bright red is #ff0000.The code denotes that the red byte be set to its max value of 255, or #ff, and that green and blue are set at #00 each.
The most basic way to represent a true color image as a file is to simply lay these three-byte images out in a grid. The most common filetype that does this is the BMP (bitmap), well known to MSPaint aficionados. However, as true as the colors are, the files tend to be very large at high resolutions, making them unsuitable for web distribution. Thankfully (sort of), the human eye is only capable of distinguishing about 10 million colors on a good day. This means that we can cheat, and reduce our palette to reduce file size.
Image Cheats - Compression, Indexing and Dithering
This is where things start to get fun. The most common technique used in reducing file size is called compression, and I'll admit the exact methods of compression are beyond my scope of knowledge. However, I can describe the general principle and the effects of compression. JPEGs, possibly the most common filetype exchanged online, use lossy compression, which means that the original bitmap is broken into chunks by an image editing program and those chunks are converted from pixels into mathematical averages of the color content of each chunk. Here's an example:
This is Lena, a popular digital test image made some time in the 70s. I think someone scanned her from an old Playboy. Anyway, this file is a BMP; you might have noticed that it loaded from the bottom up (an odd quality of BMPs on web browsers). This image takes up 768KB, almost a megabyte.
If we compress the image extensively as a JPG, we get this:
This image only takes up 3KB! Obviously, this is very exaggerated compression; usually it's much slighter on most images. Notice that the chunks that the image has been reduced to are converted into large pixels or gradients. People working with JPGs call chunks when they're noticeable "artifacts," as they are reminders of the compression. Although someone interested in high-res photography might not want any artifacts in their image, some digital artists like the abstract qualities that compression can provide, and use it expressively. Sometimes digital artists will intentionally change random bits within JPG images to "bring out" glitches and therefore wild, colorful artifacts. A good example of such images would be Maxwell Paparellas' Intoxications series. PNGs also use compression to some extent, but the effects are not nearly as dramatic as the JPG. More on that later.
The infamous GIF is not a filetype capable of this sort of compression. This is largely due to its age - developed in 1987, when color on computers was still pretty hot stuff. GIFs use another method of reducing file size, called indexing. Indexing essentially changes how pixels work. Instead of referring to a color value, an indexed pixel refers to a color in what's called a color map or lookup table, like a palette. Here's Lena again:
Here we've reduced the image to 32 colors in the color map. I've drawn in the map on the right side, so that you can see all the colors that the image uses. This drastically shrinks file size (76KB, 1/10 of the original BMP) while maintaining good color. Indexing also gives the image a texture, as can be seen especially on Lena's shoulder. GIF makers often enjoy the added textures of various indexing methods, and look for interesting ways to employ them. To use a personal example, check out my GIF of Scott Ostler at dump IRL: 32 colors used for the total animation gives the light on his face a gritty, laser-like quality.
When I reduced the colors, I asked the program to simply average the whole palette down. However, we can again take advantage of the human eye and "cheat" if we so desire to make the image appear to have more colors. The way we do this is called dithering, arranging colors in patterns at the pixel level so that colors appear to blend. The textures from different dithering methods can bring interesting visual sensations to images. Here's Lena with the most common methods to illustrate:
Notice how much truer to the original the dithered versions are. Also notice the difference between the positioned quarter's checkerboard patterns and the Floyd-Steinberg quarter's texture. I like to think of the F-S method as "pore-like." Anyway, GIFs have an upper limit on the number of colors that they can display as well, 256 max. This puts their color depth at much lower than the average JPG, so the filetype is more suited for both images with very few colors and for images where a dithered texture is desired. Again, personal example - in Mirage I pitted F-S dithering of a black and white image against the antialiasing (slight blurring of edges) that most web browsers apply to images. This encourages hallucinatory moire patterns to occur in the shadows of the wavy buildings. In this way, you can anticipate how browsers treat images and design your base images to take advantage of that output. Browser rendering of images is a whole different subject which we'll save for the future.
Animation and Transparency
GIFs have two more formal qualities that make them interesting as filetypes, transparency and capability for animation. GIF animations can have as many frames as the artist might want, but more frames add to the file size quickly. We're going to use a sample other than Lena this time, the popular crab monster from dump:
Interesting things to note about this guy: the reduced color palette, very few frames of animation, and the transparent background surrounding the crab. The pixelation is an intentional move on the artists' part. GIFs have the capability for pixels to be either completely opaque or completely transparent. This allows artists to put an emphasis on the form of a shape or animation. This also makes things interesting for building animations, as GIFs treat each frame as a layer of the same image. When making animated GIFs, the artist must specify frame by frame the duration of each frame in milliseconds and the method of adding the frame to the image. The minimum duration for a frame to be visible is about 17ms, or 60hz, the standard refresh rate of monitors. Frames can be as slow as you want. A frame can either replace the previous frame, or combine, i.e. overlap onto the previous frame. The above image replaces each frame with the next frame. If we change the layers to combine, we get this:
The crab leaves "tracers" of the previous frames, then erases them when it returns to frame 1. This can lead to some interesting effects; check out Tom Moody's "GIF Heavy Hitters" figure, which brings an emphasis onto the path of motion in space. In addition to these possibilities for GIF animation is the GIF's loop qualities. GIFs can loop infinitely, or loop only once per display. Finite GIFs have been largely unexplored due to poor browser support and general lack of apparent possibility, but they can exist.
Returning to transparency as a topic, the advantages that the PNG filetype have over other graphics formats is their capability for gradual transparency. Unlike the on-off method of transparency used in GIFs, PNGs can add another byte onto each pixel value for an alpha value. PNGs also support up to 16.7 million colors outside of transparency.This makes PNGs very useful in web deisgn, where gradual transparency can be used for all sorts of interesting effects.
I mentioned that I was going to return to a comparison of PNGs and JPGs regarding compression. I honestly have a poor understanding of PNG compression, but I know from personal experience that when PNG images use few colors, their file size is usually much smaller than a comparable JPG, and artifacts do not occur. When PNGs are used for photographs, often they are much larger in file size than their JPEG counterparts. Basically, JPEGs more suited for photos, and PNGs are better for layering, abstract images and illustrations.
I think it's time for another Lena sample. Here she is as a PNG with varying alpha values. 532KB - not great size-wise, but pretty good for having an extra byte added on to each pixel. Notice how she blends into the gray background. If you were to remove the alpha channel on this image, the missing areas would reappear.
Wow, kinda misty and romantic. I should point out, you can dither alpha values and save an image like this as a GIF. You get what's called the "screen door effect." Depending on your computer and browser, this image might be antialiased and gain a moire pattern around the outside. You might want that for your images, but if you just want simple, gradual transparency, stick with PNGs.
Vectors and Reproducibility
We're almost finished! Vector images are a completely different ballgame. Remember how I mentioned that compressed JPGs are made up of lots of small "chunked" mathematical functions? Vectors take that a step further. Think of a curve, like a sine curve. In math, we can use points, curves and calculus to define the areas of regions of space. Vector image editors like Illustrator and Inkscape allow users to draw simple shapes, which are stored as mathematical functions. This makes these sorts of files incredibly small, and also scalable.
Rather than having to define a value at every point in a grid, the computer is given a mathematical function to trace and fill in.
Lena, you've changed somehow... As you can see, this drawing is composed of curves, simple shapes, fills and gradients. Simple vectors can be very reminiscent of airbrush drawings due to the ease of using gradients and sharp edges. Because of the clean appearance and the scalability aspect, vector images are very useful for graphic designers who make illustrations and logos for publications. Most print work needs to be at very high resolutions, and so pixels just don't cut it when you need a banner graphic 8 feet wide. Also, I should mention that above I posted a raster version of the original vector graphic. Some of you might be able to view the original in browser. Try scaling the image up and down in browser, if you can; you'll notice the edges stay sharp instead of becoming pixelated, like the scaled up crab monster above. For those of you unfamiliar with how to do that or unable to see the SVG file, here's a larger raster version. The two most commonly browser-supported vector formats are SVG, an open-source format, and SWF, the Flash standard. SWFs allow for interactivity and animations, but require proprietary software to write and view.
This brings us to our conclusion, the subject of reproducibility. As I said, vector images are notable for their scalability. Keep in mind, though, that since the raster versions of a vector file are limited to their native resolution, they are not as easily reused. When a raster image is uploaded to the internet, anyone can edit it, take credit for it, and reuse it at the resolution it exists at or smaller. An artist can have ownership over a vector image by distributing it online as rasters and keeping the vector file private. That way, if authorship is ever called into question, the artist can produce the highest resolution possible, the vector, as proof of ownership. This is an issue I haven't seen discussed in the art community before, so I'd love to hear any artists weigh in on this possibility of content management. Unlike raster files, where there is no original source, so to speak, vectors are like paintings in that they are original objects, but also are like digital images in that they can be infinitely reproduced. It's an interesting paradox.
Many digital artists know that by putting their work online, they expose it to a remix culture where the work will be infinitely reproduced, lose authorship and take on new meanings in different contexts. This is a formal quality of sorts for all online content, and I believe it's one of the main reasons why collectors and institutions are hesitant of purely digital art. Finally it should be kept in mind that all of the image filetypes I've discussed (except for the BMP) share what might be called a formal quality at this point: common support on all web browsers. Because these images are viewable by most people online, they are suited for online display. There are ways to translate these files into formats viewable outside of a computer, but their suitability for the online environment is part of what makes them unique and important as art media.
If anyone thinks that I've missed formal qualities of these filetypes, please share your thoughts in the comments. This essay is meant to be constructive and open to growth.
Wednesday, January 5, 2011
Visions of Google
While falling asleep last night, I had what would be best described as a hypnagogic vision of a landscape image, comprised entirely of Google Docs shape elements. I took this as a sign, and wrote down the idea. This morning, I made two attempts at simple compositions
:
:
"Bad Day for a Cylinder"
"Two Frames"
Really liking the simplicity of form and palette. My notes from last night say "Art of the Private Internet," whatever that means. For prior examples of Google Documents as a collaborative art platform, check out Chris Collins' "Public Interface Gesture" performance.
Tuesday, January 4, 2011
What's the Deal with GIFs?
I don't have to tell most of you that animated GIFs received a lot of press within the past several months. Most of the GIFs cited in said articles are gags, "glitter" GIFs, clips from TV and movies, and your typical Funniest Home Videos-type fare. The growing popularity of image-centric sites like 4chan and more recently Tumblr have encouraged a resurgence of public interest in a 24-year old file format because of the GIF's unique ability to endlessly loop animations. GIFs are very small files as compared to a modern digital camera photo, and all major browsers support the animation to a functional extent. However, it should be made clear that the GIF is not inherently kitsch, just like a roll of film is not inherently kitsch. It's a filetype, a medium, and therefore has several uses. The main two uses of GIFs right now online are in informal conversation, and as art/components of art. Let's discuss the division.
From a conversational standpoint, GIFs carry a lot of punch as images because the animation grabs your attention, and a short loop is suited for a "reaction image." Take the Seinfeld GIF above. The message is clear: if someone posts this in a discussion, they're saying "Eh, this is hooey and I'm not gonna bother. See ya." It's expressive, funny and fast, and it sets a tone; all necessary qualities for extended net discussions.
 |
| Ryu Punch, by noisia |
On the other hand, a very small fraction of GIFs are intentionally produced as "art." Here is an example by noisia. Rather than using pop culture elements literally, the artist has used an animation from a fighting video game as a formal element. The fighter's identity is not the emphasis, the work is about motion, repetition, bold color and symmetry. The image is kaleidescopic and infinitely tileable. This is a radically different use of the medium, and requires a different sort of looking to interpret and appreciate.
 |
| Early Myspace photo? |
Some have debated the legitimacy of GIF art in light of the popular culture associated with the format. Most recently, Twitter-based performance artist Man Bartlett took up a beef with the popularity of the format on his Tumblr. For those still wary of the GIF, let me offer you this: in the early 19th century, the camera was invented. For decades, artists explored the possibilities of the new medium of the photograph, but their efforts were not treated as "sincere" or "legitimate" by the establishment. This was for two reasons. The first was that the new medium had great appeal to amateurs and businesses who would otherwise have to employ illustrators for producing images of their work, and so most photographs were not intentionally made as fine art. The second reason was that photographs were generally evaluated by the art world under the definitions of art as defined by painting, the main form of visual art at the time. Paintings have been for the most part produced only as art objects throughout their existence, and so it was very difficult for some to grasp the idea of a medium being neutral. Eventually, by about the 1920s it was decided that the intention of an object's creator, not the medium, determined whether a work was art or not, and an artwork was to be evaluated by subject matter and formal qualities.
 |
| smile-camera-flash by ahem. Art or not? |
GIFs are like photographs, in that the method of image production is unique, but the division between amateur and artistic intention is what differentiates both usage and evaluation methods. Context is key; the website that a GIF is posted on and even its positioning in that website alerts the savvy viewer as to whether the image is to be evaluated as art or not. Just like photographs, there are even those GIFs and sites where the lines blur, and it's hard to tell what is art. A viewer of digital art must learn how to look at a work by understanding context and formal qualities. I'll be writing a breakdown of formal qualities of popular filetypes in the next few days to aid those who want to explore the concept further. What's important in the big picture is that participators in the art world understand that digital filetypes are just types of media. A GIF is like undeveloped film; it's what you photograph that counts.
Saturday, January 1, 2011
Happy New Years!
Subscribe to:
Posts (Atom)
