A privacy-first, client-side image hosting solution that generates base64 data URLs for direct image embedding without requiring any server infrastructure. All image processing occurs entirely within your browser, ensuring your data never leaves your device.

xsukax URL Image Hosting is built with security and privacy as foundational principles:

• Zero Server Transmission: All image processing happens exclusively in your browser using JavaScript. Your images are never uploaded to any server, eliminating risks associated with data breaches, unauthorized access, or third-party data collection.

• No Data Persistence: The application does not store, log, or retain any information about your images. Once you close the browser tab, all data is permanently removed from memory.

• Client-Side Architecture: The entire application runs on your local machine, providing complete control over your data. There are no backend services, APIs, or external dependencies that could compromise your privacy.

• Transparent Processing: As an open-source project, all code is publicly auditable, allowing security researchers and developers to verify that no hidden data collection or malicious functionality exists.

• No Tracking or Analytics: The application contains no tracking scripts, analytics tools, or third-party integrations that could monitor your usage or collect behavioral data.

• Base64 Data URLs: Generated URLs are self-contained data representations that can be shared without exposing your original files or requiring hosting services that might track access patterns.

• 🚀 Instant Deployment: Single HTML file application requires no installation, server setup, or dependencies. Simply open index.html in any modern browser to start using it immediately.

• 🖼️ Universal Image Support: Compatible with PNG, JPG, GIF, and WebP formats, covering all common image types used in web development and content creation.

• 📋 Direct Embedding: Generated base64 data URLs work seamlessly in HTML, CSS, Markdown, forums, documentation, and any context that accepts standard image URLs.

• 💾 Offline Functionality: Once loaded, the application works completely offline without requiring internet connectivity, making it ideal for secure environments or air-gapped systems.

• 🎨 Modern UI/UX: Features a clean, GitHub-inspired dark theme with intuitive drag-and-drop functionality, responsive design, and clear visual feedback.

• 📊 Detailed Metadata: Provides comprehensive information about processed images including dimensions, file size, format, and generated URL size.

• 🔗 Shareable View URLs: Create persistent links with embedded image data that can be shared or bookmarked using URL hash parameters.

• ⚡ Lightweight Performance: Minimal footprint with no external dependencies ensures fast loading times and optimal resource usage.

• 🌐 Cross-Platform Compatibility: Works on any device with a modern web browser, including Windows, macOS, Linux, iOS, and Android.

1. Download the index.html file from the GitHub repository:

   curl -O https://raw.githubusercontent.com/xsukax/xsukax-URL-Image-Hosting/main/index.html

2. Open the downloaded file in your preferred web browser:

   • Windows: Double-click index.html or right-click → Open with → Browser
   • macOS/Linux: Double-click index.html or use the command:

     open index.html      # macOS
     xdg-open index.html  # Linux

1. Clone the repository using Git:

   git clone https://github.com/xsukax/xsukax-URL-Image-Hosting.git
   cd xsukax-URL-Image-Hosting

2. Open index.html in your browser as described above.

For enhanced security features like HTTPS or to use within an intranet, deploy on any static web server:

# Using Python's built-in server
python3 -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

# Using PHP built-in server (if preferred)
php -S localhost:8000

Then navigate to http://localhost:8000 in your browser.

Note: Server deployment is optional and does not change the client-side nature of the application. All processing still occurs in the browser.

The application provides multiple methods for image conversion:

graph TD
    A[Start Application] --> B{Select Input Method}
    B -->|Drag & Drop| C[Drop Image on Upload Zone]
    B -->|File Picker| D[Click 'Choose file' Button]
    C --> E[Validate Image]
    D --> E
    E --> F{Valid Image?}
    F -->|No| G[Show Error Alert]
    F -->|Yes| H[Convert to Base64]
    H --> I[Display Data URL]
    I --> J{User Action}
    J -->|Copy URL| K[Use in Project]
    J -->|View Image| L[Open in New Tab]
    J -->|Download| M[Save to Disk]
    J -->|Share| N[Open View Page]
    G --> B
    K --> O[End]
    L --> O
    M --> O
    N --> O

Option A: Drag and Drop

• Drag any supported image file (PNG, JPG, GIF, WebP) directly onto the upload zone
• The interface will highlight when a file is detected

Option B: File Picker

• Click the "Choose file" button
• Select your image from the file system dialog
• Maximum file size: 1 MB

Once processed, the application displays:

• Complete base64 data URL in a text area (ready for copying)
• Character count and size statistics
• Success notification

The generated URL format:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

In HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Description">

In CSS:

.background {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...');
}

In Markdown:

![Alt text](data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...)

• 👁️ View Image in New Tab: Opens the image alone in a new browser tab
• 🔗 Open in New Tab: Opens the full view page with image details and metadata
• 💾 Download Image: Saves the image to your local file system
• ↺ Upload New Image: Resets the interface for processing another image

flowchart LR
    A[User Interface] --> B[File Input Handler]
    B --> C[Validation Layer]
    C --> D{Size Check}
    D -->|> 1MB| E[Error Alert]
    D -->|≤ 1MB| F[FileReader API]
    F --> G[Base64 Encoder]
    G --> H[Data URL Generator]
    H --> I[Display Manager]
    I --> J[Result Section]
    I --> K[View Page]
    J --> L[User Actions]
    K --> L
    L --> M[Download / View / Share]

When opening the view page (via "Open in New Tab"), you access:

• Full Image Display: Responsive image viewer with automatic sizing
• Detailed Metadata Table:
  • Original filename
  • File size in human-readable format
  • Image dimensions (width × height in pixels)
  • Image format (PNG, JPG, GIF, WebP)
  • Generated URL size in KB

The view page URL contains the complete image data in the hash parameter, making it bookmarkable and shareable:

https://your-domain.com/index.html#view:%7B%22data%22%3A%22data%3Aimage...

1. Optimize Before Conversion: For best results, compress or resize large images before conversion to stay under the 1 MB limit.

2. Use for Appropriate Contexts: Base64 data URLs are ideal for:

   • Small icons and logos
   • Inline SVG alternatives
   • Email templates (with caveats)
   • Documentation and README files
   • Prototypes and demos

3. Consider Performance: Large base64 strings can increase HTML file size and affect page load times. Use external image files for large images on production websites.

4. Browser Compatibility: While base64 data URLs are widely supported, extremely large data URLs (>2 MB) may face limitations in older browsers.

This project is licensed under the GNU General Public License v3.0.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request.

Created by xsukax

• Designed with privacy and security as core principles
• Inspired by the need for simple, trustworthy tools in the web development ecosystem
• Built with vanilla JavaScript for maximum compatibility and minimal dependencies