Last popcorn hacks

More hacks

• 2 min read

💬 Partner Discussion Prompt

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

🧠 Answer:
One downside of Base64 in the real world is that it increases the size of the data by about 33%. Since Base64 encoding turns every 3 bytes of binary data into 4 ASCII characters, this overhead makes transmissions larger and less efficient—especially when dealing with large files or in bandwidth-limited environments like mobile networks.

🎨 1. What is a Hex Color Code?

A hex color code is a six-digit code used in web design and digital graphics to represent colors. It combines numbers (0–9) and letters (A–F) to indicate the intensity of red, green, and blue (RGB) values. Each color component is two hex characters (ranging from 00 to FF).

Examples:

  • #FF0000 = Red
  • #00FF00 = Green
  • #0000FF = Blue
  • #FFFFFF = White
  • #000000 = Black

🧾 2. What is Base64 and How Is It Used with Images?

Base64 is a method of encoding binary data—like image files—into plain text using only readable ASCII characters. This makes it safe to transmit through systems that handle text, such as HTML, CSS, or JSON.

Uses of Base64 with images:

  • Embedding small icons directly into HTML or CSS (no separate image files needed)
  • Sending image data inside APIs or emails as part of text payloads

🔍 3. Why Might You Use Base64 Instead of a Regular Image File?

You might choose Base64 forf a few reasons:

  • ✅ Embed small images directly into a webpage to reduce file requests
  • ✅ Store images in plain-text-only systems, like some databases or config files
  • ✅ Improve page load time for small assets by reducing the number of HTTP requests

🛠️ Application to MY Work

In my video analytics frontend, I could use Base64 to embed small icons or logos (like play buttons or rating stars) directly in the interface. This avoids needing to manage or fetch separate image files from the server, keeping the interface lightweight, fast, and easier to maintain.

🌄 National Geographic Image

National Geographic Image

📘 Explanation: How It’s Stored and Displayed

  • Storage:
    This image is linked directly from the web. It is not stored locally or inside the notebook file. Instead, it is fetched from the internet each time the notebook is loaded.

  • Display:
    Jupyter displays images using HTML <img> tags in Markdown or the IPython.display functions in code cells. It renders the image inline, so you can see it right in your notebook.

  • Note:
    If you’re offline, the image won’t appear unless you’ve downloaded it or embedded it using Base64 encoding.