Skip to the content.

Images, Base64, and Color Codes

Popcorn Hacks

Hack 1

Turn to a partner and answer: Which format would you use for an image with a transparent background that needs to stay sharp on any screen?

You would use a png file because its built for websites to have a transparent background. Websites are sites that need to be accessed in different kinds of screens, so png file.

Hack 2

Turn to a partner and discuss: What do you think could be one downside of Base64 in the real world?

It increases the size of the data needed.

Homework Hack

In your notebook, explain the following, along with one application to YOUR work:

  • What is a hex color code? What are some examples? A hex color code is a code of a 6-digit mix of numbers and letters that represent a certain color. For example, the hex code #FF0000 represents red.

  • What is Base64 and how is it used with images? Base64 is an encoding method that can safely convert binary data into a format of text. For images, the encoding becomes more flexible for certain channels that can only encode text, such as emailing or HTTP.

  • Why might you use Base64 instead of a regular image file? You can use Base64 to safely transmit images encoded from binary data to printable text.

  • Then, Insert an image into your Jupyter notebook and explain how it’s stored and displayed.

Image

In markdown, I upload an image converted into base64 string. Then, by plugging it into the markdown template for imbedding images, I am able to convert the long lines of text into binary data that displays the image.

Extra Credit: Convert 5 hex codes into decimal code.

  • #FFFFFF –> rgb(255, 255, 255)
  • #000000 –> rgb(0, 0, 0)
  • #FF0000 –> rgb(255, 0, 0)
  • #0000FF –> rgb(0, 0, 255)
  • #00FF00 –> rgb(0, 255, 0)