Resolution is one of those topics where a little misinformation spreads a long way. Ask around and you'll hear things like "always use 300 DPI for everything" or "web images should be 72 DPI" — advice that's either outdated, misapplied, or just plain wrong depending on the context. The result is people uploading 10 MB print-resolution images to their websites, or sending blurry social media graphics to the printer, because nobody explained that web, social, and print each have completely different requirements.

This guide untangles all of it — what resolution actually means, why DPI is largely irrelevant for screen display, what pixel dimensions to use for each context, and how to resize images to hit those targets without guessing.

DPI vs. Pixels: The Distinction That Actually Matters

DPI stands for "dots per inch" — a measurement of how densely ink dots are packed onto a physical surface. It's a printing concept. When your inkjet printer says it prints at 300 DPI, it means it's placing 300 ink dots in every linear inch of paper, producing a sharp, detailed print.

On a screen, DPI is essentially meaningless. Screens don't have "inches" in the same sense — they have pixels, arranged in a fixed grid. A screen doesn't care what DPI value is embedded in your image file's metadata; it just reads the pixel dimensions and displays them. A 1000×800 pixel image displayed in a 1000×800 pixel container looks identical whether the file says 72 DPI or 300 DPI in its metadata. That number is just a tag in the file — it has no effect on how the image looks on screen.

What matters for screens is pixel dimensions — the actual width and height in pixels. What matters for print is both pixel dimensions and DPI together, because DPI determines how large those pixels will be rendered on paper. This is the distinction that clears up most resolution confusion.

Image Resolution for Websites

For web images, think purely in pixels. Ignore DPI entirely. The question to ask is: at what pixel width will this image be displayed on the page?

A few practical benchmarks for common web use cases:

  • Full-width hero images — 1920px wide is the standard maximum for desktop displays. Most modern sites cap hero images at 1440–1920px. Anything wider is serving data that no monitor will actually display.
  • Blog post body images — content areas are typically 700–900px wide. An image displayed at 800px wide needs to be about 1600px wide to look sharp on Retina/high-DPI displays (more on this below). Serving a 4000px image in an 800px container wastes bandwidth with no visible benefit.
  • Thumbnails and card images — typically 400–600px wide on screen, so 800–1200px is plenty even for high-DPI displays.
  • Product images — these often need to support zoom, so larger dimensions (1500–2500px) make sense. Standard display size might be 600px, but the zoom view benefits from the extra resolution.

Retina and High-DPI Displays: The 2× Factor

The wrinkle in web resolution is that "high-DPI" devices — Retina MacBooks, most modern smartphones, and a growing share of Windows laptops — render at 2× pixel density. A container that's 800px wide on a standard display uses 800 physical pixels. The same container on a Retina display uses 1600 physical pixels. If you serve an 800px image, it looks slightly soft on Retina displays because each image pixel has to cover 4 screen pixels.

The standard solution is to serve images at 2× the display size and compress aggressively. So for an image displayed at 800px, serve a 1600px image compressed at 75–80% quality. The extra pixels provide the sharpness Retina displays need, and the aggressive compression keeps the file size reasonable. The result looks sharp everywhere — standard and high-DPI displays alike.

The practical rule of thumb: Take the maximum pixel width the image will be displayed at, multiply by 2 for Retina coverage, and that's your export width. Then compress at 75–85% quality. A 1600px wide image at 80% JPEG quality is typically 150–300 KB — sharp on every display, reasonable to download on any connection.

Image Resolution for Social Media

Social media platforms are a moving target — they change their recommended dimensions regularly, compress uploaded images on their own terms, and display images differently depending on where they appear (feed, story, profile, cover, etc.). That said, some general principles hold up well:

  • Square posts (Instagram, Facebook) — 1080×1080px is the universal safe size. It's what the platforms expect, displays cleanly at all sizes, and survives their compression without looking degraded.
  • Portrait posts (Instagram Stories, TikTok, Reels) — 1080×1920px (9:16 aspect ratio). This is the full vertical mobile screen and the right canvas for anything displayed in Stories format.
  • Landscape posts (Facebook, Twitter/X, LinkedIn) — 1200×628px or 1200×630px covers most feed and link preview sizes. LinkedIn favors 1200×627px for article headers.
  • Profile photos — 400×400px is adequate for most platforms, though uploading at 800×800px gives the platform more to work with when it generates thumbnails at various sizes.
  • YouTube thumbnails — 1280×720px (16:9). This is one size that's stayed consistent and is large enough to look sharp in both the player and search results.

One important note on social media: every platform recompresses your images when you upload them. No matter how carefully you size and export, the platform will apply its own compression algorithm. Uploading at the recommended dimensions in the highest quality your file size budget allows gives the platform the best source material to work with — the output quality is partly determined by what the compression algorithm has to start from.

The Social Media Resizer handles all of these presets in one place — pick the platform and format, and it resizes to the correct dimensions automatically.

Image Resolution for Print

Print is where DPI actually matters. The standard for professional print quality is 300 DPI at the final print size. This means the pixel dimensions you need depend on how large the printed output will be:

  • 4×6 inch photo print at 300 DPI — 1200×1800 pixels
  • 5×7 inch photo print at 300 DPI — 1500×2100 pixels
  • 8×10 inch photo print at 300 DPI — 2400×3000 pixels
  • 11×14 inch print at 300 DPI — 3300×4200 pixels
  • A4 document at 300 DPI — 2480×3508 pixels

For large-format printing — posters, banners, trade show displays — 150 DPI is often acceptable because these are viewed from a distance. A 24×36 inch poster at 150 DPI requires 3600×5400 pixels, which is achievable with a modern camera. At 300 DPI it would require 7200×10800 pixels, which is overkill for something viewed from several feet away.

The critical thing to understand about printing: you cannot upscale a low-resolution image and expect good print results. If you have a 1000×750 pixel image and try to print it at 8×10 inches, you're working with 100 DPI — well below the 300 DPI threshold. The print will look soft and pixelated. Resizing the file to 2400×3000 pixels in an image editor doesn't add detail that wasn't there — it just interpolates between existing pixels, and the result is still soft. Always start with a sufficiently high-resolution source image for print work.

How to Resize Images to the Right Dimensions

Once you know the target pixel dimensions for your use case, resizing is straightforward. The ImageToolHub Image Resizer lets you specify exact pixel dimensions, resize by percentage, or resize by longest edge — and it locks the aspect ratio automatically so you don't accidentally stretch or squish the image.

A few things to keep in mind when resizing:

  • Downscaling is lossless in practice. Reducing a 4000px image to 1600px looks sharp — you're combining pixels, not inventing them. This is the normal workflow for web optimization.
  • Upscaling degrades quality. Increasing a 400px image to 1600px interpolates between pixels and produces a soft, slightly blurry result. You can't recover detail that wasn't captured in the original.
  • Resize before you compress. Get the image to the right dimensions first, then run it through the compressor. Compressing an oversized image and relying on the browser to scale it wastes bandwidth.
  • Keep your originals. Always resize a copy, not the original. Once you've downscaled and compressed, the original detail is gone from that file. Keep the high-resolution source somewhere safe in case you need it for print or a different use case later.

Resolution decisions get easier once you're thinking in pixels for screens and pixels-per-inch for print. The "always use 300 DPI" advice isn't wrong — it's just incomplete. For print, yes. For web and social, forget DPI and focus on pixel dimensions instead. Get those right and everything else follows.