ImageFit

ImageFit is a browser-based image editor for preparing one source image for several social-media and profile-image formats. Upload an image, position the crop, choose the presets you need, and download individual files or a ZIP bundle.

All image editing and export work happens locally in the browser. Uploaded files are not sent to a server.

Features

• Upload JPG, PNG, APNG, WebP, GIF, SVG, AVIF, HEIC, BMP, TIFF, PSD, Targa, QOI, or JPEG 2000 images up to 50 MB, or MP4, WebM, MOV, M4V, AVI, and MKV videos up to 3 GB in the browser (no size limit in the desktop app).
• Crop, zoom, and rotate the source image.
• Export presets for Instagram, Discord, GitHub, LinkedIn, Open Collective, YouTube, Roblox, Twitch, X, and TikTok.
• Choose JPEG, PNG, or WebP output with adjustable quality.
• Choose a crop, blurred backdrop, solid colour, gradient, or transparent background where the output format supports it.
• Apply monochrome, warm, or colour-pop effects.
• Download one export directly or package several exports into a ZIP file.
• Compress the original image with size and quality presets, searching for the best quality that fits the limit.
• Keep animation when compressing animated GIFs and APNGs, which are re-encoded to animated WebP.
• Edit and export formats browsers cannot display, such as HEIC, TIFF, PSD, Targa, and QOI, which are converted on load.
• Encode with hardware acceleration automatically on desktop when the graphics driver supports it.
• Use Discord 5 MB and 10 MB image presets that encode to the selected maximum size.
• Transcode videos locally to MP4, WebM, MOV, AVI, OGV, or GIF files sized for Discord's 5 MB or 10 MB upload limits.
• Encode H.264, H.265/HEVC, AV1, VP8, VP9, MPEG-4 Part 2, ProRes, DNxHD, MJPEG, and Theora video.

Run Locally

Prerequisites

• Node.js 20 or later
• pnpm 11 (Corepack can install the pinned version automatically)

Install and start

pnpm install
pnpm dev

Vite prints the local development URL when the server starts.

Commands

# Start the Vite development server
pnpm dev

# Run ESLint
pnpm lint

# Type-check and create a production build in dist/
pnpm build

# Preview the production build locally
pnpm preview

Website And Desktop Releases

ImageFit is available in two forms:

• Website: GitHub Actions builds dist/ and deploys it to GitHub Pages whenever main is updated.
• Desktop: Electron packages the same interface with native FFmpeg video processing. Download the Linux AppImage, macOS .dmg, Windows portable .exe, or Windows NSIS installer from the GitHub Releases page. macOS builds are Apple silicon and are currently unsigned, so the first launch needs Control-click → Open.

Desktop development

# Run the Electron app locally
pnpm desktop

# Create a Linux AppImage in release/
pnpm desktop:package:linux

# Create a Windows portable executable in release/
pnpm desktop:package:win

# Create a macOS DMG and update zip in release/ (must be run on macOS)
pnpm desktop:package:mac

Desktop video engines

ImageFit Desktop detects available hardware encoders from its bundled FFmpeg build. H.264, H.265/HEVC, and AV1 can use NVIDIA NVENC, Intel Quick Sync, AMD AMF, or Apple VideoToolbox when the selected codec and installed graphics driver support them. Software FFmpeg remains available for every codec. The browser version always uses software FFmpeg.

The desktop control in the app header shows detected hardware encoders, selects the native output folder, opens media through the operating system, and reports available release updates. The Windows installer creates Start-menu and desktop shortcuts and registers supported image and video files to open in ImageFit.

The Windows release job signs installers automatically when the repository has WINDOWS_CERTIFICATE_BASE64 (a base64-encoded code-signing certificate) and WINDOWS_CERTIFICATE_PASSWORD secrets. Without those secrets, releases still build but Windows may show SmartScreen warnings.

Push a version tag such as v1.0.0 to build both desktop targets and publish their artifacts to a GitHub release:

git tag v1.0.0
git push origin v1.0.0

How It Works

1. Upload an image from your device.
2. Adjust the crop, zoom, and rotation in the editor.
3. Select one or more platform presets.
4. Configure the output format, quality, background, and optional effect.
5. Export a single image or download all selected formats in imagefit-export.zip.

The Image Squish panel provides a separate quick-compression workflow for the original upload. It does not apply the editor crop or export settings.

Technology

• React and TypeScript
• Vite
• Tailwind CSS
• react-easy-crop for image positioning
• JSZip and FileSaver for batch downloads

Project Structure

src/
  components/  User interface and image workflow controls
  data/        Social-platform preset dimensions
  hooks/       Upload and object-URL lifecycle handling
  lib/         Canvas processing, downloads, and ZIP creation