AppHelp guide
Image Crop, Resize, Rotate, Convert, and Data URL Workflows
Learn how to prepare web images with crop, resize, rotation, format conversion, and Data URL output without uploading files by default.
Quick answer
Crop to choose the visible subject, resize to reduce dimensions, rotate or flip to fix orientation, convert format for compatibility, and use Data URLs only for small assets that must be embedded directly in code or documents.
Start with geometry before compression
Cropping and resizing usually save more bytes than lowering quality alone. Fix the frame, dimensions, and orientation before choosing WebP, JPEG, PNG, or another output format.
- Crop unwanted background before resizing
- Resize to the actual display dimensions
- Rotate or flip before exporting the final file
Choose format by destination
Use WebP for many web assets, JPEG for photos without transparency, and PNG for transparent graphics or crisp UI screenshots. Convert only when the destination supports the format.
Use Data URLs sparingly
Data URLs are convenient for tiny embedded assets, examples, and CSS snippets. Large Data URLs make HTML and JSON harder to read and can increase document size.
Frequently asked questions
Should I crop or resize before converting image format?
Crop and resize first so the converted output only contains the pixels and dimensions you actually need.
When should I use an image Data URL?
Use Data URLs for very small embedded assets or examples. Keep normal image files for larger assets.