You have probably been here before. You try to email a batch of photos and it bounces. Or you upload a product image to your store and the page loads like it is 2006. Or your phone is full because every screenshot is inexplicably 4 MB.

The fix is simpler than you think, and you do not need Photoshop or any paid software. This guide walks you through the four ways images get smaller, when to use each one, and how to do it all for free in about thirty seconds per image.

Person working at a laptop surrounded by multiple screens, representing digital image workflow
Photo by Christina Morillo on Pexels

Why images are so large in the first place

Modern phone cameras shoot at 12 to 200 megapixels. A single photo from a recent iPhone or Samsung is routinely 3 to 8 MB. Screenshots on a retina display are 2 to 4 MB. AI-generated images often arrive as uncompressed PNGs at 10 MB or more.

Most of that size is either unnecessary resolution (your blog does not need a 48-megapixel image) or inefficient encoding (the format is wasting bytes on detail your eyes cannot see). Both are fixable without touching the visible quality.

The core insight: Images account for 21% of total webpage weight on average. On 68% of mobile pages, the largest image is the single biggest bottleneck for load time. Making images smaller is often the single most impactful thing you can do for speed.

The four ways to make an image smaller

Every image optimization technique falls into one of four categories. You can combine them, and usually should:

Four levers for smaller images1Compress: squeeze out invisible data2Resize: reduce the pixel dimensions3Convert: switch to a more efficient format4Strip: remove hidden metadata

1. Compression (the big one)

Compression is where most of the savings come from. It works by discarding visual information that your eyes cannot distinguish. A JPEG compressed to 80% quality looks identical to the original in almost every test, but the file is often 60 to 70% smaller.

There are two types:

  • Lossy compression removes data permanently. A photo at quality 80 looks the same but is dramatically smaller. This is what you want for photos, social posts, and web images.
  • Lossless compression reorganises the data more efficiently without removing anything. The file gets somewhat smaller (10 to 30%) but every pixel stays identical. Use this for medical images, legal documents, or any case where pixel-perfect fidelity matters.

For most people, lossy at quality 75 to 85 is the sweet spot. Google's own documentation recommends this range.

2. Resizing (the overlooked one)

Your phone captures a photo at 4032 x 3024 pixels. Your blog column is 800 pixels wide. That means the browser downloads a massive image and then throws away 80% of it to fit the space. You are making visitors download pixels they will never see.

Resize the image to the actual display size before uploading. A photo going into an 800px-wide blog column should be 800 to 1600px wide (the upper end covers retina screens). That alone can cut the file size by 75%.

3. Format conversion (the modern one)

Not all formats are created equal. The same photo saved as different formats at comparable visual quality:

Same photo, different formatsPNG3200 KBJPEG850 KBWebP520 KBAVIF380 KB
Approximate sizes for a 1200px photo at comparable visual quality. Your numbers will vary by content.

If you are still serving PNG photos or unoptimised JPEGs, switching to WebP or AVIF can cut your file size in half with no visible difference. Every modern browser supports WebP. AVIF support is at 94% and growing. Read the full breakdown in our AVIF vs WebP comparison.

4. Metadata stripping (the hidden one)

Every photo from your phone carries EXIF metadata: GPS coordinates, camera model, lens settings, timestamps, sometimes a thumbnail copy of the image. This can add 50 to 200 KB per file. It is invisible to viewers but inflates the size.

Stripping metadata makes the file smaller and also protects your privacy by removing the location data. You can check what is hiding in your images with the metadata viewer.

How to do it: the practical steps

Here is the actual workflow. It takes about thirty seconds per image, or a few minutes for a batch.

For a single image (quick method)

  1. Open the image compressor. Drag your image in or click to upload.
  2. Set the quality. Start at 80. If the preview still looks sharp, try 75. If you see artifacts around text or edges, move it up to 85.
  3. Download. Compare the file size shown. You should see a 50 to 80% reduction.

That is the whole process for most people. If you need it even smaller, keep reading.

For maximum compression

Combine multiple techniques in this order:

  1. Resize first. Open the image resizer and set the width to what you actually need (800px for a blog, 1080px for social, 1600px for a full-width hero).
  2. Convert to a modern format. Use the WebP converter to switch from PNG or old JPEG to WebP. This alone saves 25 to 50%.
  3. Compress. Run it through the compressor at quality 75 to 80.
  4. Check the result. If it still looks good, you are done. If text or edges look crunchy, bump quality to 85 and compress again.
Close-up of a laptop screen showing image editing software, representing the compression workflow
Photo by Josh Sorenson on Pexels

For a batch of images

If you have 20 or 200 images to process, doing them one at a time is painful. The image compressor lets you drop them in one at a time, set a quality level, and download each result instantly. Everything runs in your browser, nothing gets uploaded to a server.

How much smaller will your images get?

Real-world numbers from common scenarios:

Starting pointWhat you doTypical resultSavings
6 MB phone photoResize to 1200px + compress at 80180 KB97%
3 MB screenshot (PNG)Convert to WebP + compress250 KB92%
850 KB JPEG from cameraCompress at quality 80210 KB75%
10 MB AI-generated PNGResize + convert to AVIF at 75290 KB97%
4 MB product photoResize to 1000px + WebP + compress95 KB98%

