Serving a 4,000 px wide photo in a 700 px column is one of the most common and most wasteful mistakes in web publishing. The browser downloads all 4,000 pixels, then scales them away — wasting bandwidth, slowing LCP, and costing your users data. Resizing to the actual display size before upload solves it in under a minute.
Resizing vs compressing vs cropping
These three operations are often confused — here is what each one actually does:
- Resize — scales the entire image to new pixel dimensions. Nothing is removed; the whole image is resampled to fit the new size. Smaller dimensions mean fewer pixels and a smaller file.
- Compress — reduces file size at the same dimensions by increasing the lossy compression ratio. A 1200×630 image at 65% quality is still 1200×630 px, just with more encoding artefacts. Use the Image Compressor for this.
- Crop — removes the edges to change the framing or aspect ratio. The remaining content is not scaled. Use the Image Cropper for this.
In practice you often do all three: crop first (get the framing right), then resize to the target dimensions, then compress for delivery.
When to use pixel mode vs percentage mode
Pixel mode is the right choice when you have a specific target size: a 1200×630 Open Graph image, a 400×400 avatar, a 1920×1080 hero. You enter exact dimensions and the aspect ratio lock prevents distortion.
Percentage mode is faster when you just need to scale down a large original without calculating the target pixels. At 50% both dimensions are halved, reducing pixel count to 25% of the original (and file size proportionally). This is ideal for batch reducing DSLR exports or screenshots before upload.
Aspect ratio: when to lock, when to unlock
The aspect ratio lock is on by default. With it on, entering a width automatically recalculates the height to maintain the original proportions — preventing the stretched-image problem.
Unlock it only when you need a specific output shape that differs from the original: for example, turning a landscape photo into a square avatar, or fitting an image into a fixed container. After unlocking, the image will be stretched to fit — consider cropping first to get the right framing.
Target dimensions for common use cases
- Open Graph / Facebook share image: 1200 × 630 px
- Twitter / X card: 1200 × 675 px
- YouTube thumbnail: 1280 × 720 px
- Instagram square post: 1080 × 1080 px
- Instagram portrait post: 1080 × 1350 px
- Full HD desktop wallpaper: 1920 × 1080 px
- Blog article hero: 1200 × 628 px
- E-commerce product image: 800 × 800 px
- Profile avatar: 400 × 400 px
- Thumbnail / card: 300 × 300 px
The Image Resizer includes one-click presets for the most common sizes so you do not need to type in the numbers manually.
Which output format to choose
WebP is the right choice for virtually all web images. It achieves 25–35% smaller file sizes than JPEG at equivalent quality, supports transparency, and is supported by every modern browser. If you are resizing images for a website, always output WebP.
JPEG is safer for maximum compatibility — email clients, older CMS platforms, and some social channels still handle JPEG most reliably. Use 80–85% quality for web delivery.
PNG is lossless — the quality slider does not affect file size. PNG files are typically 3–5× larger than equivalent WebP. Use PNG only for logos, icons, or screenshots where exact pixel accuracy matters and transparency is required.
Resize + compress: the one-two punch for Core Web Vitals
Resizing and compressing together are more powerful than either alone. A 4,000 px JPEG at 85% quality might be 2.5 MB. Resize it to 1,200 px first and it drops to ~250 KB at the same quality setting — a 10× reduction. Now compress it to WebP at 75% quality and it might land at 60–80 KB.
For the best results on images destined for the web: resize first using this tool, then pass the output through the Image Compressor to squeeze the format further.
Resize images free — no upload, no signup →FAQ
Does resizing reduce quality? Scaling down (to smaller dimensions) has minimal visible impact — you are just removing pixels. Scaling up (to larger dimensions) always loses sharpness because the tool has to invent new pixels.
Are my images uploaded to a server? No — the Image Resizer runs entirely in your browser using the Canvas API. No files are sent anywhere.
What formats are supported? Input: JPEG, PNG, WebP, GIF. Output: JPEG, PNG, WebP. GIF animation is not preserved — a static frame is exported.
What is the maximum file size? 20 MB per file. Larger images may exhaust browser memory during Canvas processing.
Wrapping up
Resizing images to the actual display width is the single most impactful step you can take before uploading to a website — it directly reduces LCP and bandwidth with no quality loss visible to the user. Combine it with WebP output and you will consistently hit Google's recommended image sizes for Core Web Vitals.
Related free tools: Image Resizer · Image Compressor · Image Cropper · Meta Tag Generator