Color Contrast Checker
Check foreground and background colors against WCAG contrast ratios for normal text, large text, and common interface states.
Crop and resize JPG, PNG, and WebP images in your browser with aspect-ratio controls, dimension presets, preview, and download.
Drop an image here, or use the file picker.
Use this tool when an image needs a specific pixel size, aspect ratio, or export format before it can be uploaded or published.
The resizer accepts JPG, PNG, and WebP images from a local file. Downloads use the uploaded file type by default, with other formats available from the download menu.
Use JPG for photographs when broad compatibility and smaller file sizes matter. Use PNG when sharp edges, screenshots, or transparency are important. Use WebP when you want modern compression and the destination supports it.
Resizing changes pixel dimensions. Cropping changes the composition by selecting part of the image. If a platform requires a fixed ratio, such as a square post or widescreen thumbnail, crop deliberately so important faces, text, logos, or product details are not cut off.
The selected image is decoded locally, edited with a browser crop box, drawn to a canvas at the requested dimensions, and exported as a downloadable PNG, JPEG, or WebP file. The original image is not uploaded or stored by utilkit.
The crop box preserves the requested output ratio so the downloaded file is not stretched. If the requested size is larger than the source crop, the browser has to upscale pixels, which may make the result look softer. For best quality, start with an image that is at least as large as the final size.
Metadata such as camera EXIF data may not be preserved in the exported canvas image. That is usually helpful for privacy and file size, but it matters if you need to keep original camera details.
Choose dimensions from the place the image will appear. A content column, social card, product grid, and high-density icon need different aspect ratios and pixel sizes. Exporting a much larger image than the layout uses wastes transfer and memory. Exporting too small forces the browser or app to enlarge it and reveal softness.
Cropping changes composition, while resizing changes pixel dimensions. Lock the aspect ratio when the whole frame should remain visible. Use a crop when the destination has a fixed shape, then move the crop to protect faces, text, products, or other important content. Review both wide and narrow placements because a single focal point may not work everywhere.
Downscaling discards detail and cannot be perfectly reversed. Keep the original file in a safe location and export a new derivative. Avoid a workflow that repeatedly opens and resaves the same lossy JPEG; each generation can add artifacts. Return to the original whenever another size is needed.
File format affects the result. JPEG is often efficient for photographs but does not support transparency. PNG preserves sharp edges and transparency but can be large for photos. WebP can handle photographic and transparent images efficiently in modern workflows. Test required browser, email, document, or platform support before standardizing on one format.
Orientation metadata can make a photo appear upright even when its stored pixels are rotated. A processing pipeline may normalize orientation and remove that metadata, changing the reported dimensions. Check the exported image in the target application, especially for phone photos. Do not use width and height alone to infer whether an unprocessed photo is portrait or landscape.
Resizing does not make an image accessible. Add alternative text in the page or document when the image communicates information, and use empty alternative text when it is purely decorative. Do not bake important text into a raster image when live text would reflow, zoom, translate, and remain sharper.
For responsive websites, export enough size for the largest intended display and consider multiple derivatives with srcset or a picture element. The browser can then select a suitable resource instead of sending the largest image to every device. Use the image optimizer after dimensions are final.
The resize work occurs in the browser, which is useful for ordinary private images, but local processing does not remove every privacy concern. Filenames, downloads, cloud-synced folders, clipboard history, browser extensions, and the device itself can expose sensitive material. Follow the handling policy required for health, identity, legal, or confidential workplace images.
Built and maintained by utilkit. Updated . Found an issue? Send corrections to contact@utilkit.com
Check foreground and background colors against WCAG contrast ratios for normal text, large text, and common interface states.
Optimize JPG, PNG, and WebP images for free in your browser, with support for both lossy and lossless image compression.
Convert CSS colors between hex, RGB, HSL, OKLCH, and Lab formats while previewing the selected color and its component values.
Build a favicon package that works across browser tabs, bookmarks, Apple home screens, and installable web apps—without shipping a pile of unnecessary files.