You've just exported a product photo from your phone, and the upload form rejects it because the file is too large. Or the image uploads successfully, but your storefront feels sluggish because every product page is carrying a camera-original file. The fix isn't just dragging a compression slider until the picture looks blurry. How to make a photo smaller in MB depends on where the image will appear, how large it will render, and which format fits the job.

A thumbnail, product-grid image, hero banner, email attachment, and zoomable product-detail image each need a different balance of dimensions, quality, and compatibility. The reliable workflow is to resize the pixels first, choose an efficient format second, and tune compression last. That approach saves space without forcing you to redo the entire catalog later.

Table of Contents

Why Your Photo Is Too Big and What to Aim For

A photo becomes unnecessarily heavy for three common reasons. The camera may have captured far more pixels than the page needs, the file may use a format designed to preserve editing data, or the export may have retained metadata and quality settings intended for print rather than screens. A large master image can be perfectly sharp and still be the wrong delivery file for a small product card.

Start with the image's role. For a product thumbnail, a target of 20–40 KB is a practical starting range, while a hero image commonly needs 100–200 KB, as outlined in Shopify's image optimization guidance. For many web images, keeping the final file at about 200 KB or less is a useful operating target, but don't treat it as a quality rule. A zoomable product image may need more detail than a small grid tile, and an email attachment may need broader compatibility than a storefront asset.

The three controls are straightforward:

  • Resize dimensions: Reduce the pixel width and height to the largest size the image will display.
  • Change format: Use JPEG, WebP, or AVIF for photographs instead of keeping a bulky source format.
  • Tune compression: Lower quality gradually while checking the image at its intended viewing size.

Google's WebP documentation reports files that are typically 25%–34% smaller than comparable JPEG images at equivalent visual quality, and 26% smaller than PNG in lossless mode. Google's WebP study also explains why format conversion can reduce file weight without obvious visual damage.

Before editing, check the current file size and dimensions. On Windows, right-click the file and choose Properties. On macOS, select the image and press Command-I. On iPhone or Android, open the file's information panel. If the image is several megabytes but will appear as a small card, dimensions are usually the first place to look. For artwork that will be printed or placed on apparel, confirm the required dimensions first, such as the guidance in this standard tee graphic from Raccoon Transfers, before making a web-only export.

Understand the Three Ways to Shrink MBs

File size comes from the amount of image information your export stores. You can reduce that information by changing the number of pixels, simplifying how those pixels are encoded, or switching to a codec that stores similar visual information more efficiently.

A diagram illustrating three effective methods to reduce image file size: resizing, compressing, and changing formats.

Resize before you compress

Pixel dimensions usually provide the fastest reduction. If an image is wider than the maximum space available in its container, every extra pixel adds work without improving what shoppers see. Resize the long edge to the maximum rendered width, preserve the original aspect ratio, and avoid enlarging a small image to meet an arbitrary upload requirement.

Resizing also protects quality because you're removing pixels the viewer doesn't need rather than aggressively damaging the pixels that remain. A small product tile shouldn't receive the same master image as a full-screen gallery or zoom view.

Use lossy compression for photographs

JPEG, WebP, and AVIF use lossy methods that discard visual information the eye is less likely to notice. For photographs, that's generally more appropriate than lossless export. Lossless settings preserve every detail, but they can leave a photo far heavier than its web role requires.

Lower quality in controlled steps and inspect edges, fine fabric texture, gradients, and shadows. Product photography needs special attention around lettering, jewelry, hair, transparent packaging, and dark backgrounds, where artifacts become visible sooner.

Select a more efficient format

WebP and AVIF can encode photographic content more efficiently than older JPEG workflows. Google's comparative research found WebP delivered 23%–42% better compression density than size-optimized PNGs across a corpus of 12,000 web images, while another study reported an average compression percentage of 41.30% with non-negative compression gain. See Google's WebP lossless and alpha study for the documented comparisons.

Use this order every time:

  1. Decide the image role and maximum display dimensions.
  2. Resize the original to those dimensions.
  3. Export to WebP or JPEG, using AVIF when its extra savings fit your workflow.
  4. Reduce quality only until artifacts appear, then move slightly upward.
  5. Open the final file on the target page or device before replacing the original.

