How to Resize an Image for Email and Web (Without Ruining It)

Let’s be honest for a second. We’ve all done it.

You finish a newsletter, drop in a gorgeous team photo, hit “Send,” and immediately get a few bounce-backs because the email is somehow 18 MB. Or you upload a “quick” banner to your homepage and the site suddenly feels like it’s loading on a 2004 connection.

It happens because modern phones and cameras are too good. When you grab a photo straight from an iPhone or a stock site, you’re not just grabbing an image—you’re grabbing a 4,000‑pixel-wide data monster built for print, not for screens.

Between you and me, most image problems online come from one of two things:

• The image is the wrong size (pixel dimensions don’t match where it’s displayed)
• The image is the wrong weight (file size is bigger than it needs to be)

This guide gives you the exact sizing habits that keep images sharp, fast, and email-safe—plus simple workflows you can repeat without thinking too hard.

Quick answer (the workflow you’ll use 90% of the time)

1. Crop (only if the shape is wrong): Crop Image
2. Resize to the real display width: Resize Image
3. Convert to the right format (WebP for web, JPG/PNG for email): Image to WebP, Image to JPG, Image to PNG
4. Compress to hit a file-size budget: Compress Image
5. Remove metadata if sharing publicly or with clients: Remove Image Metadata

That order saves you from 99% of “why does this look bad?” moments.

Resizing vs compressing vs converting (they’re not the same)

People use these words interchangeably, but they do very different things. Think of your image like a framed poster.

Resizing = changing pixel dimensions

You’re changing the size of the poster.

Example: 4000×3000 → 1600×1200
Tool: Resize Image

Compressing = reducing file size

Same poster size, but you’re making it lighter to ship.

Example: 1600×1200 stays 1600×1200, but file goes from 1.8MB → 220KB
Tool: Compress Image

Converting = changing format

Same poster, different material.

Example: PNG → JPG or JPG → WebP
Tools: Image to WebP, PNG to JPG, JPG to WebP

Cropping = changing the frame (shape + composition)

Cropping changes the aspect ratio and removes edges. If the image is the wrong shape for the slot, resizing won’t fix it.

Tool: Crop Image

The golden rule: Resize first, then compress.
If the shape is wrong, crop first.

Part 1: How to resize images for the web

The web is chaos in the nicest possible way. Your image might be viewed on a 4K desktop monitor, a budget Android phone, or a laptop running in battery-saver mode on shaky Wi‑Fi.

If you upload a huge image and rely on CSS to “shrink it down,” you’re making the browser download the entire file anyway—then do extra work to display it smaller. That costs time, data, and it can hurt perceived speed.

On real sites, images are consistently a major contributor to page weight. The HTTP Archive Web Almanac is a great reality check here. (almanac.httparchive.org)

Step 1 (web): Choose the display width first

Ask one question:

How wide is this image displayed in the layout (in CSS pixels)?

If you’re not sure, inspect the element in your browser dev tools—or measure your page container. Guessing is how 800px containers end up downloading 4000px images.

Safe dimension ranges for web images (practical defaults)

Web use case	Typical display width	Recommended export width	Notes
Hero / banner	1200–1920px	1920px (sometimes 2560px)	2560px only if your design truly needs it
Blog content images	700–900px	1200–1600px	Great balance of sharpness + weight
Product images	600–1000px	1000–1500px	Helps zoom views without huge files
Thumbnails / avatars	40–200px	150–300px	Anything bigger is usually wasted

Use Resize Image to hit those widths.

Step 2 (web): The Retina / high-density rule (the “2×” habit)

Modern screens often render images sharper when you provide a higher-resolution source.

A simple guideline:

• If your container is 800px wide, export at 1600px wide (2×).
• Then compress it properly.

This sounds backwards until you try it. A 2× image compressed well can look sharper than a 1× image that’s uncompressed, and the file sizes can end up surprisingly close.

Step 3 (web): Set a file-size budget (so your page feels fast)

These aren’t commandments, but they keep you in a good place:

• LCP image (often the hero): aim for < 200–300 KB when possible
• Blog images: often < 100–200 KB
• Thumbnails: 10–60 KB

Web.dev’s performance guidance is very direct about images because it’s one of the most common wins. (web.dev)

Step 4 (web): Use responsive images (optional, but worth it)

If you want the “best practice” version, don’t ship one image to everyone. Ship a few sizes and let the browser choose.

MDN’s responsive images guide is the cleanest reference. (developer.mozilla.org)

Here’s a solid pattern:

<img
  src="/images/post-1280.webp"
  srcset="
    /images/post-480.webp 480w,
    /images/post-800.webp 800w,
    /images/post-1280.webp 1280w,
    /images/post-1600.webp 1600w
  "
  sizes="(max-width: 768px) 92vw, 768px"
  width="1280"
  height="853"
  alt="Descriptive alt text"
  loading="lazy"
  decoding="async"
/>

That width/height helps the browser reserve space and can reduce layout shift (CLS). (web.dev)

Part 2: How to resize images for email (where things get picky)

If the web is chaotic, email is… stubborn.

Email clients vary wildly, many use older rendering engines, and a single oversized image can break layout or slow the whole message. You’re balancing two battles:

1. Layout limits (the image must fit the template)
2. Weight limits (the email must load fast and send reliably)

The 600px standard (email’s magic number)

A lot of HTML email templates still revolve around a ~600px content width. It’s not trendy—it’s just compatible.

Campaign Monitor has a useful breakdown of sizing norms in email newsletters. (campaignmonitor.com)

The email Retina rule (same idea, different reason)

If your email’s content width is 600px, export key images at 1200px wide for Retina sharpness—then display them at 600px in the email HTML.

Do this for:

• headers / hero banners
• product feature images
• anything with text baked into the image

