PNG Compress and Base64 Conversion CLI Tool

Introduction

This is a command-line interface (CLI) tool I designed for Mac users who need to quickly compress PNG images and convert them to Base64 encoding. It's particularly useful for web developers and designers looking to optimize images for web use, reduce file sizes, and prepare images for inline embedding in CSS or HTML.

The Complete Script

Let's start by looking at the entire script:

​x
#!/bin/bash
#
#    //
#  _oo\
# (__/ \  _  _
#    \  \/ \/ \
#    (         )\
#     \_______/  \
#      [[] [[]
#      [[] [[]
#
# PNG Compress + Convert to Base64
# v2024-11-14
# by: 16BitMiker

HOMEBREW_NO_AUTO_UPDATE=1 brew install pngquant base64

perl -MTerm::ANSIColor=:constants -sE'

    $|++; 
    b();
    say   q|> |, YELLOW BOLD q|Compress PNG + Convert to Base64|, RESET;
    say   q|> |, YELLOW BOLD q|Please note this process is destructive!|, RESET;
    print q|> |, YELLOW BOLD q|CTRL+C to bail or enter to continue...|, RESET;
    <STDIN>;
    b();
    say q|MENU: Q(uit)|;
    b();
    
    LOOP: $n = 0;
    while (glob(q|*.png|))
    {
        printf qq|%-2d = %s\n|, $n++, $_;
        push @{$db}, $_ if -e $_;
    }
    
    b();
    print q|> |;
    $choice = undef;
    chomp( $choice = <STDIN> );
    b();
    
    goto LOOP if $choice =~ m~^$~;
    do { say q|> |, RED BOLD q|Bye bye!|, RESET; exit }
    if $choice =~ m~^E|Q|B$~i;
    goto LOOP unless $choice =~ m~^[0-9]+$~;
    goto LOOP unless $$db[$choice];
    
    $file = $$db[$choice];
    
    $cmd = sprintf q|%s && %s|
    , $png =~ s~PNG~$file~gr
    , $b64 =~ s`(PNG)|OUTPUT`$1 ? $file : qq|$file| =~ s~png$~txt~r`ger;
    
    print q|> |;
    say BOLD GREEN $cmd, RESET;
    
    system $cmd;
    
    say q|> |, BOLD GREEN q|Success! Bye bye!|;
    
    sub b
    {
        say q|-|x40; 
    }

' -- -png='pngquant --quality=65-80 --ext .png --force --verbose "PNG"' -b64='base64 "PNG" > "OUTPUT"'

Detailed Breakdown

Bash Component

1. Shebang: #!/bin/bash specifies that this is a bash script.

2. ASCII Art: The script includes a fun ASCII art of the perl camel.

3. Homebrew Installation:

   xxxxxxxxxx
   HOMEBREW_NO_AUTO_UPDATE=1 brew install pngquant base64
   

   This line installs the required tools (pngquant and base64) using Homebrew without updating Homebrew itself.

Perl Component

The main functionality is written in Perl, utilizing the Term::ANSIColor module for colorful output.

1. Initialization:

   • $|++; enables autoflush for immediate output.

   • The b() function is called to print a separator line.

2. User Interface:

   • Displays a welcome message and warning about the destructive nature of the process.

   • Waits for user input to continue.

3. File Selection Menu:

   • Uses glob(q|*.png|) to list all PNG files in the current directory.

   • Creates a numbered menu of these files.

4. User Input Handling:

   • Accepts user input for file selection.

   • Handles various input cases (empty input, quit commands, invalid numbers).

5. Command Execution:

   • Constructs the command string for PNG compression and Base64 conversion.

   • Uses system to execute the constructed command.

6. Utility Function:

   • sub b is a simple function to print a separator line.

Command-line Arguments

The script ends with two important command-line arguments passed to the Perl interpreter:

1. PNG Compression:

   xxxxxxxxxx
   -png='pngquant --quality=65-80 --ext .png --force --verbose "PNG"'
   

   This uses pngquant to compress the PNG with a quality range of 65-80%.

2. Base64 Conversion:

   xxxxxxxxxx
   -b64='base64 "PNG" > "OUTPUT"'
   

   This converts the compressed PNG to Base64 and saves it to a text file.

How to Use

1. Save the script to a file (e.g., png_compress_base64.sh).

2. Make it executable: chmod +x png_compress_base64.sh

3. Run it: ./png_compress_base64.sh

4. Follow the on-screen prompts to select and process a PNG file.

Key Features

• Interactive UI: User-friendly menu for file selection.

• Colorful Output: Uses ANSI colors for better readability.

• Error Handling: Gracefully handles various user inputs.

• Efficiency: Combines compression and conversion in one tool.

• Customizable: Easy to modify compression quality or add features.

Considerations

• Destructive Process: The original PNG files are overwritten. Always keep backups.

• Quality vs. Size: The compression quality (65-80%) balances file size reduction and image quality. Adjust as needed.

• Mac-Specific: This script is designed for macOS and relies on Homebrew.

Conclusion

This CLI tool streamlines the process of optimizing PNG images for web use. By combining compression and Base64 conversion, it provides a quick and efficient way to prepare images for various web development scenarios, such as inline CSS backgrounds or data URIs in HTML.