That sequence prevents a common mistake, lowering quality to compensate for dimensions that are far too large.

Reduce Photo Size on Desktop Without Losing Quality

Desktop tools give you the clearest control because you can compare the original and export side by side. Keep the untouched camera file in a separate folder, then work from that original rather than repeatedly exporting an already compressed copy.

A hand adjusts a slider on a laptop screen to reduce the file size of an image.

A dependable desktop sequence

In macOS Preview, open the image and use Tools > Adjust Size. Set the maximum width or height, keep proportional scaling enabled, and save a copy. Preview is useful for resizing, but it doesn't provide the same format and compression control as a dedicated export tool.

In Windows Photos, use the image resize option where available, or open the file in Paint and choose Resize. Set the resize method to pixels, preserve the aspect ratio, and export a copy as JPEG. For a more deliberate WebP workflow, use Photoshop, GIMP, or a reputable browser compressor that supports the format.

In Photoshop, use File > Export > Export As. Select WebP for a modern storefront delivery file, set the long edge to the maximum display dimension, and adjust quality while watching the estimated file size. If you need transparency, keep PNG or use a format and pipeline that supports an alpha channel. Don't convert a transparent product cutout to JPEG, because JPEG has no transparency layer and will replace it with a solid background.

GIMP offers a free alternative. Open the image, resize it under Image > Scale Image, then use Export As. Choose JPEG and adjust the quality in the export dialog, or select WebP when your installation supports it. Online tools can handle a quick one-off job, but avoid uploading confidential product concepts or customer images to a service unless its privacy terms suit your business.

Practical rule: Resize to the largest rendered width first, then test a moderate lossy export. A visually clean image under the relevant web target is more useful than a technically perfect file that carries pixels the page never displays.

For PNG files, transparency and flat graphics need different treatment from photographs. A product image with a transparent background may benefit from palette reduction or WebP conversion, while a photo saved as PNG often wastes space. The PNG compression workflow from RankEngine is useful when the source is artwork, screenshots, or transparent imagery rather than a standard camera photo.

After resizing, export one version, inspect it at 100% zoom, and compare it with the original. Look at thin straps, printed labels, fabric weave, color transitions, and reflective surfaces. If the export looks good but still exceeds the upload limit, lower quality in small increments. Don't make several successive JPEG exports, because each pass can introduce additional artifacts.

The video below demonstrates the general compression process and the controls you'll encounter in common image tools.

A useful example comes from Google's documented WebP comparisons. A 30% reduction on a 5 MB image saves about 1.5 MB per file, so conversion becomes significant when a catalog contains many large images. The actual result depends on the subject, dimensions, transparency, and export settings, so judge the finished file rather than relying on a preset number.

Make a Photo Smaller on iPhone and Android in Seconds

Mobile editing is usually about speed. You're preparing an image for a marketplace listing, sending an attachment, or uploading a product photo while away from your desk. The safest habit is to preserve the original and create a smaller copy for the immediate purpose.

Two hands holding smartphones displaying a photo compression process on both iOS and Android devices simultaneously.

iPhone workflow

On an iPhone, save the original in Photos, then create a working copy or use the Files app to convert an image where your iOS version provides that action. When sharing, the Photos share sheet may offer size choices such as Small, Medium, Large, or Actual Size. Choose a reduced option for a quick email or message, but remember that this workflow may not give you precise control over pixel dimensions.

For a Shopify upload or marketplace listing, a resizing app or browser-based tool is more predictable. Select the image, set a maximum width appropriate to the listing, choose WebP or JPEG if accepted, and export a new file. Check the result in Files by opening the information panel. A file that looks fine in the camera roll may still be too large for the upload form.

Android workflow

Android phones vary by manufacturer, but Gallery and Google Photos often include a resize or export option. Open the image, choose Edit or Save copy, and look for a resize control. If your phone doesn't offer one, a reputable image-resizer app can batch-select files, set a maximum dimension, and export JPEG or WebP.

Camera settings also matter. HEIC or HEIF can save space, but some marketplaces, older applications, and business workflows still expect JPEG. Keep HEIC as your efficient original when it fits your process, and create a JPEG copy when compatibility matters more than the smallest file.

