Module 15: Image Resize vs Resolution — Design & Code Foundations

01

Understanding Pixels

Before discussing resize vs resolution, we need to understand what pixels actually are and how they relate to file size and quality.

Each square = 1 pixel

Pixels Explained

A pixel is the smallest unit of a digital image. Each pixel has one color. More pixels = more detail = larger file. An 8MP photo has 8 million pixels.

Key point: Pixels are your raw data - they determine quality ceiling

1920 × 1080

Width × Height in pixels

= 2,073,600 total pixels

Image Dimensions

Dimensions are width × height in pixels. A 1920×1080 image has about 2 million pixels. This is absolute - it's how much data exists in the file.

Key point: Dimensions tell you how much image data you have

500 × 500 (250K pixels)~150KB JPEG

1000 × 1000 (1M pixels)~500KB JPEG

2000 × 2000 (4M pixels)~2MB JPEG

Pixels vs File Size

More pixels = larger file. Double the dimensions = 4× the pixels = ~4× the file size. This is why resizing down dramatically reduces file size.

Key point: Pixel count is the primary driver of file size

Low res: 3×3 pixels

High res: smooth gradient

Pixel Quality

More pixels = smoother gradients, finer detail. Low-resolution images look blocky or pixelated when enlarged. You can't add detail that doesn't exist.

Key point: Pixels are your quality limit - you can't create more detail

02

Resizing Images

Resizing changes the number of pixels in an image. It's a permanent, destructive change to your image data.

1000×1000

→

500×500

75% of pixels DELETED

Resize Explained

Resizing changes pixel dimensions. Resize down: pixels are discarded. Resize up: pixels are invented (interpolated). Both are permanent changes to the file.

Key point: Resizing is destructive - original data is lost

Downsizing is safe

You have more data than you need

Excess pixels are averaged/discarded

Quality stays high

File size decreases

Resizing Down (Safe)

When you have a 4000×3000 image but need 800×600, downsizing is fine. You're throwing away extra data. The result looks sharp because you started with more than enough.

Key point: Always keep original - downsize copies only

Upsizing destroys quality

You don't have enough data

Software guesses new pixels

Result is blurry/pixelated

No way to recover quality

Resizing Up (Dangerous)

When you try to enlarge a 400×300 image to 2000×1500, the software invents pixels. It can't add detail that wasn't captured. Result: blurry, soft, or pixelated images.

Key point: Never enlarge images significantly - quality is lost forever

Original 2×2

Enlarged 4×4 (interpolated)

Gray pixels are guessed - they don't exist in original

How Enlargement Works

Interpolation averages neighboring pixels to create new ones. It's educated guessing. The more you enlarge, the more guessing, the softer the result.

Key point: Interpolation can't add detail that wasn't captured

03

Image Resolution

Resolution (DPI/PPI) is metadata that suggests how densely pixels should be packed when displayed or printed. It doesn't change the pixels themselves.

72

PPI

Pixels spread out

300

PPI

Pixels packed tight

Same pixels, different density suggestion

Resolution Explained

Resolution (PPI - pixels per inch) tells software how many pixels to fit per inch when displaying or printing. Higher PPI = smaller physical size at same pixel count.

Key point: Resolution is metadata - it doesn't change pixel count

Same image file:

72 PPI

13.9" print

300 PPI

3.3" print

1000 pixels ÷ PPI = inches

Resolution Is Metadata

Changing resolution doesn't add or remove pixels. A 1000×1000 image at 72 PPI has the same pixels as at 300 PPI. Only the suggested print size changes.

Key point: Changing PPI alone is non-destructive

SCREEN

72-218

PPI

Resolution doesn't matter
Only pixel dimensions

PRINT

300

DPI

Resolution matters
Determines print size

Screen vs Print Resolution

For web: resolution doesn't matter - browsers use pixel dimensions. For print: resolution determines physical size. 300 DPI is standard for professional print.

