How To Resize İmages For Web
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
Start from the painted size, not the source
Resizing images for the web is the single highest-leverage performance tweak most sites never finish. A 4000 × 3000 phone photo served into a 600 px card wastes bandwidth, burns mobile data, and tanks your Largest Contentful Paint score. The fix is to ship pixels close to the size the browser actually paints, usually with a 2x buffer for retina displays. Getting this right means choosing real pixel dimensions, understanding device pixel ratio, and knowing when downscaling is enough versus when you need to crop. This guide walks through each decision and the trade-offs between quality and file size.
Pixel dimensions versus file size
Open the page in a browser, inspect the image, and note its rendered CSS width in pixels. That number — not the source file’s intrinsic size — is the anchor for every resize decision. A hero image painted at 1200 px wide should not ship a 4800 px source, and a 96 px avatar has no business being a 1080p portrait.
Device pixel ratio and the 2x rule
Once you know the painted size, you pick a target. For non-retina, target equals painted size. For retina support, double it. For sites with 3x devices (high-end phones), triple it only for images where razor-sharp detail matters.
Responsive sizing with srcset
Pixel dimensions (width and height) control sharpness. File size (KB) controls how fast the image downloads. They correlate but they are not the same knob. Halving the dimensions of a photo roughly quarters the file size because pixels are a 2D grid. Halving the quality slider (JPEG 90 → 45) also shrinks bytes but leaves dimensions untouched, trading clarity for speed.
Downscale versus crop
Resize first, compress second. Resizing throws away data you didn’t need; compression throws away data you maybe did.
Aspect ratio locks
The pragmatic rule: always export at 2x painted size, and only bother with 3x for critical hero imagery where customers will zoom in.
Quality versus size trade-offs
Downscaling preserves the whole frame at a smaller size; cropping throws away edges to reshape or tighten the composition. Use downscaling when the aspect ratio is already right and you just need fewer pixels. Use cropping when the subject is lost in dead space or when a layout demands a specific ratio — think square tiles, 16:9 hero banners, or 4:5 Instagram feed posts.
Format matters more than settings
Mixing them is common: crop to the right ratio first, then downscale to the target width. Doing downscale first wastes CPU resizing pixels you’ll throw away.
Common screen and export presets
Most resize tools default to “constrain proportions” — change one dimension and the other follows. Disable this only when you deliberately want to stretch (almost never) or when you’re padding a canvas to a fixed ratio. A face stretched by 8% from an accidental unlock is uncanny and obvious.
Batch resizing workflow
If you need a fixed output ratio from a mismatched source, the correct flow is: set the canvas, position the image inside it, fill the remaining space with a solid background or blurred extension.
The picture element for art direction
JPEG quality settings are non-linear. The drop from 100 to 90 is imperceptible and saves 40–60% of the bytes. The drop from 90 to 75 saves another 30% with barely any visible cost on photos. Below 60 you start seeing blocking and color banding, especially on skies and gradients.
Lazy loading the right way
The biggest quality-per-byte win is usually picking the right format. WebP is 25–35% smaller than JPEG at equivalent quality. AVIF is another 20–30% smaller than WebP but encodes slowly. For photographs on modern browsers, ship WebP with a JPEG fallback; for graphics with few colors, stay with PNG or switch to SVG.
Resampling algorithms and why they matter
Don’t convert PNG to JPEG for transparent logos — you’ll get a white box around them. Don’t convert JPEG to PNG to “upgrade quality” either; you can’t un-bake the JPEG artifacts and the PNG will be huge.
Upscaling: the honest answer
Useful starting sizes to keep in your head:
CDN-side resizing
For product catalogs and article batches, set a maximum width and let the tool downscale anything larger while leaving smaller files alone. A typical rule is “no image wider than 1600 px, JPEG 82.” Run it over the whole folder and you’ll cut 60–80% of the bytes from an untouched photo library without touching the good, smaller assets.