Use these mobile checks before sending:

  • Keep the source: Don't overwrite the original until the recipient or platform accepts the smaller file.
  • Match the destination: Use a compact image for email or social sharing, and preserve more detail for a product page with zoom.
  • Inspect information: Confirm the new dimensions and file size in the phone's file details.
  • Batch carefully: Apply the same preset only to images with the same role and display size.

Browser tools are convenient for a one-time conversion, but use them selectively for private or unreleased imagery. For recurring catalog work, a desktop batch process creates more consistent filenames, dimensions, and formats.

Choose the Right Format and Batch Workflow for Shopify and Web

A Shopify product photo may serve a grid thumbnail, collection card, detail gallery, or promotional banner. Those placements do not need the same export. A thumbnail can prioritize a small file and fast loading, while a hero image needs enough pixels for its rendered width and customer zoom. Set a maximum display width for each role, then create responsive variants when the theme or image pipeline supports them. This role-based export prevents every visitor from downloading an oversized master.

Format selection controls the next trade-off. WebP is usually a practical default for web photographs, AVIF can reduce file size further when encoding and compatibility fit the workflow, and JPEG remains a dependable fallback. Convertify's image format comparison describes WebP files around 40% smaller than JPEG in measured tests, with AVIF reductions exceeding 60% in some datasets. Treat those figures as benchmarks, not promises for every product photo.

Option Typical Savings vs JPEG Best For Watch Out
JPEG Baseline Broad compatibility and simple fallback delivery Can be heavier than newer formats
WebP Often 25%–34% smaller at comparable visual quality, per Google's WebP study linked above Default storefront photos and responsive web assets Confirm the upload or theme pipeline handles it correctly
AVIF Can exceed 60% reduction in some measured datasets Images where extra savings justify slower encoding Encoding time and workflow compatibility can add friction
Responsive variants Savings depend on the difference between source and rendered size Mobile, tablet, grid, and hero delivery Requires theme or CDN support for correct selection

For a large catalog, use a batch tool or script with consistent filenames. Set a maximum long edge, convert suitable photographs to WebP, retain JPEG fallbacks, and store untouched originals outside the upload folder. Reserve AVIF for templates or image groups where your team can test encoding time and browser delivery without slowing production.

Lossless export for every photograph wastes storage and bandwidth. Overly aggressive quality settings create blockiness, ringing around product edges, and muddy fabric detail. The correct threshold depends on how shoppers use each image. A detail shot that looks sharp in a grid can fail when a customer opens the gallery.

Use this guide to optimizing images for a website to review delivery settings alongside the export file. Record the source filename, output dimensions, format, and final size in the batch workflow. That record makes poor exports easier to replace without processing the entire catalog again.

Final Checks and Pro Tips to Keep Quality High

A smaller file is successful only when it still serves its intended role. Before uploading, review the dimensions, file size, sharpness, color, and transparency. Open the image in the actual Shopify theme or destination whenever possible, because a local preview won't reveal how the template crops or scales it.

A checklist of five tips to ensure image quality before exporting for digital platforms and websites.

The final inspection

  • Check dimensions: Confirm the width and height match the image role and maximum rendered space.
  • Verify file size: Read the final file information instead of trusting the export estimate.
  • Zoom to 100%: Inspect product edges, labels, textures, shadows, and gradients for compression artifacts.
  • Check color accuracy: Compare the export with the original and watch for dull saturation or shifted neutrals.
  • Export smart: Work from the untouched original, save a new copy, and avoid repeated JPEG re-exports.

Stop compressing when further savings create visible damage or remove useful product detail. Lossless export is appropriate for certain graphics and transparency needs, but it's rarely the efficient default for ordinary web photographs. Likewise, one huge master image shouldn't serve every device when responsive delivery can provide a smaller suitable file.

For Shopify operators, image review also includes discoverability. RankEngine can audit image alt-text coverage, compression status, and size savings, while its image alt text SEO guidance covers the descriptive information that compression tools don't manage. Audit the heaviest product images first, fix the exports from their originals, and record the result so future uploads follow the same standard.

RankEngine audits Shopify images for compression status, size savings, and missing alt text alongside broader technical SEO checks. Visit RankEngine to identify the store's heaviest image files, prioritize practical fixes, and verify what changed on the live store.