How it works

A short tour of what happens when you process a photo with PhotoFileSize.

Everything runs in your browser

When you select an image, the file is read as a local URL using URL.createObjectURL. The browser draws it onto a hidden HTML5 <canvas> element. Cropping, resizing, background fill, and compression all happen on that canvas. No bytes ever touch our servers — we don't have one for image processing.

Step by step

  1. Decode. Your file is decoded by the browser. HEIC files are first converted to JPEG using a WebAssembly decoder loaded on demand.
  2. Crop. You position the visible region with drag and zoom. The cropper outputs exact pixel coordinates.
  3. Resize. The cropped pixels are drawn into a target canvas at your chosen output size (e.g. 413×531 px).
  4. Background. If you picked white or light gray, that color is filled before the photo is drawn. Transparent only applies to PNG output.
  5. Compress. For JPEG, we binary-search the quality between 0.4 and 0.95 to land just under your target size. If quality alone isn't enough, we progressively scale down. For PNG, we scale only.
  6. Download. The blob is offered as a direct download via a temporary object URL.

What we do not do

  • No image upload to any server.
  • No face detection, no AI cropping.
  • No accounts, no cookies needed for the tool itself.
  • No third-party image processing APIs.

What we do use

  • The browser's built-in Canvas 2D API for drawing and resampling.
  • react-easy-crop for the crop UI.
  • heic2any for client-side HEIC → JPEG conversion.
  • jsPDF for assembling the printable photo sheet.
Sponsored