Attachment vs inline newsletter images (don’t mix these up)

If you’re attaching photos (personal/client email)

Most email providers have hard attachment limits. Gmail’s is commonly 25 MB. (support.google.com)

If you attach three raw phone photos, you can hit the limit fast. The fix is simple:

• Convert HEIC if needed: HEIC to JPG
• Resize to a sensible long edge (often 1920px or 2400px): Resize Image
• Compress: Compress Image

If you’re sending an HTML newsletter (marketing email)

The email may send, but heavy images will load slowly on mobile data. Slow emails get ignored.

A practical goal:

• Keep total email image weight around ~1MB when you can (less is better)

Mailchimp has long-running guidance on keeping email images reasonable and aligned with template behavior. (mailchimp.com)

Email export sizes (cheat table)

Email use case	Typical display width	Export width (standard)	Export width (Retina)	Notes
Full-width banner/header	600px	600–800px	1200px	JPG for photos; keep text away from edges
Two-column image	280–300px	300–400px	600px	Great for product blocks
Small inline image	200–400px	400px	800px	Only if it needs to be crisp
Email signature headshot	96–128px	256px	256px	Keep it light; signatures get forwarded

Part 3: Formats matter as much as dimensions

You can nail the pixel size and still lose the war if you pick the wrong format.

For the web: modern formats are worth it

• WebP is a strong default for the web: smaller files, great quality, broad support. (caniuse.com)
  • Use: Image to WebP, JPG to WebP, PNG to WebP
• AVIF can be even smaller, with growing browser support. (caniuse.com)
  • Use: WebP to AVIF (easy way to test AVIF without changing your whole pipeline)

If you want AVIF but you’re starting from JPG/PNG, a simple workaround is:

1. Convert to WebP → 2) Convert WebP to AVIF.

For email: compatibility beats everything

Email clients don’t love modern formats.

Safe choices:

• JPG for photos
• PNG for logos/transparency (but don’t use it for big photos unless you enjoy large file sizes)
• GIF for simple animation

If someone gives you a heavy PNG photo, convert it:

• PNG to JPG (when transparency isn’t needed)

The File Gulp workflow (step-by-step, no drama)

Here’s the exact process when someone hands you an 8MB image and says “put this in the email” or “upload this to the blog.”

Step 1: Fix the shape (only if it’s wrong)

Use Crop Image.

If you skip this and try to force width/height, you’ll get the dreaded squish.

Step 2: Resize to match the placement

Use Resize Image.

• Blog content image: often 1200–1600px wide
• Email banner: 1200px wide (display at 600px)

Step 3: Convert to the right format

• Web: Image to WebP (or convert JPG/PNG to WebP)
• Email: Image to JPG or Image to PNG (logos/transparency)
• iPhone HEIC: HEIC to JPG

Step 4: Compress to hit your budget

Use Compress Image.

Zoom in and check:

• gradients (sky, studio backdrops)
• hair and fine texture
• edges around text

Step 5: Strip metadata (privacy + a few KB saved)

Use Remove Image Metadata.

EXIF can include device info, timestamps, and sometimes GPS coordinates. If you’re emailing clients or posting publicly, this step is a quiet upgrade.

Real scenarios (because resizing gets messy fast)

Scenario A: Emailing a client 20 photos (without being that person)

Goal: review copies, not print masters.

1. Resize long edge to 2000–2400px: Resize Image
2. Compress until clean at 100% zoom: Compress Image
3. Strip metadata (recommended): Remove Image Metadata
4. If they’re HEIC files: HEIC to JPG first

Scenario B: Your blog post is slow because images are 1–3MB each

1. Resize each image to 1200–1600px wide: Resize Image
2. Convert to WebP: Image to WebP
3. Compress: Compress Image
4. Want to test AVIF? Convert WebP → AVIF: WebP to AVIF

Scenario C: Your email header looks blurry even though it’s “HD”

Usually you exported at exactly 600px and viewed it on a high-density display.

Fix:

• Export at 1200px, display at 600px, compress carefully.

Scenario D: Your website image looks sharp but the page still feels slow

Sharp doesn’t mean efficient.

Check:

• Are you serving 3000px for an 800px slot?
• Is it PNG when it could be WebP/JPG?
• Is it your LCP element?

Web.dev’s image optimization guidance is a good checklist. (web.dev)

Common resizing mistakes to dodge (fast fixes included)

1. Upscaling (small → big)
   You can’t invent detail. Find the original high-res source, then resize down.

2. Ignoring aspect ratio (the squish)
   Crop first: Crop Image.

3. Compressing before resizing
   Artifacts can become more obvious after later edits. Use: Crop → Resize → Compress.

4. Using PNG for photos because “lossless = better”
   PNG photos can be huge. Convert: PNG to JPG or PNG to WebP.

5. Forgetting metadata
   Strip it: Remove Image Metadata.

6. Overwriting your master file
   Always keep the original. Export resized copies.

The ultimate cheat sheet (bookmark-worthy)

Use case	Ideal format	Recommended width	File size target
Web: Hero / full background	WebP (AVIF if tested)	1920px (sometimes 2560px)	< 200–300KB
Web: Blog image (Retina-friendly)	WebP	1600px	< 150–200KB
Web: Product thumbnail	WebP	600px	< 50KB
Email: Newsletter header	JPG/PNG	600px display (1200px export)	< 200KB
Email: In-body photo	JPG	600px	< 100–150KB
Email: Direct attachment	JPG	1920px max	< 1MB per file

DPI note (so you don’t get dragged into a pointless debate)

You’ll hear “make it 300 DPI” in email/web contexts.

For screens, pixel dimensions matter. DPI is mostly print metadata. So for email and web: focus on pixels + format + file size.

---