How-to guide
How to Resize Images for a Website Without Losing Quality
To resize images for a website, upload to Pictuary's Resize tool at pictuary.com/resize, set the width to match your display dimensions — 1920 px for full-width images, 1200 px for content images, 800 px for thumbnails — then compress the result at WebP quality 80. This reduces a typical 6 MB camera photo to under 500 KB file size with no visible quality difference at web display pixel dimensions.
Free image compressor — no account required
No account · Files deleted within 15 minutes · EXIF data removed
The core problem — camera resolution vs display resolution
Modern smartphone cameras and DSLRs produce images at 4000–12,000 px wide. Most website layouts display content at 1200–1920 px wide. The gap between these numbers represents data that every visitor downloads but that no browser ever displays.
A 4032×3024 image embedded in a 1200 px wide blog post column: the browser downloads all 4032 px of width, then scales it down to 1200 px for rendering. The 2832 surplus pixels are discarded at render time, after the download has already completed. The visitor's bandwidth paid for data that was never used.
More pixels than the display size does not improve quality on screen. It only increases file size and slows load time. The correct approach is to resize the image to match the display dimensions before uploading — so browsers download exactly what they display, nothing more.
Why this matters for SEO — Core Web Vitals and LCP
Images are the single largest contributor to page weight on most websites, typically accounting for 60–70% of total download size on unoptimized pages. Google's Core Web Vitals measure Largest Contentful Paint (LCP): how fast the largest visible element on a page loads. The LCP element is almost always an image — typically a hero image or a prominent in-content image.
Google's threshold for a "good" LCP score is under 2.5 seconds. An unoptimized 6 MB hero image on a 4G connection takes 6–10 seconds to load. The same image resized to 1920 px and compressed to 400 KB loads in under 0.5 seconds. The difference is directly measurable in search rankings.
Oversized images — uploaded at camera resolution when the display is 1920 px wide — are the single most common cause of poor LCP scores. Resizing is the fix.
What the withoutEnlargement rule means for your workflow
Pictuary enforces withoutEnlargement: the Resize tool will not make an image larger than its source. If you enter a width of 1920 px but your source image is 1200 px wide, Pictuary outputs the image at 1200 px — its original size.
This is the correct behavior. Upscaling — adding pixels to an image that does not have them — does not add real image detail. It uses interpolation to estimate new pixel values from the surrounding originals, which produces a blurry or artificially sharpened result. If you need a higher-resolution image, start from a higher-resolution source. Pictuary will not manufacture detail that does not exist.
The practical implication: always start from the highest-resolution version of the image available — typically the original from the camera or design file — before resizing down. Pictuary's Resize tool uses proportional scaling by default, which preserves the original aspect ratio when only one dimension is specified.
Correct display widths by use case
| Image type | Display width | Target resize width | Notes |
|---|---|---|---|
| Full-width hero / banner | 1280–1920 px | 1920 px | Covers desktop viewport |
| Blog post image | 700–900 px | 1200 px | 1.5× for retina displays |
| Product photo (e-commerce) | 800–1000 px | 1200 px | Retina-safe |
| Portfolio image | 800–1200 px | 1200 px | Depends on layout |
| Sidebar image | 300–400 px | 800 px | Retina-safe |
| Thumbnail | 200–300 px | 600 px | Retina-safe |
| Background image | Full viewport | 1920 px | Wider source preferred |
The "target resize width" column is higher than the display width in most cases to account for retina displays, which render at 2× pixel density. A retina display rendering a 600 px wide image uses 1200 physical screen pixels. Providing a 1200 px source ensures sharp rendering on retina screens without visible pixelation.
Expected file sizes after correct resizing and compression
| Source | Source size | After resize (1920 px) | After compress (WebP 80) | Total reduction |
|---|---|---|---|---|
| iPhone 16 photo | ~5–6 MB | ~1.5–2 MB | ~280–480 KB | ~91% |
| DSLR photo (24 MP) | ~8–12 MB | ~1.5–2 MB | ~280–500 KB | ~95% |
| Screenshot (2560 px) | ~500 KB–2 MB | Scaled or same | ~80–200 KB | ~75–90% |
| Graphic / illustration | ~200–500 KB | Scaled or same | ~50–150 KB | ~60–80% |
What format to use and why
WebP is the correct format for website images in 2026. It delivers 25–35% smaller files than JPEG at equivalent visual quality, supports both lossy and lossless compression, and has 97% browser support. The 3% of browsers that do not support WebP are legacy environments — primarily very old Android WebViews and iOS versions below 14.
JPEG is the fallback for environments where WebP support cannot be confirmed. JPEG has 100% compatibility but produces larger files.
PNG lossless is for graphics, logos, and images with transparent backgrounds. For web delivery, convert to WebP lossless for a 25–35% reduction over PNG at identical quality.
For websites built on modern frameworks — Next.js, Nuxt, Astro, SvelteKit — the <picture> element with AVIF, WebP, and JPEG sources handles format selection automatically. For WordPress and page builders, the standard recommendation is WebP as the primary format.
A note on retina displays
Retina (HiDPI) screens are now standard — iPhones, MacBook Pros, high-end Android devices, and many Windows laptops render at 2× pixel density. An image displayed at 600 px wide on a retina screen uses 1200 physical screen pixels.
If you provide a 600 px wide image to a retina display, it will be upscaled by the browser using interpolation — and that interpolation produces visible softness on retina screens, even though the same image looks fine on standard screens.
The solution is to resize to 1.5× or 2× the CSS display width. For a 600 px wide content slot, provide a 1200 px wide image. The pixel dimensions are larger, but the file size is managed by compression. The visual result on retina screens is sharp.
Step by step
Upload your image to the Resize tool
Go to pictuary.com/resize and upload your image. Pictuary accepts JPEG, PNG, WebP, and HEIC. No account is required.
Enter the target width for your use case
Set the width field to the appropriate display size. Use 1920 px for full-width hero images and banners. Use 1200 px for blog content images, product photos, and inline page images. Use 800 px for sidebar images, thumbnails, and content images on text-heavy layouts. Leave the height field blank — Pictuary uses proportional scaling and maintains the original aspect ratio automatically.
Pixel dimensions — The width and height of an image measured in pixels. For web delivery, matching pixel dimensions to display dimensions eliminates surplus data that browsers download but do not display — the most impactful factor in image file size. See full definition →Download the resized image
Click Resize & Download. Pictuary applies withoutEnlargement — if you enter a width larger than the source image, Pictuary outputs at the original size. Download the resized file.
Compress the resized image
Go to pictuary.com/compress. Upload the resized image. Select WebP as the output format and set quality to 80. Click Compress & Download. Your final image is ready for upload to your website.
WebP — A modern image format that delivers 25–35% smaller file sizes than JPEG at equivalent visual quality. WebP supports both lossy and lossless compression and full transparency. Browser support reached 97% globally in 2026, making it the recommended format for all web images. See full definition →