Key point: Web cares about pixels. Print cares about PPI.

MYTH: "Web images should be 72 DPI"

Web browsers completely ignore DPI.

A 1000×1000 image at 72 DPI displays identically to 1000×1000 at 300 DPI.

Only pixel dimensions matter for web.

The 72 DPI Myth

72 DPI for web is a myth from old Mac screens. Browsers don't read PPI metadata - they display pixel-for-pixel. Changing PPI without resampling has zero effect on web.

Key point: For web, only pixel dimensions matter

04

Resize vs Resolution

The critical distinction: resize changes pixels, resolution changes density metadata. Confusing them causes irreversible damage.

RESIZE

Changes pixel count

Destructive

Changes file size

Cannot be undone

Affects quality

RESOLUTION

Changes PPI metadata

Non-destructive

File size unchanged

Reversible anytime

Quality unchanged

Side-by-Side Comparison

Resize = permanent data change. Resolution = metadata change. Know which one you're doing. The UI checkbox 'Resample' is the key indicator.

Key point: Always check if you're resampling or not

Original: 3000×2000 pixels at 300 DPI

Change to 72 DPI (no resample):

→ Still 3000×2000 pixels, same quality

Resize to 1000×667 pixels:

→ Lost 89% of pixels, smaller file

Resize to 6000×4000 pixels:

→ 300% larger but blurry (interpolated)

Practical Example

Same starting image, three different operations. Only the first is non-destructive. Always understand what operation you're performing.

Key point: Check pixel dimensions before and after

Image Size Dialog

Resample: ON = Resize (destructive)

Resample: OFF = Resolution only (safe)

Photoshop Settings

In Photoshop's Image Size dialog, 'Resample' is the key. Checked = pixels change (resize). Unchecked = only PPI changes (resolution). Same applies in most image editors.

Key point: Uncheck 'Resample' to change resolution safely

1Keep original file untouched

2Work on copies only

3Downsize as final step

4Never enlarge significantly

5Check pixel dimensions after export

Safe Workflow

Protect your originals. Make copies before editing. Downsize only when exporting final output. If you need larger, go back to original or reshoot.

Key point: Originals are irreplaceable - protect them

05

Retina & High-DPI Screens

Modern screens pack more pixels into the same space. This affects how we prepare images for web display.

Standard 1×

Retina 2× (4× pixels)

Retina Explained

Retina/HiDPI screens pack 2× (or 3×) pixels into the same space. Same physical size, more pixels. Images need 2× the pixels to look sharp.

Key point: 2× screen = need 2× image pixels for sharpness

400px image displayed at 400px on 2× screen:

Each image pixel

stretched to cover

4 screen pixels

Result:

Blurry/soft

appearance

1× Images on Retina

On a 2× retina screen, a 400px image displayed at 400px CSS width must stretch each pixel to cover 4 screen pixels. This causes softness.

Key point: 1× images look soft on retina screens

/* CSS */
img { width: 400px; }
/* Image: 800×600 actual pixels */
/* Displayed at 400×300 CSS pixels */
/* Sharp on 2× screens! */

Serving 2× Images

Serve images at 2× the display size. An image displayed at 400px wide should be 800px actual. The browser scales it down, keeping sharpness on retina.

Key point: 2× actual pixels for display size = sharp on retina

<img
  src="image-400.jpg"
  srcset="image-400.jpg 1x,
          image-800.jpg 2x,
          image-1200.jpg 3x"
  alt="Description"
>

Responsive Images

Use srcset to serve different sizes for different screen densities. Browser automatically picks the right one. Users don't download more than needed.

Key point: srcset lets browsers choose optimal image size

09

Print vs Screen Resolution

Print and screen have fundamentally different resolution requirements and considerations.

Resolution Standard

Print

300

DPI

Industry standard for professional print

Web

N/A

Pixels only

Resolution metadata is ignored

What Matters

Print

