Documentation

Introduction

Webpifier is a cutting-edge, browser-based tool designed to help you compress and convert images efficiently for the web. Built with privacy and performance in mind, all image processing happens directly in your browser, ensuring your images never leave your device.

Whether you're a developer, designer, or content creator, Webpifier provides a simple yet powerful way to optimize images for the web. With support for modern formats like WebP and AVIF, you can significantly reduce file sizes while maintaining excellent visual quality. This helps your websites load faster, rank better in search engines, and provide a superior user experience across all devices.

How It Works

Quick Start Guide

Privacy & Security

At Webpifier, we take your privacy and security extremely seriously. Our tool is designed with a privacy-first approach:

For complete details about how we handle your data, please read our Privacy Policy.

Image Formats

Webpifier supports conversion to modern image formats that provide superior compression and quality, capable of reducing file sizes by up to 99% while maintaining excellent visual quality:

Compression Options

Webpifier gives you flexible control over compression settings to find the perfect balance between image quality and file size. Our advanced algorithms can achieve up to 99% compression with WebP and up to 95% with AVIF while maintaining solid visual quality:

// Example compression settings object
const compressionOptions = {
  quality: 0.8,         // 0.8 = 80% quality (good balance)
  method: "lossy",      // "lossy" or "lossless"
  resize: {
    width: 1200,        // Set maximum width
    height: null,       // Auto-calculate height to maintain aspect ratio
    fit: "inside"       // Fit image within dimensions
  },
  metadata: false,      // Strip all metadata
  format: "webp"        // Convert to WebP format
};

// For maximum compression (up to 99% reduction)
const maxCompressionOptions = {
  quality: 0.65,        // Lower quality for extreme compression
  method: "lossy",
  format: "webp",       // WebP format for best compression
  resize: {
    width: 1000,        // Slightly reduce dimensions if possible
    height: null,
    fit: "inside"
  },
  metadata: false
};

Batch Processing

Process multiple images at once with Webpifier's powerful batch processing feature. Save time and ensure consistent results across all your web images:

Custom Dimensions

Resize your images during compression to create optimized versions for different devices and screen sizes:

// Common responsive image dimensions
const responsiveSizes = {
  thumbnail: { width: 150, height: 150, fit: "cover" },
  small: { width: 400, height: null },      // Auto height
  medium: { width: 800, height: null },     // Auto height
  large: { width: 1200, height: null },     // Auto height
  hero: { width: 1920, height: 1080, fit: "cover" }
};

MCP Integration

Webpifier now offers integration with MCP (Media Content Platform) services, allowing you to upload your compressed images directly to supported content management systems like Webflow.

How to Use MCP

To use MCP integration, click the MCP icon in the navigation bar to open the configuration panel. From there, you can:

1. Click the MCP icon in the Webpifier navigation
2. Select your preferred MCP service (Webflow, Zapier, or custom server)
3. Enter your API credentials and endpoint information
4. Click "Connect" to test the connection
5. After compressing your images, use the "Upload to CMS" button to send them directly to your connected service

Troubleshooting MCP Connections

// Setting up MCP integration with Webpifier
const connectToWebflow = async () => {
  try {
    // Configure connection to Webflow MCP
    const webflowConfig = {
      serverType: 'webflow',
      apiKey: 'your-webflow-api-key',
      siteId: 'your-webflow-site-id',
      collectionId: 'your-webflow-collection-id'
    };
    
    // Test connection
    const connected = await testConnection(webflowConfig);
    
    if (connected) {
      console.log('Successfully connected to Webflow MCP');
      return { success: true };
    }
  } catch (error) {
    console.error('MCP integration error:', error);
    return { success: false, error };
  }
};

Best Practices

Follow these guidelines to get the most out of Webpifier and achieve optimal image compression results:

Format Comparison

Compare the performance and characteristics of different image formats to make informed decisions about which format to use for your specific needs:

WebP Details

WebP is a modern image format developed by Google that provides superior compression for web images. Using Webpifier's enhanced processing, WebP images can be compressed by up to 99% of their original size while preserving excellent visual quality:

<!-- Basic WebP image with JPEG fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

<!-- Responsive WebP image -->
<picture>
  <source 
    type="image/webp"
    srcset="image-small.webp 400w, image-medium.webp 800w, image-large.webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px">
  <img 
    src="image-fallback.jpg" 
    alt="Description"
    loading="lazy">
</picture>

AVIF Details

AV1 Image File Format (AVIF) is a next-generation image format offering excellent compression efficiency. With Webpifier's implementation, AVIF can achieve up to 95% reduction in file size while maintaining good visual quality:

Browser Compatibility

Understanding browser support is essential when choosing image formats for your website:

Implementing Fallbacks

To ensure compatibility across all browsers, implement proper fallbacks using the picture element:

<picture>
  <!-- AVIF: first priority (smallest file size) -->
  <source 
    type="image/avif" 
    srcset="image.avif"
  >
  
  <!-- WebP: second priority -->
  <source 
    type="image/webp" 
    srcset="image.webp"
  >
  
  <!-- JPEG/PNG: fallback for older browsers -->
  <img 
    src="image.jpg" 
    alt="Image description" 
    width="800" 
    height="600"
    loading="lazy"
  >
</picture>

const supportsWebp = () => {
  const elem = document.createElement('canvas');
  return elem.toDataURL('image/webp')
    .indexOf('data:image/webp') === 0;
};

const supportsAvif = async () => {
  if (!createImageBitmap) return false;
  
  // Base64 representation of a minimal AVIF image
  const avifData = 'data:image/avif;base64,AAAAIGZ0eXBh'
    + 'dmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQ'
    + 'AAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAA'
    + 'AAAAAABsaWJhdmlmAAAAADnBpdG0AAAAAAABAAFIxAAE=';
  
  try {
    const blob = await fetch(avifData).then(r => r.blob());
    return await createImageBitmap(blob)
      .then(() => true, () => false);
  } catch (e) {
    return false;
  }
};

const supportsWebp = () => {
  const elem = document.createElement('canvas');
  return elem.toDataURL('image/webp')
    .indexOf('data:image/webp') === 0;
};

const supportsAvif = async () => {
  if (!createImageBitmap) return false;
  
  // Base64 representation of a minimal AVIF image
  const avifData = 'data:image/avif;base64,AAAAIGZ0eXBh'
    + 'dmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQ'
    + 'AAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAA'
    + 'AAAAAABsaWJhdmlmAAAAADnBpdG0AAAAAAABAAFIxAAE=';
  
  try {
    const blob = await fetch(avifData).then(r => r.blob());
    return await createImageBitmap(blob)
      .then(() => true, () => false);
  } catch (e) {
    return false;
  }
};

FAQ

Answers to the most common questions about Webpifier - your ultimate online image compression and WebP conversion tool:

Troubleshooting

Solutions to common issues that may arise when using Webpifier:

Changelog

Track the development and improvements to Webpifier: