Image Cropper

Crop images with preset aspect ratios (1:1, 4:3, 16:9, 3:2) or freeform selection. Download as PNG or JPG. Your original image is never modified.

Key features

Visual drag-and-resize crop area
Preset aspect ratios: 1:1, 4:3, 16:9, 3:2, and free
Download cropped image as PNG or JPG
Manual width and height input
Privacy-first - no image uploads

Guide

Image cropping removes the outer portions of a photograph or graphic, keeping only a selected rectangular region. This tool lets you define the crop area visually on a canvas, set exact pixel dimensions, lock an aspect ratio, and download the cropped result in your choice of format. Everything runs in your browser using the Canvas API. No image is sent to a server. Cropping is one of the most fundamental image editing operations, and it is the one that most people need most often. Unlike color correction, retouching, or compositing, cropping does not require artistic skill or technical expertise. You just decide what to keep and what to remove. Yet the impact on the final image is significant. A well-cropped image communicates its subject clearly, fits its intended container, and eliminates distracting elements. A poorly cropped image wastes space, confuses the viewer, or misses the visual focal point. Why cropping matters in practical workflows. Raw photographs from cameras and phones include more area than needed for most uses. A portrait taken against a park background might need just the head and shoulders for a profile picture. A product photograph on a wide table needs only the product itself for a catalog listing. Screenshots of entire desktops need only the relevant window or dialog. Food photographs for a recipe blog need a tight crop of the dish, not the entire table setting. Real estate photographs for property listings may need different crops for the listing card (landscape), the listing page (wide), and the agent portal (square). Cropping is the bridge between raw capture and published content. Aspect ratio control. Different platforms and use cases require different aspect ratios. Instagram posts use 1:1 (square) or 4:5 (portrait). Instagram stories use 9:16 (vertical). YouTube thumbnails are 16:9. Standard photographs are 4:3 or 3:2 depending on the camera. Facebook cover photos are 820x312 pixels (roughly 2.63:1). LinkedIn banner images are 1584x396 (4:1). Twitter/X header images are 1500x500 (3:1). Open Graph preview images are 1200x630 (1.91:1). Pinterest pins perform best at 2:3 or 1:2.1 vertical ratios. Passport photos are typically square or specific ratios like 35mm x 45mm (7:9). The tool lets you lock an aspect ratio before cropping, so the selection rectangle always maintains the correct proportions as you drag to resize. This ensures the output matches the platform requirements without needing to check dimensions after every adjustment. You can also enter custom aspect ratios for platforms not in the preset list. Free-form versus fixed crop. In free-form mode you drag the crop handles to any position and size with no constraints. This is useful when you do not have a specific ratio requirement and just want to trim unwanted edges or reframe the composition. In fixed ratio mode the tool constrains the selection. You drag to resize but the width-to-height proportion stays locked. Some users need exact pixel output (e.g., exactly 1200x630 for an Open Graph image, not 1201x630 or 1199x629). The tool supports entering precise width and height values as the target output size, and the crop selection locks to those proportions. How the tool works technically. The source image is loaded onto a Canvas element at its original pixel dimensions. If the image is very large (e.g., 8000x6000 from a high-resolution camera), the display canvas is scaled down to fit the viewport, but the crop coordinates operate on the full-resolution pixel grid. A draggable, resizable selection overlay appears on top of the canvas. The overlay shows the selected region at full brightness and dims the excluded areas with a semi-transparent dark mask. Corner and edge handles let you resize the selection. Clicking inside the selection and dragging moves it. When you confirm the crop, the tool creates a new offscreen canvas at the dimensions of the selection (or the specified output dimensions). It draws the selected region of the source image onto the output canvas using the drawImage method: drawImage(sourceCanvas, sx, sy, sw, sh, 0, 0, dw, dh). The parameters sx, sy, sw, sh define the source rectangle (the crop area on the original image), and dw, dh define the destination dimensions (the output size). If dw and dh differ from sw and sh, the browser resamples the image. This means cropping and resizing happen in a single, efficient operation. If you crop a 2000x2000 region from a 6000x4000 image and set the output to 1000x1000, the result is both cropped and downscaled in one drawImage call. The cropped canvas is then exported using toBlob() in the chosen format (PNG, JPEG, or WebP) at the chosen quality level. The resulting blob is converted to a downloadable URL using URL.createObjectURL(). Step-by-step usage for creating a social media profile picture. Start with a full-body or half-body photograph. Open the image cropper page. Upload the photo by dragging it onto the drop zone or clicking to browse. Set the aspect ratio to 1:1 (square) using the preset buttons or dropdown. The crop selection appears as a square overlay on the image. Drag the crop selection to center on the face and shoulders. The dimmed areas outside the selection show what will be removed. Adjust the size of the selection by dragging the corner handles, making it larger to include more background or smaller for a tighter crop. When the framing looks right, click the crop or apply button. Choose JPEG as the output format with quality 85 for a photograph. Click download. The file is ready to upload as a profile picture on any platform that accepts square photos. Step-by-step for an Open Graph (OG) image. The recommended OG image size is 1200x630 pixels. When someone shares your URL on Facebook, LinkedIn, or Twitter/X, these platforms fetch the og:image URL and display it as a preview card. A properly sized OG image fills the card without awkward cropping by the platform. Open the cropper. Upload your source image (ideally at least 2400 pixels wide for the best quality). Set the aspect ratio to 1200:630 or the simplified ratio 40:21. Drag the selection to frame the most important visual content, typically the headline text or the central graphic. Click crop. Set the output dimensions to exactly 1200x630 if not already set. Download as JPEG at quality 85 or PNG if the image has text that needs sharp edges. Reference the downloaded file in your HTML meta tags as the og:image. Step-by-step for a passport photo. Passport photo requirements vary by country, but most specify precise dimensions, face positioning, and file size limits. A common specification is 600x600 pixels (2x2 inches at 300 DPI) with the face occupying 70-80 percent of the vertical frame and centered horizontally. Set the aspect ratio to 1:1. Set the output size to 600x600. Position the crop so the face is centered horizontally with a small margin of empty background above the head (about 10-15 percent of the total height). The bottom of the crop should be at approximately mid-chest level. Download as JPEG. Some passport and visa services also require a specific file size (e.g., under 240 KB for the US passport site). Use the file size resizer tool after cropping if needed. Step-by-step for a YouTube thumbnail. YouTube recommends 1280x720 pixels for thumbnails, with a minimum width of 640 pixels. The aspect ratio is 16:9. Open the cropper with your source image. Lock the aspect ratio to 16:9. Position and size the selection to frame the most compelling visual from the video or the designed thumbnail graphic. Set output dimensions to 1280x720. Download as JPEG at quality 90 for the cleanest result, since YouTube will re-compress the thumbnail anyway. Common mistakes. Cropping too tightly. Leaving no breathing room around the subject makes the image feel cramped and claustrophobic. For portraits, include some space above the head (headroom) and to the sides of the shoulders. For product photos, leave a margin around the product to allow for text overlay, padding in the layout container, or design variations. A 10-15 percent margin around the main subject is a safe default. Cropping after heavy compression. If your source JPEG was saved at low quality (50 or below), the compression artifacts are permanently embedded in the pixel data. Cropping does not improve quality. It just selects a region of the already-damaged image. If you notice visible block artifacts, color banding, or mosquito noise in the cropped area, the source image quality is the problem. Find a higher quality version of the source or re-export from the original RAW or layered project file. Ignoring the rule of thirds for photographs. For editorial and artistic photographs (not profile pictures or document scans), the crop composition affects how the image feels. The rule of thirds places the subject at one of the four intersections of a 3x3 grid rather than dead center. This creates a more dynamic, visually appealing composition. Many cropping tools overlay a rule-of-thirds grid on the selection area to help with placement. A landscape photo with the horizon on the lower third line and the subject at the left third intersection will feel more balanced than the same photo with the horizon centered and the subject dead center. Upscaling via crop. If you crop a 200x200 region and set the output to 800x800, the tool will upscale the pixels by 4x. The browser interpolation creates new pixels by averaging neighbors, producing a blurry, soft result with no real additional detail. This is worse than it sounds because the blurriness is not uniform. Edges become softer while flat areas stay the same, creating an uncanny quality. Only downscale or maintain the original resolution when cropping. If you need a 1200x630 OG image but your source is only 800 pixels wide, find a larger source image. Upscaling from 800 to 1200 (1.5x) will be noticeably soft. Advanced tips. Non-destructive cropping in professional workflows. In Lightroom, Capture One, and other RAW processors, crops are stored as metadata in XMP sidecar files or the catalog database rather than applied to the pixel data. You can change or undo the crop at any time without quality loss. Browser-based cropping is destructive. Once you download the cropped result, the excluded pixels are not in the downloaded file. Keep your original source files intact and always crop copies, never originals. Batch cropping for e-commerce. If you need to crop 30 product photos to the same dimensions and position (e.g., centering each product in a 1000x1000 frame with consistent padding), manual cropping is tedious and inconsistent. Consider a scripted approach using sharp (Node.js), Pillow (Python), or ImageMagick (command line) with predefined crop coordinates or an auto-center algorithm. Some e-commerce platforms (Shopify, Magento) offer automatic image processing pipelines that crop and resize uploads to standard sizes. The browser tool is best for individual or small-batch work where each image needs unique crop positioning. Content-aware and AI-assisted cropping. Advanced tools like Adobe Photoshop's Content-Aware Crop, Google Photos auto-suggestions, and Apple Photos composition tools use machine learning to identify the most important region of an image and suggest crop boundaries. These tools detect faces, text, salient objects, and high-contrast areas to avoid cutting off important content. The browser-based tool here relies on manual selection, which gives you full control at the cost of automation. For bulk workflows, cloud APIs like Google Cloud Vision or AWS Rekognition can provide saliency maps that inform automatic crop positioning. Cropping for responsive web design. When preparing images for responsive layouts, you may need multiple crops of the same source image. A wide landscape (16:9 or wider) for desktop hero sections. A square (1:1) for tablet card layouts. A tall portrait (3:4 or 2:3) for mobile full-width display. Process the source through the cropper three times with different aspect ratios. Use the HTML picture element with media queries and the source element's media attribute to serve the appropriate crop to each screen size. This art direction approach ensures that the important subject matter is always visible regardless of the viewport shape. Circular crops. Many platforms (LinkedIn, GitHub, Google, Discord) display profile pictures as circles, but the underlying file is always a square bitmap. Crop your image to a 1:1 square with the subject centered. The platform applies the circular mask in CSS (border-radius: 50%). Do not try to create a circular image with transparent corners using this tool unless specifically required by the platform. Most platforms ignore PNG transparency and apply their own circular mask. Cropping screenshots for documentation and bug reports. Technical documentation, bug reports, and support tickets often include screenshots. Full-screen screenshots contain unnecessary elements like the taskbar, bookmarks bar, other browser tabs, notification icons, and the clock. These elements add visual noise, increase file size, and can inadvertently expose personal information (open tabs, notification content, username in the taskbar). Crop screenshots to show only the specific dialog, panel, error message, or output that is relevant. After cropping, annotate with arrows, boxes, or numbered callouts to highlight the important areas. DPI and print considerations. Cropping reduces the pixel count of an image, which directly affects its printable size. If you started with a 3000x2000 pixel photograph intended for print at 300 DPI (10x6.67 inches), cropping to 1500x1000 reduces the print size to 5x3.33 inches at 300 DPI. Cropping to 750x500 gives you only 2.5x1.67 inches at 300 DPI. If you need the image to print at a specific physical size, calculate the required pixel dimensions (print width in inches times DPI = pixel width) before cropping, and ensure your crop selection meets or exceeds those pixel dimensions. Export format choice after cropping. For photographs, export as JPEG at quality 85-90 for the best file size to quality ratio. For screenshots, UI mockups, and graphics with text or sharp edges, export as PNG for pixel-perfect edges and lossless quality. For web use where you control the serving infrastructure, export as WebP for 25-35 percent smaller files than JPEG at the same visual quality. The cropper tool lets you choose the format at export time. Choose based on the content type and destination, not based on the source format. Performance considerations. Cropping itself is computationally trivial. The drawImage call that copies the selected region to the output canvas takes under 1 ms even for very large images. The only potentially slow part is the initial image load. A 50 megapixel photograph (8688x5792 pixels) takes 200-500 ms to decode and render to a canvas. Once loaded, cropping is instant. The interactive drag and resize operations run at 60 fps because they only reposition the selection overlay, they do not re-process the image. Memory usage. The source image is held in memory as a full-resolution uncompressed RGBA bitmap. A 6000x4000 photograph at 4 bytes per pixel (RGBA) consumes 96 MB of memory. The cropped output at 1200x630 consumes only 3 MB. After the crop is confirmed, the output canvas can be much smaller than the source. If you are working with very large images (panoramas, stitched images, or drone photos at 50+ megapixels), you may approach the browser's per-tab memory limit (typically 1-4 GB depending on browser and operating system). Most standard photographs from modern cameras (12-50 megapixels, which translates to 48-200 MB as uncompressed RGBA) are well within limits. Undoing a crop. The tool provides a reset button that restores the original image so you can make a different selection. Some implementations also offer an undo button that reverts the last crop while keeping any previous adjustments. Once you download the cropped file to disk, the original is still available in the tool until you navigate away or upload a different image. Always verify the crop framing before downloading. Zoom in on the edges of the crop to check that you have not cut off any important content. Coordinate system and precise numerical input. The crop coordinates are in pixel space relative to the original full-resolution image. If your image is 3000x2000 and you select a region from (500, 300) to (2500, 1700), the crop is 2000x1400 pixels from the source. Some tools display these coordinates numerically in input fields, allowing precise entry for repeatable crops. If you need to communicate crop coordinates to a colleague or a script (e.g., "crop the image to x=500, y=300, width=2000, height=1400"), these numerical values are the standard way to specify a crop. Comparison with CSS object-fit. In web development, CSS object-fit: cover combined with object-position can achieve visual cropping without modifying the image file. The browser downloads the full image, renders it to fill the container, and hides the overflow. This is convenient for responsive layouts where the crop needs to adapt to different screen sizes. However, it wastes bandwidth because the full image is transferred even though portions are hidden. For performance-critical pages, crop the image server-side or before upload and serve only the necessary pixels. Reserve CSS cropping for dynamic layouts where the crop area changes based on container size and where the bandwidth cost is acceptable.

Frequently asked questions

What aspect ratios are available?

Free (any ratio), 1:1 (square), 4:3 (standard), 16:9 (widescreen), and 3:2 (photo).

Is the original image modified?

No, the original image is never modified. The cropped version is generated as a new file.