Pixels ÷ DPI =

Physical size

3000px ÷ 300 DPI = 10 inches

Web

Pixels =

Display size

3000px = 3000px (scaled by CSS)

Viewing Distance

Print

~12 inches

Held in hands

Close viewing needs high resolution

Web

~20+ inches

Screen distance

Further away, lower PPI acceptable

10

The Science of Resolution

Understanding human vision helps explain why resolution requirements differ between media.

Human eye resolves ~1 arcminute

At 12" distance: ~300 DPI limit

At 24" distance: ~150 DPI limit

At 36" distance: ~100 DPI limit

Human Visual Limits

Human eyes have a resolution limit based on distance. At reading distance (~12"), we can distinguish ~300 pixels per inch. Further away, we need less.

Key point: 300 DPI for print is based on human visual limits

Nyquist-Shannon theorem:

Sample rate must be 2× the highest frequency to accurately represent the signal

→ 2× display size = accurate representation on retina

Sampling Theory

The 2× retina rule comes from sampling theory. To accurately display detail on a 2× screen, you need 2× the pixels. This is mathematical, not arbitrary.

Key point: The 2× rule is based on information theory

Information can't be created, only preserved or lost:

Original → Downsize: Combine info (averaging)

Original → Upsize: Invent info (guessing)

Why Upscaling Fails

Downsizing combines existing information (lossless in principle). Upsizing requires inventing information that doesn't exist. The math can't be fooled.

Key point: You can't create information from nothing

AI upscaling (ESRGAN, etc.):

✓ Can add plausible detail

✓ Makes images look sharper

✗ Invents details that weren't there

✗ Can add artifacts or wrong details

AI Enhancement

AI upscaling uses trained models to guess plausible details. It can look impressive but it's still inventing information. Fine for some uses, dangerous for others.

Key point: AI upscaling is hallucinating, not recovering

11

Real-World Examples

Common scenarios where resize vs resolution matters.

LOGO

Need: 200×200 display, retina

Principles Identified:

2× Rule Display at 200px = export at 400px

Vector Source Export from vector (SVG) at any size

PNG Format Logos need crisp edges, not JPEG

Key insight: Logos should be vector (SVG) when possible. When raster is needed, export 2× display size from vector source.

Want: 8×10 inch print at 300 DPI

Need: 2400×3000 pixels minimum

(8×300 = 2400, 10×300 = 3000)

Principles Identified:

Calculate Pixels Inches × DPI = required pixels

Check Source Does original have enough pixels?

Don't Upscale If not enough, print smaller or reshoot

Key insight: For print, work backwards: desired size × DPI = required pixels. If you don't have enough, you can't print that size sharply.

Full-width hero

Max display: ~1920px wide

Principles Identified:

Max Width Most screens max ~1920px wide

2× For Retina Serve up to 3840px for sharp retina

srcset Let browser choose appropriate size

Key insight: Hero images need to be large but not unlimited. 3840px wide covers most retina screens. Use srcset to serve appropriate sizes.

12

Common Mistakes

Errors that destroy image quality through misunderstanding resize vs resolution.

Failure: Enlarge Then Print

800×600 image

→ Resize to 3000×2250

→ Print 10×7.5 inch (blurry)

Fix: Check pixel count first, print at appropriate size

800×600 image

→ Print at 2.7×2 inches (sharp)

(800÷300 = 2.67 inches)

Rule: You can't add pixels that don't exist. Calculate maximum print size from actual pixels: pixels ÷ 300 = max inches.

Failure: 72 DPI for Web

3000×2000 image

→ Change to 72 DPI

→ Accidentally resample to 720×480

Fix: Ignore resolution, focus on pixel dimensions

3000×2000 image

→ Resize to needed dimensions

→ Ignore DPI setting

Rule: Web browsers ignore DPI. Only pixel dimensions matter. Don't waste time changing resolution for web - just resize to needed pixels.

Failure: Overwrite Original

photo.jpg (4000×3000)

→ Resize for thumbnail

→ Save over original

→ Original gone forever

Fix: Work on copies, keep originals untouched

photo.jpg (4000×3000)

→ Export As photo-thumb.jpg

→ Original preserved

Rule: Never resize and save over your original. Always save copies. Use 'Export As' or 'Save a Copy'. Originals are irreplaceable.

Failure: Resize for Email

4000×3000 (8MB)

→ Email bounces

→ Takes forever to send

Fix: Downsize appropriately for delivery method

4000×3000 (8MB)

→ Resize to 1200×900

→ Compress to 200KB

Rule: Match image size to use case. Email: ~1200px max. Social media: check platform requirements. Don't send 8MP photos via email.

13

Image Tests

Quick checks to ensure you're handling images correctly.

01

Pixel Check

Tests: Dimensions

Before any operation, check actual pixel dimensions. File > Image Properties or right-click > Get Info. Know what you have.

Always check:

Width × Height in pixels

02

Zoom Test

Tests: Quality

View at 100% zoom. Is it sharp? Pixelated? Soft? This shows true quality without scaling artifacts.

View → Actual Pixels (100%)

What you see is what you have

03

Math Check

Tests: Print Size

For print: pixels ÷ 300 = max inches. Does your image have enough pixels for intended size?

3000px ÷ 300 DPI = 10 inches max

2400px ÷ 300 DPI = 8 inches max

04

Original Check

Tests: Workflow

Is your original file still intact? Can you go back and export at a different size if needed?

✓ Original preserved

✓ Working on copies

14

Implementation

HTML patterns for serving images at appropriate resolutions.

Responsive Images via CSS

srcset with w - Tell browser actual image widths
sizes - Tell browser display size at each breakpoint
width/height - Prevent layout shift
Fallback src - For browsers without srcset support

Tip: Browser automatically picks best image based on screen size and density.

Density Descriptors via CSS

1x, 2x, 3x - Different densities for same display size
Fixed display size - Logo always 100×100 CSS pixels
Sharp on all screens - Retina gets 2x or 3x version

Tip: Use density descriptors when display size is fixed. Use width descriptors when display size varies.

Picture Element via CSS

- Art direction - different crops/images
media queries - Different images for different sizes
Format fallback - WebP with JPG fallback
required - Always include img as final fallback

Tip: Use when you need different image crops at different sizes, not just different resolutions.

.hero {
  background-image: url('hero-800.jpg');
  background-size: cover;
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('hero-1600.jpg');
  }
}