These numbers are not theoretical. They are what happens when you combine resizing with modern formats and moderate compression. A 6 MB photo becoming 180 KB while looking identical is normal, not exceptional.

Quality settings explained (for people who hate guessing)

When a tool asks for a "quality" number, here is what the range actually means:

  • 100: Maximum quality, minimal compression. File is barely smaller. Use only if required for archival or print.
  • 85-95: Visually lossless to most people. Good for portfolio photography, product close-ups, or any image where fine detail matters commercially.
  • 75-85: The sweet spot. Looks identical on screens, dramatically smaller files. Use this for blog images, social media, email attachments, and 90% of web images.
  • 60-75: Noticeable softening if you pixel-peep, but fine at normal viewing distance. Good for thumbnails, background images, or situations where speed matters more than detail.
  • Below 60: Visible artifacts. Only use for very small thumbnails or low-priority decorative images.
The honest truth: Most people cannot tell the difference between quality 80 and quality 95 on a normal screen at normal viewing distance. The file size difference between those two settings is often 3x. You are paying a massive performance cost for quality nobody can perceive.

Common mistakes that make images bigger than they need to be

These are the patterns I see constantly:

Saving photos as PNG

PNG is designed for graphics with flat colours, text, and sharp edges (screenshots, logos, diagrams). It is terrible for photographs because it tries to preserve every single pixel losslessly. A photo that would be 200 KB as JPEG comes out at 2 MB as PNG. Unless your image has transparency or is a graphic, use JPEG or WebP.

Uploading at original resolution

A 4032 x 3024 photo displayed at 600px in a product grid is wasting 95% of its pixels. The browser still downloads all of them. Resize before uploading.

Re-saving an already compressed image

Each time you save a JPEG, it re-compresses and loses a tiny bit more quality. If you open a JPEG, make no changes, and save it again at quality 80, it gets slightly worse. Work from the original whenever possible. Do not compress an already-compressed image multiple times.

Ignoring retina displays

If your image displays at 400px on screen but you serve it at 400px, it looks blurry on retina devices (which is most phones and modern laptops). Serve at 2x the display size: 800px for a 400px slot. That covers retina without being wastefully huge.

Images for specific situations

For email attachments

Most email providers cap attachments at 20 to 25 MB total. If you are sending multiple photos, compress each one and aim for under 500 KB per image. Resize to 1600px wide maximum, nobody is printing photos from an email. Compress at quality 80.

For websites and blogs

Aim for under 200 KB per image. Hero images can go up to 300 KB. Thumbnails should be under 50 KB. Use WebP or AVIF if your platform supports it. Always set width and height attributes in your HTML to prevent layout shift.

For online stores and product images

Product images need to look sharp because they sell things. Use quality 85 to 90. Resize to exactly what your theme displays (usually 1000 to 1200px). For zoom functionality, keep a larger version but still compress it. A 4 MB product photo becoming 95 KB at quality 85 is perfectly sharp for web viewing.

For social media

Platforms re-compress everything you upload. Your goal is to give them a file that is already close to their target quality so they do minimal additional damage. Resize to the platform's recommended dimensions (1080 x 1350 for Instagram feed, 1080 x 1920 for stories) and compress at quality 85. The platform compresses further, but starting clean means less degradation.

Smartphone displaying a social media feed with photos, representing optimized images for social platforms
Photo by Tracy Le Blanc on Pexels

Does compression hurt SEO?

The opposite. Google uses page speed as a ranking signal. The Largest Contentful Paint (LCP) metric, which is one of three Core Web Vitals, directly depends on how fast your biggest image loads. Smaller images mean faster LCP, which means better rankings.

Compressed images also reduce bandwidth costs, improve mobile experience, and lower your bounce rate because people do not leave waiting for a slow page to load. There is no SEO downside to properly compressed images. The downside is leaving them uncompressed.

Tools that do this automatically (if you do not want to think about it)

If you manage a website and want images optimised without a manual step every time:

  • Cloudflare Polish: Automatically compresses and converts images to WebP/AVIF at the CDN level. Enable once, forget it.
  • WordPress plugins (ShortPixel, Imagify, Smush): Compress on upload, serve WebP, and can bulk-optimise your existing library.
  • Vercel / Next.js Image component: Auto-optimises, resizes, and format-converts at request time.
  • Shopify, Squarespace, Wix: All auto-convert to modern formats and compress through their CDN. No action needed on your part.

For one-off images, manual tasks, or when you want full control, the browser-based compressor handles it in seconds with no signup and no server upload.

The 60-second version

If you just want the answer and do not want to read 2,000 words:

  1. Resize to the display size (800 to 1600px wide for web).
  2. Compress at quality 80.
  3. Use WebP if you can, JPEG if you cannot.
  4. Aim for under 200 KB per image on your site.

That covers 95% of cases. You now know more about image optimisation than most developers who never think about it at all.