Skip to the content.

Images, Base64, Color Codes - Gyutae Kim

Images

Popcorn Hack 1

For an image with a transparent background that needs to stay sharp on any screen, the PNG (Portable Network Graphics) format is ideal. It supports transparency and lossless compression, ensuring the image remains sharp and clear.

MCQ

B) PNG

Base 64

Popcorn Hack 1

One downside of Base64 in the real world is that it increases the size of the encoded data by approximately 33%, which can lead to higher storage and bandwidth usage compared to the original binary format.

MCQ

B) It increases the size of the data.

Base64 encoding increases the size of data, as it converts binary data into text characters.

Color Code 101

HW Hack

  1. A hex color code is a six-digit code used in web design and development to represent colors. It is written in the format #RRGGBB, where:#FFFFFF represents white.

  2. Base64 is a binary-to-text encoding scheme that converts binary data into a string of ASCII characters. It is often used to embed images directly into HTML, CSS, or JSON files by encoding the image as a Base64 string.

  3. You want to reduce the number of HTTP requests (e.g., embedding small icons or logos directly into HTML or CSS). You need to ensure the image is self-contained within a single file (e.g., for email templates or JSON APIs).

Image

Storage: The Base64 string represents the binary data of the image in a text format. This allows the image to be embedded directly into the notebook or HTML file. Display: When the notebook is rendered, the browser decodes the Base64 string and displays the image.