Image Resizer Guide: How to Resize Images for Web, Social Media, and Print

Wrong image dimensions cost you in three ways: they waste bandwidth on unnecessarily large files, they look blurry or distorted when displayed at the wrong size, and they can cause layout shifts that hurt your Core Web Vitals scores. Getting image sizing right is one of the most practical skills in web development and digital marketing.

This guide covers every major use case — from web pages and social media profiles to print materials — with exact pixel dimensions, resolution requirements, and best practices. Bookmark it, because you will come back to it often.

The Basics: Pixels, DPI, and Aspect Ratios

Pixels (The Only Thing That Matters Online)

On the web, an image's physical size is determined entirely by its pixel dimensions — width × height. A 1200×630 pixel image will always render at those exact dimensions on screen, regardless of what DPI or PPI setting is embedded in the file. The 72 DPI "web standard" is a myth that has been irrelevant for over two decades.

Aspect Ratio

The aspect ratio is the proportional relationship between width and height. Common ratios include:

• 1:1 — Square (Instagram posts)
• 4:3 — Standard display (1024×768)
• 16:9 — Widescreen (1920×1080, YouTube thumbnails)
• 9:16 — Vertical/Portrait (Instagram Stories, TikTok)
• 2:3 — Portrait photo (800×1200)

When resizing, maintaining the original aspect ratio prevents distortion. Stretching a 4:3 image to fill a 16:9 space makes everything look wide and squished.

DPI vs. PPI

DPI (Dots Per Inch) is a print concept — it describes how many ink dots a printer lays down per inch. PPI (Pixels Per Inch) describes digital image density. For web images, PPI is meaningless — only pixel dimensions matter. For print, you generally need 300 PPI for sharp output.

Resizing for the Web

Hero Images and Banners

Hero images are the largest images on most pages and have the biggest impact on performance. The ideal size depends on your layout:

In practice, serving 3840px-wide images for Retina displays is often overkill. Most users on 4K screens are viewing content in a browser window that is 1400–2000px wide. A 1920px hero image usually looks sharp enough even on Retina displays.

Thumbnails and Product Images

Thumbnails should match their display size as closely as possible. Serving a 4000px original as a 150px thumbnail wastes bandwidth and processing time.

Responsive Image Strategy

Instead of serving one image size for all devices, use the srcset attribute to let the browser pick the most appropriate size:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Product photo">

This ensures mobile devices download a small image while desktop displays get the full resolution — no wasted bandwidth in either direction.

Social Media Image Sizes (2026)

Social media platforms change their image specifications regularly. Here are the current recommended dimensions as of April 2026:

Instagram

Facebook

Twitter / X

YouTube

LinkedIn

Pinterest

Resizing for Print

Print is a completely different world from screen display. The key variables are physical size (inches/cm), resolution (PPI), and color mode.

Resolution Requirements

• 300 PPI: Standard for high-quality print (magazines, brochures, business cards). This is the default for professional print shops.
• 150–200 PPI: Acceptable for large-format prints viewed from a distance (posters, banners, billboards). At 10 feet away, the human eye cannot resolve 300 PPI detail.
• 72–96 PPI: Sufficient for newspaper print and low-quality flyers. Text and fine details may appear soft.

Common Print Sizes

Color Mode: RGB vs. CMYK

Screens use RGB (Red, Green, Blue) color. Printers use CMYK (Cyan, Magenta, Yellow, Key/Black). The CMYK gamut is smaller than RGB, so colors that look vivid on screen may appear duller in print. For print production, convert your images to CMYK color mode before sending to the printer.

Resizing Techniques and Best Practices

Downscaling (Making Smaller)

Downscaling is straightforward and rarely causes visible quality loss. The key is using a good resampling algorithm:

• Lanczos: The gold standard for photographic downscaling. Produces sharp results with minimal aliasing.
• Bicubic: Slightly softer than Lanczos but faster. Fine for most web use cases.
• Bilinear: Fastest but produces the softest results. Use only when speed is critical.

Upscaling (Making Larger)

Upscaling always degrades quality because you are inventing pixels that do not exist. However, modern AI-based upscalers (like those from Topaz, Real-ESRGAN, and the built-in upscaling in some image editors) can produce remarkably good results by predicting plausible detail.

For web use, upscaling is almost never the right approach. Instead, start with a higher-resolution source image. If you must upscale, limit it to 2× maximum and use an AI-based tool.

Cropping vs. Resizing

Sometimes the right solution is not to resize but to crop. If you have a 4000×3000 photo and need a 16:9 hero image, cropping to 4000×2250 and then downscaling to 1920×1080 gives you a better result than squishing the original into 16:9.

Always Set Width and Height Attributes

When embedding images in HTML, always include explicit width and height attributes. This tells the browser how much space to reserve before the image loads, preventing Cumulative Layout Shift (CLS):

<img src="product.jpg" width="800" height="600" alt="Product">

Common Mistakes

• Serving original camera photos. A 6000×4000 smartphone photo does not need to be displayed at full resolution on a 400px-wide product card. Always resize for the intended display size.
• Ignoring aspect ratio. Stretching images to fit a container distorts the content. Use object-fit: cover in CSS or crop to the correct ratio before uploading.
• Using CSS to resize only. Setting width: 300px in CSS still downloads the full-resolution file. The image must be resized at the file level.
• Upscaling small images for print. A 200×200 avatar cannot be printed at 4×6" without looking terrible. Start with a source image that has enough pixels.
• Forgetting about Retina displays. On a 2× Retina display, a 400×300 CSS pixel image needs 800×600 actual pixels to look sharp.