This page will allow you to to see how the color values in an GIF images are encoded into bytes. You may interact with a simple drawing tool that lets you create a 10x10 pixel image. Below, the image you draw is compressed and encoded into bytes. Each step of the conversion process is listed to help make it easier to see all the steps. Click on the color palette on the right to choose a color, then click in the grid to change the color of the pixels.
Below is a table containing a summary of all the steps involved in turning the image you created into bytes. You can see how values are added into the color index buffer. When a sequence is found that does not have an entry in the code table, the last known code is sent to the code stream and a new entry is created in the code table. Recall that the last color value remains in the index buffer when reading the next color. You can also see the bit buffer. Once the buffer grows to over 8 bits, the last 8 bits are popped off and turned into a byte. These bits are removed in the following step in the table. The "Image Data Bytes" tab includes the additional bytes indicatint the LZW code sites and the block length markers. Note that minimum LZW code size in the example is set to the match the color table size. Be sure to refer to the LZW image data section for more complete details on how this process works.