How to Compress, Crop and Resize Images for the Web
Most images that slow a page down are not badly compressed — they are simply far bigger than the space they are shown in. Resizing, cropping and compressing each solve a different part of that problem.
Key takeaways
- Resizing changes the pixel dimensions of the whole image.
- Cropping removes edges to change the shape or focus.
- Compressing reduces file size at the same dimensions.
- Crop, then resize, then compress for the best quality.
Three different jobs
Resizing scales the whole picture to new dimensions, for example from 4000 pixels wide down to 1200. Cropping cuts away part of the picture, which changes its shape and what it focuses on. Compressing keeps the dimensions and reduces how many bytes are used to store them.
They are easy to confuse because all three make the file smaller, but they change different things — and only one of them changes what is actually in the frame.
Getting the shape right
Different places expect different shapes. A square 1:1 crop suits profile pictures and many feed posts, 16:9 suits video thumbnails and banners, and 4:3 is a comfortable general-purpose shape.
Cropping to the right ratio yourself means you decide what stays in the frame, instead of leaving a platform to cut off someone's head automatically.
The order that works
Crop first, so you are only working with the part you want. Resize next, to the largest size the image will actually be displayed at. Compress last, because compression works best when it is the final step and nothing is rescaled afterwards.
For photos, a quality setting somewhere around 70 to 85 percent is usually indistinguishable from the original at a fraction of the size.
Doing it in your browser
Video to Images includes Image Crop, Image Resize and Image Compressor tools. Image Crop offers 1:1, 16:9 and 4:3 presets as well as a custom shape with a live preview.
All three process the image on your own device, so your pictures are not uploaded.
Gowtham
Solo developer and creator, writing clear guides and building tools so you always have current, trustworthy content.
