Why Image Dimensions Matter So Much
Resizing changes an image's pixel width and height. A web page that displays an image at 600 CSS pixels does not always need the full-resolution camera original, but the appropriate source size depends on the layout and the display's pixel density.
Prepare a version close to the largest size the layout needs, then use responsive image delivery where the same page serves different screen sizes. This avoids sending unnecessarily large files to small displays without assuming every visitor sees the image at identical dimensions.
Pixels, Inches, and DPI: Understanding the Difference
There's widespread confusion between these three measurements. Let's clear it up once and for all.
Pixels
Pixels are the fundamental unit of digital images - tiny colored squares arranged in a grid. An image that's 1920×1080 pixels has 1,920 columns and 1,080 rows of pixels, totaling just over 2 million pixels (hence "2 megapixel").
For screen display and web use, only pixels matter. A 1920×1080 image always fills a 1920×1080 display area, regardless of any DPI setting.
Inches (Physical Size)
Physical inches only matter when printing. A 4×6 inch print at 300 DPI needs an image that's 1200×1800 pixels (4×300 and 6×300). For anything that stays on screen - websites, social media, email - inches are irrelevant.
DPI (Dots Per Inch) / PPI
DPI (dots per inch) or PPI (pixels per inch) describes the relationship between pixel dimensions and physical print size. It only matters for printing. When you see "set your image to 72 DPI for web" - this is outdated advice that doesn't affect how images look on screen. What matters for web is the pixel count, not DPI.
💡 Tip: When someone asks "what size should my image be?" for a website, answer in pixels, not inches or DPI. 1200×630 pixels for a blog header. 800×800 for an Instagram post. Pixels are the unit that matters for screens.
Upscaling vs. Downscaling: Quality Implications
Downscaling (Making Images Smaller)
Reducing an image from 4000px to 1200px removes pixel detail that will not exist in the smaller output. A good resampling method can keep the result clear, but fine texture or text can change, so inspect the resized file at its intended display size and retain the original for later edits.
Upscaling (Making Images Larger)
Enlarging an image beyond its original pixel dimensions is a different story. No algorithm can invent detail that wasn't there. Classical upscaling (bicubic interpolation) produces blurry, soft results. AI-based upscaling tools (like Topaz Gigapixel or built-in neural upscalers) can add convincing-looking detail, but they're generating estimates, not recovering real data.
The practical rule: always start with the largest pixel dimensions you have access to. If you only have a 400px image and need 1200px, the upscaled result will look soft - that's a limitation of your source material, not the tool.
⚠️ Warning: Never upscale and then use an image as a hero image or featured photo. Soft, blurry upscaled images signal low quality to visitors and can undermine brand trust. If you don't have a high-resolution source, use a smaller layout or replace the image.
Maintaining Aspect Ratio
An image's aspect ratio is the proportional relationship between its width and height, expressed as W:H (e.g., 16:9, 4:3, 1:1). Changing one dimension without proportionally changing the other "stretches" the image, distorting its content.
When resizing:
- If you change width to 1200px and the original was 1600×900 (16:9), the correct height is 675px (1200 × 900/1600)
- Good resizing tools have a "lock aspect ratio" button - always keep this enabled unless you specifically need to crop to a different ratio
- Cropping and resizing are different operations: cropping removes content; resizing scales content
Use Kinsad's Image Resizer with the aspect ratio lock enabled to resize safely. You can enter just the target width and let it calculate the correct height automatically.
Optimal Image Sizes for Every Major Platform
Use this table as your quick reference - bookmark it. All sizes are in pixels.
Social Media Image Dimensions
| Platform |
Image Type |
Recommended Size |
Aspect Ratio |
Max File Size |
| Instagram |
Square post |
1080×1080 px |
1:1 |
8 MB |
| Instagram |
Portrait post |
1080×1350 px |
4:5 |
8 MB |
| Instagram |
Story / Reel |
1080×1920 px |
9:16 |
30 MB |
| Instagram |
Profile picture |
320×320 px |
1:1 |
- |
| Facebook |
Feed post |
1200×630 px |
1.91:1 |
8 MB |
| Facebook |
Cover photo |
851×315 px |
2.7:1 |
- |
| Facebook |
Profile picture |
180×180 px |
1:1 |
- |
| Twitter / X |
Feed image |
1200×675 px |
16:9 |
5 MB |
| Twitter / X |
Header photo |
1500×500 px |
3:1 |
5 MB |
| LinkedIn |
Post image |
1200×628 px |
1.91:1 |
5 MB |
| LinkedIn |
Cover photo |
1584×396 px |
4:1 |
8 MB |
| LinkedIn |
Profile picture |
400×400 px |
1:1 |
8 MB |
| YouTube |
Thumbnail |
1280×720 px |
16:9 |
2 MB |
| YouTube |
Channel banner |
2560×1440 px |
16:9 |
6 MB |
| Pinterest |
Pin image |
1000×1500 px |
2:3 |
20 MB |
Website Image Dimensions
| Image Type |
Recommended Width |
Typical Height |
Notes |
| Hero / banner |
1920 px |
600-1080 px |
Serve responsive versions at 1280px and 768px too |
| Blog header image |
1200 px |
630 px |
1.91:1 ratio - same as OG image |
| Product image |
800-1200 px |
800-1200 px |
Square often best for e-commerce grids |
| Card / thumbnail |
400-600 px |
250-400 px |
Keep under 50 KB |
| Avatar |
150-200 px |
150-200 px |
Square, served at 2× for retina |
| Open Graph image |
1200 px |
630 px |
Shown when links are shared on social media |
Email Image Dimensions
| Image Type |
Max Width |
Notes |
| Email header / banner |
600-640 px |
Most email clients render at 600px width |
| In-email product image |
260-300 px |
For 2-column grid layouts |
| Email thumbnail |
100-150 px |
Keep under 20 KB |
| Total email images |
- |
Keep total image weight under 1 MB |
💡 Tip: For email, always set explicit width and height attributes in your HTML image tags. Some email clients block images by default, and dimensions prevent your layout from collapsing when images don't load.
How File Size Changes With Dimensions
Here's something that surprises people: file size scales with the square of the dimension ratio, not linearly.
If you have a 2000×2000 image and resize it to 1000×1000 (half the width), the image has ¼ as many pixels (1M vs 4M). That means the file will be roughly ¼ the size, not half.
Practical example:
- Original: 4000×3000 px → ~3 MB JPEG
- Half width (2000×1500 px) → ~750 KB JPEG
- Quarter width (1000×750 px) → ~190 KB JPEG
This is why resizing to appropriate dimensions is the most impactful image optimization step - even more impactful than compression settings alone.
Retina / HiDPI Displays
Retina displays (found on most modern phones, Macs, and many Windows laptops) have a pixel density ratio of 2× or 3×. This means a CSS element that's 400px wide on screen actually uses 800 or 1200 physical pixels to render.
For crisp images on high-density displays, a source larger than the CSS display size can help. A 600 CSS-pixel image may use a 1200-pixel-wide candidate on a 2× density screen; responsive markup lets the browser choose a suitable candidate rather than forcing that largest file on every device:
- An image displayed at 600px wide needs to be 1200px wide for retina sharpness
- Use the
srcset attribute in HTML to serve the right size to each device
- For small icons and logos, SVG is inherently resolution-independent and always looks sharp
The Right Resize Workflow
- Determine the display size - find out the maximum pixel width the image will actually be shown at on the page or platform.
- Add 2× for retina (optional but recommended for hero images and product photos).
- Resize to those dimensions using a tool like Kinsad's Image Resizer with aspect ratio lock enabled.
- Compress the resized image - resize first, then compress for best results.
- Export in the right format - WebP for web, JPEG for email, PNG for logos with transparency.
Frequently Asked Questions
Q: What is the best image size for a website?
It depends on how the image is used. For a hero banner, 1920×1080 px is standard. For blog headers, 1200×630 px. For thumbnails, 400-600 px wide. The key principle: serve images at the size they'll be displayed, not larger.
Q: Does resizing an image reduce its quality?
Downscaling (making smaller) is lossless in practice - the output is sharp and accurate. Upscaling (making larger) can't add real detail and results in a blurry image. Always start with the largest source image available.
Q: What pixel size should I use for an Instagram post?
Square posts: 1080×1080 px. Portrait (most common): 1080×1350 px. Landscape: 1080×566 px. Stories and Reels: 1080×1920 px. Instagram recommends JPEGs under 8 MB for photos.
Q: What does "maintain aspect ratio" mean?
Aspect ratio is the width-to-height proportion. Maintaining it means if you change one dimension, the other changes proportionally so the image isn't stretched or squished. A 1920×1080 image resized to 1280 wide should be 720 tall (same 16:9 ratio), not some other height.
Q: What's the maximum image size for email?
Most email clients render at 600 pixels wide, so keep email images at 600px maximum width. Your banner/header image should be exactly 600px wide. Keep total email image weight under 1 MB to avoid triggering spam filters and ensure fast loading on mobile data.
Q: Should I resize before or after compressing?
Always resize first, then compress. If you compress first, then resize, you may introduce additional artifacts. More importantly, compression is most efficient when applied to the final target dimensions - you're not wasting bytes on pixels that will be discarded by resizing.
Q: Does DPI matter for web images?
No. DPI only matters for printed output. Screens display images based purely on pixel count. A 1200×630 image at 72 DPI and the same image at 300 DPI look absolutely identical on screen. When someone says "set web images to 72 DPI" they're describing an old convention that has no effect on screen display.
Q: What size should a YouTube thumbnail be?
YouTube recommends 1280×720 pixels (HD resolution, 16:9 aspect ratio) with a file size under 2 MB. Use JPEG format. Make sure text in your thumbnail is readable at small sizes - thumbnails are often displayed at 210×118 pixels in search results.
Try It Free on Kinsad
Resize any image to exact pixel dimensions in your browser. Enter width and height, lock the aspect ratio, and download instantly - no account needed.
Use the Image Resizer →