Understanding pixels, resolution, and file size
Pixel dimensions (width × height) define how large an image appears on screen. A 1200×800 image occupies 1200 pixels of horizontal space. File size depends on both pixel dimensions and the compression format — a 1200×800 JPEG at 85% quality might be 150 KB, while the same image saved as uncompressed TIFF might be 2.7 MB.
Resolution (DPI — dots per inch) matters for print but is irrelevant for web. A 72 DPI web image and a 300 DPI print image look identical on screen if they have the same pixel dimensions. When resizing for web use, ignore DPI entirely and focus on pixel dimensions and file size.
Standard dimensions for common uses
Website hero images: 1920×1080 px (full width) or 1200×628 px (standard article header)
Blog post images: 1200×800 px or 800×600 px
Thumbnails: 400×300 px or 300×300 px
Open Graph / social share images: 1200×630 px
Instagram feed: 1080×1080 px (square) or 1080×1350 px (portrait)
Twitter/X header: 1500×500 px
Email header images: 600×200 px (most email clients are 600 px wide)
Choosing the right format when resizing
JPEG is best for photographs and images with gradients. It compresses very efficiently and supports millions of colours. Use JPEG for any photo-realistic image going on the web.
PNG is best for images with text, logos, line art, or transparency. PNG uses lossless compression, so quality never degrades — but file sizes are larger than JPEG for photos.
WebP is a modern format that matches JPEG quality at 25–35% smaller file sizes. Use WebP for web images wherever browser support is acceptable (all modern browsers support it).
Step-by-step: resize an image online
1. Open the Resize Image tool.
2. Upload your image (JPEG, PNG, or WebP).
3. Enter your target width and height in pixels. Check 'Maintain aspect ratio' to avoid distorting the image.
4. Select your output format (JPEG for photos, PNG for graphics).
5. Click Resize and download your resized image.
Avoiding quality loss when resizing
Always resize down, not up. Making an image larger than its original pixel dimensions forces the editor to invent pixels — the result is a blurry, pixelated image. If you need a larger version, you need a higher-resolution source.
Save at 80–85% JPEG quality for web images. Above 85%, the quality gain is invisible but the file size grows significantly. Below 75%, compression artefacts start appearing around edges and text.
Keep your original high-resolution files. Once you resize and compress, you cannot recover the original quality. Always work from the master copy.
Summary
Resizing images for web use is a balance between visual quality and file size. Match your pixel dimensions to the actual display size on your page, choose JPEG or WebP for photos, and keep quality at 80–85%. Getting this right improves page load speed, which benefits both users and SEO.