Design · 4 min read
Resize, Crop, and Rotate: Image Editing Basics for the Web
Most images go on the web straight from a phone camera — 4,000 pixels wide, several megabytes, and sometimes sideways. A few quick edits fix all of that.
Try it yourself with the related tool.
Edit an image →Advertisement
Resize vs crop
Resizing scales the whole image to fewer (or more) pixels and keeps everything in the frame. Cropping cuts away the edges to change framing or aspect ratio. To fit an image into a fixed shape such as a square avatar, crop to the ratio first, then resize.
How big should it be?
Size images to the largest width they are displayed at, times two for high-density screens. A blog image shown 800 pixels wide needs about 1600 pixels. Anything larger only wastes bandwidth. Upscaling a small image will not add detail — it just makes the blur bigger.
Rotation and orientation
Phones often save photos in one orientation and record the intended rotation in EXIF metadata. Some apps ignore that tag, so the photo appears sideways. Rotating the pixels and saving fixes it everywhere.
Quality and format
Every JPEG save loses a little quality, so edit from the original and export once. Choose WebP or JPEG for photos and PNG for graphics with sharp edges. Exporting also lets you strip location metadata before sharing.