Ahaan

Nighthawk PagesBig Idea 1 JourneySearchAbout Me!BlogsReadmeView on GitHub

Base 64 Lesson

• 3 min read

Popcorn Hack 1 (Images)

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

Answer:
SVG – Scalable Vector Graphics stay crisp on any screen size and support transparency.

  • Why not PNG? PNG also supports transparency, but it’s a raster format and can get pixelated when scaled up.
  • SVG is vector-based and resolution-independent.

Practice MCQ

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

A) JPEG
B) PNG
C) GIF
D) BMP

Reveal Answer **Correct Answer:** **B) PNG** **Explanation:** - PNG supports full alpha transparency and is lossless. - JPEG doesn't support transparency. - GIF only supports 1-bit transparency and limited colors. - BMP lacks modern transparency features and is rarely used.

Popcorn Hack 2 (Base 64)

Question:
What do you think could be one downside of Base64 in the real world?

Answer:
Increased Data Size – Base64 increases data size by about 33%, which can be inefficient for large files.
Not Secure – Base64 is not encryption; it’s easy to decode.
Processing Overhead – Encoding/decoding adds computational cost.
Limited Use Cases – Best used for transmitting binary data over text-based systems, not as a general-purpose format.

Practice MCQ

Which of the following is true about Base64 encoding?

A) It encrypts data to make it secure
B) It increases the size of the data
C) It reduces the size of the data
D) It ensures data is unreadable by humans

Reveal Answer **Correct Answer:** **B) It increases the size of the data** **Explanation:** - Base64 **increases** the size of the data by about **33%**. - It is **not encryption** and can be easily decoded. - It doesn’t reduce size or make data truly unreadable—just safe for text transmission.

MCQ Question

Answer: C

Homework Hack: Color Codes & Base64

1. What is a hex color code? What are some examples?

A hex color code is a six-digit code used in web development and design to represent colors. It starts with a # and is followed by a combination of numbers (0–9) and letters (A–F).

  • #FF0000 = Red
  • #00FF00 = Green
  • #0000FF = Blue

🔎 Application Example:
In my web project, I used #1E90FF (DodgerBlue) for button backgrounds to make them visually pop.

2. What is Base64 and how is it used with images?

Base64 is a way of encoding binary data (like images) into a text format using only printable characters. It’s often used to embed images directly into HTML or CSS without separate image files.

  • Instead of loading an image file from disk or the internet, the image is encoded as a long Base64 string.

Application Example:
In a notebook or web prototype, I used Base64 to embed icons directly into the HTML, reducing external file dependencies.

3. Why might you use Base64 instead of a regular image file?

Reasons to use Base64:

  • Embeds image data directly into code (no extra requests).
  • Useful for small images like logos, favicons, or UI icons.
  • Improves load speed for very lightweight pages.

When not to use:

  • Not ideal for large images due to increased file size (Base64 adds ~33% overhead).
  • Difficult to maintain or swap out without decoding.

img

Explanation

The image is displayed using an HTML <img> tag that points to a file located at /images/base64.png, with /Ahaan_2025 dynamically filling in the base URL of the site.
The image must be stored in the images directory at the root of the project so that it can be correctly loaded.
When rendered, the browser replaces the template variable with the actual URL and displays the image inline.

Scroll to top