@media
  (min-width: 1200px) and
  (min-resolution: 2dppx) {
  .hero {
    background-image: url('hero-3200.jpg');
  }
}

CSS Background via CSS

Media queries - Different images for different conditions
min-resolution - Detect retina screens
background-size: cover - Scale to fill container
Progressive - Larger images only when needed

Tip: For CSS backgrounds, you must handle responsive images manually with media queries.

15

Self-Assessment

Test your understanding of resize vs resolution.

Q1

What's the difference between resizing and changing resolution?

Click to reveal

Q2

Why is enlarging an image bad for quality?

Click to reveal

Q3

Does changing an image from 300 DPI to 72 DPI affect web display?

Click to reveal

Q4

Why do retina screens need 2× images?

Click to reveal

Q5

How do you calculate required pixels for a print?

Click to reveal

Image Resize vs Resolution

Core Concepts

Understanding Pixels

Resizing Images

Image Resolution

Resize vs Resolution

Retina & High-DPI Screens

Print vs Web

Print vs Screen Resolution

Science & Psychology

The Science of Resolution

Real-World Examples

Real-World Examples

Common Failures

Common Mistakes

Visual Tests

Image Tests

Pixel Check

Zoom Test

Math Check

Original Check

CSS Implementation

Implementation

Self-Assessment

Self-Assessment

Key Takeaways