Programming Included

On the Site Logo

What Does the Site Logo Represent and How do GIFS Work?

Charles Chen | 2017-09-08 20:42 PT

I guess the first thing I would like to write about would be to discuss the site logo.


The logo represents a P and a I for Programming Included and the I acts as a cursor to edit the text. Now this wouldn't be Programming Included without something more technical!

I found it interesting how many sites forgo GIFs for their static, consistent portions of the logos. Although not many sites mention why this is the case, I do think that most worry about the size of the GIF. However, this GIF is only 2.27 kB compared to 13.1 kB for Google's logo! GIF's can be seen as simple playback images that display images in succession or differences in images in succession. As a result, any change that occurs need to be shown as an image and is limited by consistent playback by each layer.

In other words, each layer would represent a fixed time slice. You can imagine the complexity increases as the object in the GIF involves more and more movement. If the GIF experiences rapid movement without a particular pattern, differences occur in different time intervals. This means that we need to provide as many images as there are the lowest delay between frames (delta time) that do not illustrate the object moving, otherwise we would suffer loss or choppiness.

Our logo can be considered as two images worth 128 x 128 pixels each. This is because we only have two states, the I there and not:

Logo process

Above shows the two actual images that are encoded. Notice the seperation between the I and P. The P acts as the base image. While the I stores the difference between the first and second frames. This is GIF animation optimizing that is supported in Gimp.

There is indepth documentation on each byte/bit of the gif which can be found online. I hope everyone who read the word GIF read it as GIF and not GIF ;)

Related Blogs