Base 64

None

• 2 min read

Tri 3 Team Teach Hacks

Popcorn Hacks

Popcorn Hack 1

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

Answer: PNG
PNG supports transparency and stays sharp because it’s lossless and uses high-quality compression.

Practice MCQ

Which file format is best for an image with a transparent background?

Correct Answer: B) PNG

Popcorn Hack 2

Base64 increases the size of the original data by about 33%. This can make websites slower if used too much.

Practice MCQ

Which of the following is true about Base64 encoding?

Correct Answer: B) It increases the size of the data

  • A) False – Base64 is not encryption.
  • B) True – Base64 makes the data larger.
  • C) False – It actually expands the data.
  • D) False – It’s still readable, just encoded.

Homework Hack

What is a hex color code?

A hex color code is a way to show color using 6 digits after a #. Each two digits stand for red, green, and blue.
Example colors:

  • #FFFFFF = white
  • #000000 = black
  • #FF5733 = reddish-orange

These are used in websites and apps to pick colors for text, backgrounds, buttons, etc.

What is Base64 and how is it used with images?

Base64 turns files (like images) into long strings of letters and numbers.
Instead of linking to an image file, you can just paste the Base64 string into your code.
It’s useful when you want to keep everything in one file or don’t want to rely on outside files.

Why use Base64 instead of a regular image file?

You might use Base64 when:

  • You want fewer files to deal with
  • You’re sending the image in something like an email or a notebook
  • You want the image to always show up, even if the original file is missing

The downside is Base64 makes the file size bigger, so it’s not great for large images or lots of them.

Code examample

import base64
from IPython.display import HTML


with open("images/cookie.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode('utf-8')


html_code = f'<img src="data:image/png;base64,{encoded_string}" />'

HTML(html_code)

wtv

Explanation:

  • The image file is opened and read.

  • It’s turned into Base64 (a long string version of the image).

  • That string is put into an HTML tag.

  • The notebook shows the image right in the output.