How to Resize Images for Web Performance and Better UX
Resize by pixels, percent, or social presets (Instagram, YouTube, TikTok, Facebook/Meta, X, LinkedIn, Pinterest)—with fit, padding, fill-frame crop, stretch, optional face-aware smart crop, HEIC input, and bulk export—all in the browser.
In short
Match delivery pixels to layout, pick the right preset fit mode, then compress—not the other way around.
For web performance, deliver images near their rendered size, use preset fit modes intentionally (padding vs crop), then compress. Oversized originals waste bandwidth even when browsers downscale them on screen.
Match pixels to CSS layout, not camera sensors
A hero displayed at 720 CSS pixels wide does not need a 6000px upload. Browsers downscale oversized images, wasting bandwidth and decode time without adding visible detail on typical screens.
Use your analytics or field data to find the largest breakpoint you actually serve, then add modest headroom for retina (often 1.5×–2× of CSS width, not the full camera resolution).
Three resize modes in the tool
Custom size is best for CMS slots and fixed heroes—width and height stay in proportion automatically.
Scale % resizes every dimension (10%–200%) and is useful for uniform downscales across a folder.
Social sizes lists grouped platform presets (Instagram, YouTube, TikTok, Facebook/Meta, X, LinkedIn, Pinterest) with exact output pixels.
Social sizes — how it fits
Fit inside (add borders) keeps the entire image inside the platform size. Choose transparent, white, black, or custom border color. Previews use a checkerboard for transparency; JPEG exports fill empty bands with white because JPEG has no alpha.
Fill frame (crop edges) crops to the platform shape. Use manual crop anchors, drag the preview in single-image mode, or enable Center on faces to frame detected faces (falls back to center when none are found).
Stretch maps to exact preset width and height even when that distorts the photo—use only when distortion is acceptable.
Center on faces and bulk resize
Center on faces runs only in Social sizes + Fill frame. It uses the same on-device face model family as Blur Face; nothing is uploaded for detection.
Bulk resize applies one settings block to every file. Enabling center on faces switches bulk to Social sizes and Fill frame automatically. Queue cards preview with the same logic as export; use the magnifying-glass control to inspect framing before publishing.
Switching between One image and Multiple images resets the other session so queues and settings do not leak across modes.
Platform preset reference
Social sizes in Resize Image group exact pixels by channel. Instagram: 1080×1080 feed square, 1080×1350 portrait feed, 1080×1920 story/reels. YouTube thumbnail: 1280×720. TikTok cover: 1080×1920. Facebook/Meta: 1200×630 feed post and 1200×628 link preview (common Open Graph sizes). X post: 1200×675. LinkedIn: 1200×627 feed and 1584×396 page cover. Pinterest standard pin: 1000×1500.
Pick Fit inside when the full photo must remain visible; Fill frame when the placement behaves like a cover crop; Stretch only when you need exact width and height even if the photo distorts.
Pair resize with compression and caching
Right-sizing alone helps, but the winning workflow is resize → compress → cache with a long max-age and fingerprinted filenames. That combination moves Core Web Vitals more than any single slider tweak.
Breakpoint cheat sheet for content sites
Inline blog image: 800–960px wide. Full-width hero: 1200–1600px. Open Graph preview: 1200×630. Retina = multiply CSS width by 2 only when you see blur at 1× exports.
Log the largest ‘Rendered size’ from DevTools Network tab for your top 10 pages—resize templates to those numbers, not to camera defaults.
Why this works
- Right-sized assets reduce network transfer and decode cost.
- Preset fit modes prevent accidental stretch or unwanted platform crops.
- Bulk resize plus ZIP export keeps multi-breakpoint workflows fast without desktop software.
When to use this workflow
- Pages load slowly due to oversized images.
- You need exact social or hero dimensions without opening desktop editors.
- A batch of photos should share one width, percent scale, or preset rule.
- Cover-style social sizes should favor center on faces or a manual crop position.
Step-by-step guide
- Inspect the largest CSS width or channel spec you actually ship.
- In Resize Image, choose Custom size, Scale %, or Social sizes.
- For social sizes: pick Fit inside (and border color) to keep the full image, Fill frame to crop to ratio, or Stretch only when distortion is acceptable.
- For Fill frame portraits, try Center on faces or set manual crop position / drag the single-image preview.
- Preview, download (or bulk ZIP), then compress WebP/JPEG outputs.
- Spot-check one file on a phone before publishing a large batch.
Common mistakes to avoid
- Uploading camera originals because the CMS will downscale anyway.
- Using Stretch when you meant to letterbox or crop.
- Enabling center on faces while still in Custom size mode—it only runs on Social sizes + Fill frame.
- Skipping compression after resize.
- Upscaling small sources expecting print sharpness—use Upscale Image instead.
Frequently asked questions
Should I resize or compress first?
Resize first, then compress. Compression is more efficient when dimensions are already target-accurate.
When should I use Fit inside vs Fill frame?
Use Fit inside when the entire photo must remain visible (logos, screenshots, product grids). Use Fill frame when the placement behaves like a cover crop (many social feeds and thumbnails).
Do transparent borders stay transparent in JPEG?
Previews show transparency on a checkerboard, but JPEG export fills empty bands with white because JPEG has no alpha channel.
Can I resize hundreds of images to the same preset?
Yes. Switch to Multiple images, add files, set Presets (or width/percent), and download a ZIP when the queue finishes. Use the magnifying-glass preview to verify framing on a sample card.
What size should Facebook or Open Graph link previews use?
Common Open Graph exports are 1200×630 (Facebook/Meta feed post) or 1200×628 (link preview). In Resize Image → Social sizes, pick the matching Facebook/Meta preset, then Fit inside or Fill frame depending on whether the full image must stay visible.