You don’t need fancy software to get clean, sharp, correctly-sized images. Follow this practical workflow to resize for web, social, email, and print—without surprises.
1) Decide the destination first
Your target determines units, dimensions, and format.
- Website/App UI → work in pixels; aim for lean files (JPEG/WebP).
- Social avatars & cards → exact sizes; prepare @2x for Retina.
- Email → keep width ≤ 1200 px; keep each image well under 1 MB.
- Print → switch to in/cm/mm with DPI (usually 300).
2) Lock aspect ratio (no stretching)
Turn on Lock Aspect Ratio. Enter either width or height; let the other side auto-fill.
- Need an exact box (e.g., 1200×630)? Resize first, then crop. Never stretch.
Sanity check: If circles become ovals or faces look “wide,” aspect ratio got broken—undo and lock.
3) Pick the right units & DPI (for print)
For print, use physical size + DPI:
- 4×6 in at 300 DPI → 1200×1800 px
- 8×10 in at 300 DPI → 2400×3000 px
- Posters viewed from farther away can use 200–240 DPI.
Tip: Keep logos/text as vectors when possible; if raster, prefer PNG/TIFF.
4) Choose the best format
- JPEG/JPG → photos; smallest files with a quality slider.
- WebP → great quality/size for web (photos & graphics).
- PNG → transparency, sharp UI/line art, or when JPEG artifacts appear.
- GIF → only if you truly need animation.
5) Set quality that still looks great
Start points (adjust to taste):
- JPEG quality 80–85% for most web photos; drop to 70–75% if you must.
- Prefer WebP for further savings at similar perceived quality.
- Downscaling tolerates lower quality better than upscaling.
Avoid heavy upscales (>2×). They amplify noise; get a higher-res source or use an AI upscaler if truly necessary.
6) Prepare crisp Retina (@2x) assets
If a UI slot is 400×300 px, export 800×600 px and reference it as [email protected] while displaying at 400×300 in HTML/CSS. Result: sharp on high-DPI screens.
7) A fast, repeatable workflow
- Upload your highest-quality source.
- Select units (px for web; in/cm/mm + DPI for print).
- Lock aspect, enter one dimension, confirm the other auto-fills.
- Pick format (JPEG/WebP for photos; PNG for transparency).
- Set quality, watch the live preview, then Download.
- Quick QA on real devices (phone + laptop) before publishing/printing.
8) Troubleshooting (symptom → fix)
- Looks soft after resize → downscale less; sharpen slightly; avoid >2× upscales.
- Logo edges look dirty → export PNG, not JPEG.
- File too large → try WebP or lower JPEG quality; check if dimensions are overkill.
- Email bounces due to size → cap width ~1200 px, JPEG q≈70–75%.
- Print came out tiny → you resized in px without DPI; redo with in/cm + 300 DPI.
- Social avatar clipped → resize to fit, then crop; keep the face centered with a bit of padding.
9) Quick starting recipes
- Blog inline: 1200 px width, JPEG/WebP q≈80.
- Hero banner: 1600–1920 px width, JPEG/WebP q≈80.
- Thumbnail grid: 320–640 px square, JPEG/WebP q≈75（PNG for icons/logos）.
- Email: ≤1200 px width, JPEG/WebP q≈70–75.
- Print 8×10 in: 300 DPI → 2400×3000 px, PNG/TIFF (graphics) or high-quality JPEG (photos).
Key takeaways
- Decide destination → lock aspect → set size → pick format → tune quality → export @2x if needed.
- Favor WebP (web) and PNG (transparency).
- For print, always think inches/cm + DPI, not just pixels.