Picture Size Chart for Websites and Social Images
Pick practical dimensions before resizing and compressing images for websites and online publishing.
Author: ToolZone EditorialUpdated: May 21, 2026Cluster: Image Tools
How Website Image Sizing Works
An image should usually be exported near the largest size it will actually display. Oversized images waste bandwidth, while undersized images can look blurry on large or high-density screens. Responsive websites may use several sizes, but even a single carefully resized file is better than uploading a huge original camera image.
Benefits
Right-sized images reduce page weight, improve layout stability, help mobile visitors, and make image libraries easier to manage. They also make compression more effective because fewer pixels need to be encoded.
Use Cases
- Hero images: wide, high-quality, and compressed.
- Blog images: close to the content column width.
- Thumbnails: small, consistent, and cropped to the same ratio.
- Product images: consistent frame and enough detail for zoom or inspection.
- Open Graph images: commonly prepared around 1200 by 630 pixels.
Examples
A full-width hero may need more width than a blog image, but it still should not be an untouched camera file. A product grid thumbnail can be much smaller than a product detail image. A social preview should be composed so text and key visuals remain visible after cropping.
Step-by-Step Sizing Workflow
- Find the display area or platform requirement.
- Crop to the right aspect ratio.
- Resize to a practical maximum width and height.
- Choose the right format.
- Compress and test the final page.
Related Tools
Use the Image Resizer for dimensions, the Image Cropper for aspect ratio, and the Image Compressor for final file size.
Web page dimensions and website banner sizes
Website banners and headers typically range from 1200 to 1920 pixels wide. A full-width hero banner is usually 1920 by 600-1080 pixels, while a narrower header bar may be 1200 by 200-400 pixels. Match the banner size to the theme or CMS template so the image does not crop unexpectedly on wide screens.
Common web page content widths are 1200 pixels for centered layouts and 1140 pixels for Bootstrap-based designs. Social media banners differ: Facebook cover is 820 by 312, Twitter header is 1500 by 500, and LinkedIn banner is 1584 by 396. Always export at 2x resolution for retina displays and compress before uploading.
Common picture size chart
| Use | Example pixels | Aspect ratio |
|---|
| Open Graph preview | 1200 x 630 | 1.91:1 |
| Square post or profile source | 1080 x 1080 | 1:1 |
| Portrait post | 1080 x 1350 | 4:5 |
| Story-shaped image | 1080 x 1920 | 9:16 |
| YouTube thumbnail | Confirm the current platform requirement | 16:9 |
| Blog content image | Match the content column and responsive source set | Depends on composition |
These are workflow examples, not permanent platform guarantees. Check the destination's current documentation, preserve the aspect ratio to avoid stretching, and use the Image Resizer for exact pixels.
Website background image dimensions
Full-screen background images should be at least 1920 by 1080 pixels for HD displays, or 3840 by 2160 pixels for 4K screens. Use a 16:9 aspect ratio for full-bleed backgrounds. For parallax scrolling backgrounds, export at 1.5x to 2x the viewport size to prevent blurring during the scroll animation.
Tiled or repeating backgrounds use smaller tiles — 200 to 400 pixels square — and rely on seamless edges to create the illusion of a larger image. CSS background-size: cover scales the image to fill the container while preserving aspect ratio; background-size: contain fits the entire image inside the container. Always compress background images to under 300 KB to avoid slow page loads, and use WebP format where browser support allows. Use the image compressor and image resizer to optimize background images before upload.
Photo size examples and common dimensions
Common photo sizes: passport photo (35x45mm), wallet photo (2x3 inches), 4x6 print (1200x1800px), 5x7 print (1500x2100px), and 8x10 print (2400x3000px). For web, most content images work at 800-1200px wide. Social media profile pictures are typically 400x400px square.
To check a photo size, right-click the file and select Properties on Windows or Get Info on Mac. The pixel dimensions appear under Details or More Info. For web uploads, resize to the target platform dimensions first using the image resizer to reduce file size and upload time.