Compress Images: Complete Guide to Reducing File Size (2026)

Images account for an average of 50 to 70% of a web page's total weight. On an e-commerce site with 40 product pages, that quickly adds up to several hundred megabytes downloaded every day. And the problem goes beyond just load time.

Mobile traffic now exceeds 62% of all web visits in 2026 (Statcounter). Google is placing increasing weight on user experience in its ranking criteria. The digital carbon footprint is starting to factor into technical decisions. Every unnecessary kilobyte costs something -- in performance, money, and environmental impact.

Why compressing an image should be at the top of your priority list:

• SEO: Google uses Core Web Vitals -- and specifically the Largest Contentful Paint (LCP) -- as a ranking factor since 2021. A 2.5 MB hero image that takes 4 seconds to display means an LCP above the 2.5-second threshold. Result: you lose positions in the SERPs. Our guide to improving LCP details the mechanisms at play.
• Conversions: 53% of mobile visitors leave a page if it takes more than 3 seconds to load (Google/SOASTA study, 2017, confirmed by Think with Google benchmarks). Each additional second reduces the conversion rate by 7% on average. For a site generating EUR 100,000 in monthly revenue, that's EUR 7,000 lost per extra second of latency.
• Hosting costs: a site serving 10,000 visitors per day with unoptimized images easily consumes 500 GB of monthly bandwidth. After compression, 80 GB is enough. The difference shows up directly on the invoice.
• Environment: less data transferred = less energy consumed by servers and devices.

Compressing an image means reducing the file size without visible degradation. Reducing the size of an image means adapting its pixel dimensions to the actual display area. The two go hand in hand. This guide covers both: formats, online tools, desktop software, WordPress plugins, command line, lazy loading, and CDNs.

Lossy vs lossless compression: choosing the right strategy

Before choosing a tool, you need to understand the two families of compression that coexist.

Lossy compression

The algorithm removes visual information that the human eye does not perceive or barely notices. The resulting file is significantly lighter, but the degradation is irreversible. With each re-compression, quality degrades a little further. This is the native behavior of JPEG, and also the default mode of WebP and AVIF for photographic content.

In practice, a JPEG compressed at 80% quality reduces the file size by 60 to 70% compared to the original with no perceptible difference on screen. Below 60%, compression artifacts (blocks, halos around edges) become visible.

Lossless compression

No data is removed. The file is reorganized more efficiently, but every pixel is preserved identically. This is the principle behind PNG and the lossless mode of WebP. The weight savings are more modest (10 to 30% in general), but quality remains perfect. Best suited for logos, screenshots, charts, and any image containing text or flat color areas.

When to use which?

• Photos, complex illustrations, hero images: lossy compression (JPEG, WebP lossy, AVIF). Aim for quality between 75 and 85%.
• Logos, icons, screenshots, charts: lossless compression (PNG, WebP lossless, SVG for vector graphics).
• Images with transparency: PNG or WebP (both support the alpha channel).

Image formats you need to know in 2026

The format is the first decision. Before even choosing a tool or plugin, you need to know which container you'll be storing your pixels in. Our detailed guide on WebP and AVIF dives deeper into the technical aspects of modern formats.

JPEG: the standard format for photos

JPEG remains the most widely used format for photographic content. Its lossy compression offers a good weight-to-quality ratio for images rich in gradients and detail. Its limitations: no transparency, no animation, and compression efficiency surpassed by modern formats. The MozJPEG codec (used by Squoosh and several CDNs) improves JPEG compression by an additional 10 to 15% compared to standard encoders.

PNG: uncompromising quality

PNG uses lossless compression. It excels for images with solid color areas, text, and alpha transparency. The tradeoff is that a photographic PNG is often 3 to 5 times heavier than an equivalent JPEG. For the web, PNG remains relevant for logos and UI elements, rarely for photos.

WebP: the modern web standard

Developed by Google and supported by all major browsers since 2023 (including Safari), WebP bridges aggressive compression and visual quality. In lossy mode, it is 25 to 34% lighter than JPEG at equal quality. In lossless mode, it is 26% more compact than PNG. It supports transparency and animation. In 2026, WebP is the recommended default format for the vast majority of web use cases.

AVIF: next-generation compression

Based on the AV1 video codec (Alliance for Open Media), AVIF pushes compression efficiency even further. Gains reach 50% compared to JPEG and 20% compared to WebP at identical perceptual quality. It supports transparency, HDR, and wide color gamuts. Browser support is now excellent (Chrome, Firefox, Edge, Safari since iOS 16 / macOS Ventura). The tradeoff: encoding is slower and more CPU-intensive than WebP, which requires aggressive caching on the server or CDN side.

SVG: vector graphics for minimal file size

SVG is not a bitmap format but a vector one. It is ideal for logos, icons, and geometric illustrations. Its file size is generally under 10 KB, and it scales to any resolution without loss of sharpness. It is not suited for photographic content.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="1200" height="675">
</picture>

Compressing images online: the best free tools

Don't feel like installing anything? Fair enough. These three online tools let you compress a photo in seconds right from your browser.

Squoosh: Google's image lab

Squoosh (squoosh.app) is an open source tool developed by Google's Chrome team. Everything happens in the browser -- no files are sent to a server. The interface displays a real-time before/after comparator that lets you visually assess the degradation at each quality level.

Squoosh's strengths:

• Support for all modern formats: JPEG, WebP, AVIF, PNG, MozJPEG, OxiPNG
• Fine-grained quality adjustment with instant preview
• Built-in resizing
• Works offline (Progressive Web App)

It's the tool most developers use to test different formats and compression levels before locking in a production configuration.

TinyPNG: smart one-click compression

TinyPNG (and its counterpart TinyJPG) uses a color quantization algorithm that analyzes similar color regions in the image to reduce the number of colors without visible impact. The result: a 50 to 80% weight reduction with virtually identical visual quality.

• Up to 20 free images per session (5 MB max per file)
• Supports JPEG, PNG, and WebP
• API available for integration into automated workflows (500 free compressions/month)
• Official WordPress plugin available

iLoveIMG: accessible batch processing

iLoveIMG focuses on simplicity and batch processing. The tool lets you compress multiple images simultaneously, resize them, convert between formats, and crop them. The interface requires no technical expertise.

• Batch compression (up to 15 images in the free version)
• Format conversion (JPEG, PNG, WebP, GIF)
• Google Drive and Dropbox integration
• Premium version for heavy usage

Compressing images with desktop software

For handling large volumes or working without an internet connection, locally installed software is more suitable.

ImageOptim: the obvious choice on macOS

ImageOptim is a free, open source Mac application. It combines multiple compression engines (MozJPEG, pngquant, Zopfli, SVGO) to automatically optimize images dropped into its window. The workflow is straightforward: drag and drop files, and ImageOptim compresses them by overwriting the originals (remember to make a backup first). Typical savings range from 30 to 70% depending on the format and image content.

XnConvert: powerful cross-platform batch processing

XnConvert (free for non-commercial use) runs on Windows, macOS, and Linux. It lets you define processing chains: resizing, quality adjustment, format conversion, renaming -- all applicable to hundreds of images in a single pass.

• Over 500 formats supported for reading
• Export to JPEG, PNG, WebP, AVIF, TIFF, and many more
• Configurable and reusable action-based pipeline interface
• EXIF metadata preservation or selective removal

Photoshop and GIMP: total control

Adobe Photoshop offers the "Export for Web" (legacy) or "Export As" function, allowing you to precisely define the format, quality, and dimensions. For professional work where each image needs specific tuning, Photoshop remains hard to beat.

GIMP, its free and open source alternative, offers equivalent functionality via "Export As" with a JPEG quality slider and advanced PNG options. Less ergonomic than Photoshop, but functionally complete.

Compressing images on WordPress: plugins that do the work

WordPress powers more than 43% of websites worldwide. Manually compressing images before each upload is not viable on a site with dozens of contributors. Optimization plugins automate this task and convert images to WebP or AVIF in the process. To maximize gains, combine a compression plugin with a high-performance caching plugin.

Imagify: the all-in-one solution by WP Rocket

Developed by the team behind WP Rocket, Imagify offers three compression levels (Normal, Aggressive, Ultra) and automatically converts images to WebP and AVIF on upload. The plugin also optimizes images already in the media library via a bulk processing tool.

Imagify's strengths:

• Native integration with WP Rocket for image caching
• Backup of originals for restoration
• Automatic resizing of oversized images
• 20 MB free per month, then starting at EUR 4.99/month

ShortPixel: flexibility and value for money

ShortPixel plays the flexibility card. The plugin offers lossy, glossy (a middle ground between lossy and lossless), and lossless compression. It converts to WebP and AVIF, optimizes PDFs, and automatically processes WordPress thumbnails.

• 100 free credits per month (1 credit = 1 image or 1 thumbnail)
• Built-in PDF compression
• "Glossy" mode for an optimal quality/weight tradeoff
• Also works as an image CDN (ShortPixel Adaptive Images)

Smush: popularity and generous free plan

Smush (by WPMU DEV) is the most installed image compression plugin on WordPress with over one million active installations. The free version automatically compresses images on upload (up to 5 MB per image) and performs native lazy loading.

• Automatic compression on upload, no file limit in the free version
• Built-in lazy loading
• Detection of improperly sized images
• The Pro version adds advanced lossy compression, CDN, and WebP support (starting at USD 3/month)

Which WordPress plugin should you choose?

For a WordPress site where performance is a priority, Imagify or ShortPixel are the strongest choices thanks to their AVIF support and advanced compression options. Smush remains a good option for personal sites or tight budgets.

Compressing images via command line: Sharp and ImageMagick

When managing hundreds or thousands of images, graphical interfaces show their limits. CLI tools integrate into build pipelines, deployment scripts, and CI/CD workflows. They allow you to automate compression on every deployment, with a direct and measurable impact on LCP.

Sharp: the high-performance Node.js library

Sharp is the most widely used image processing library in the Node.js ecosystem. It relies on libvips, a fast and memory-efficient C library. Sharp is also the engine used by Next.js for its next/image component.

A concrete compression example with Sharp:

const sharp = require('sharp');
 
await sharp('input.jpg')
  .resize(1200, 675, { fit: 'inside', withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('output.webp');

This script resizes the image to a maximum width of 1200 px (without enlarging smaller images), converts it to WebP at 80% quality, and saves it. The operation takes less than 100 ms on a standard machine.

Sharp also lets you generate multiple variants in a single pass:

const pipeline = sharp('input.jpg');
 
await Promise.all([
  pipeline.clone().resize(400).webp({ quality: 75 }).toFile('thumb.webp'),
  pipeline.clone().resize(800).webp({ quality: 80 }).toFile('medium.webp'),
  pipeline.clone().resize(1200).webp({ quality: 80 }).toFile('large.webp'),
  pipeline.clone().avif({ quality: 60 }).toFile('output.avif'),
]);

ImageMagick: the time-tested Swiss Army knife

ImageMagick is a command-line tool available on all operating systems. It supports over 200 image formats and can convert, resize, and compress just about anything.

To compress a JPEG image with ImageMagick:

magick input.jpg -quality 82 -strip -interlace Plane output.jpg

The -strip option removes EXIF metadata (which shaves off a few extra KB) and -interlace Plane enables progressive JPEG, which allows a low-resolution preview to display before the full image loads.

To batch-convert images to WebP:

for f in *.jpg; do magick "$f" -quality 80 "${f%.jpg}.webp"; done

Sharp or ImageMagick: how to choose?

The choice depends on your technical environment. Sharp is the natural pick if your stack runs on Node.js (Next.js, Nuxt, Astro). Its performance exceeds ImageMagick for bulk processing thanks to libvips, and its programmatic API integrates directly into your build scripts. ImageMagick is better suited to heterogeneous environments (shell scripts, PHP, Python) and one-off conversion needs. Its command line is universal and requires no Node dependency.

Integrating compression into a CI/CD pipeline

The most robust approach is to automate compression within the deployment process. With a Sharp script integrated into a GitHub Actions or GitLab CI pipeline, every committed image is automatically optimized before going to production. This automation eliminates human error, ensures every published image meets your weight and quality standards, and directly contributes to keeping LCP under the 2.5-second threshold.

Sizing your images correctly before compressing them

Reducing the size of an image starts with a simple question: at what dimensions will this image actually be displayed? A 4000 x 3000 px photo (12 megapixels) displayed in an 800 x 600 px container wastes 80% of its pixels. Resizing before compressing is the first and biggest source of weight savings.

Some sizing guidelines for the web:

• Hero image / full-width banner: 1200 to 1600 px wide (1920 px for high-density screens)
• Image within article body: 800 px wide
• Thumbnail: 300 to 400 px wide
• Open Graph image (social sharing): 1200 x 630 px

For Retina screens (2x), serving an image whose dimensions are double the CSS display size is necessary. A 600 px CSS container will therefore receive a 1200 px image. Beyond 2x, the visual gain is marginal but the weight cost is real.

The srcset and sizes attributes for responsive images

The HTML <img> element with the srcset and sizes attributes allows the browser to automatically choose the variant best suited to the screen size and pixel density:

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="Image description"
  width="800"
  height="450"
  loading="lazy"
/>

Always specify the width and height attributes to avoid layout shifts (CLS -- Cumulative Layout Shift), another penalizing Core Web Vital.

Lazy loading: only load what's visible

Lazy loading defers the loading of images located outside the visible area (viewport) until the user scrolls to them. The page displays faster, LCP improves, and the bandwidth consumed on initial load drops significantly.

Since HTML 5.1, the native loading="lazy" attribute is supported by all modern browsers. Simply add it to your <img> tags:

<img src="photo.webp" alt="Description" width="800" height="450" loading="lazy" />

Two rules to follow:

• Do not apply lazy loading to the LCP image (the largest image visible on initial load). This image must load immediately. Use loading="eager" or simply omit the attribute for the above-the-fold image.
• Always specify width and height so the browser reserves the space before loading and avoids layout shifts (CLS).

Image optimization via CDN: on-the-fly compression

An image CDN (Content Delivery Network) goes further than a standard CDN. In addition to distributing your files from servers close to your visitors, it applies on-the-fly transformations: resizing, format conversion, quality adjustment -- all based on the visitor's browser and device.

The leading image CDNs in 2026:

• Cloudflare Images: URL-based transformation, automatic detection of the optimal format (WebP/AVIF based on the browser), global edge caching. Starting at USD 5/month for 100,000 images.
• Imgix: over 100 transformation parameters via URL. Used by many high-traffic sites. Pricing based on the number of source images.
• Cloudinary: complete media management and optimization platform. Smart compression based on image content. Free plan with 25,000 transformations/month.

The concept is simple: you store the source image in high quality, and the CDN generates the optimal version on the fly for each visitor. No more manually creating variants by size and format. For sites with a large image catalog, this is the approach that scales without friction.

Format comparison: actual file sizes for the same image

The figures below are based on a standard 4000 x 3000 px photo (taken with a recent smartphone), then resized to 1200 x 675 px for web hero usage.

Original photo (4000 x 3000 px)

Resized hero image (1200 x 675 px)

Resizing + modern format + appropriate compression: you go from 4.2 MB to 48 KB in AVIF. A 98.9% reduction. On a page with 10 images, that's the difference between 42 MB and 480 KB. In concrete terms, the difference between a page that takes 8 seconds to load on 4G and one that displays in under 2 seconds.

Best practices for effective and sustainable compression

These are simple rules, but we see them ignored on the majority of sites we audit:

Keep the originals. Always maintain a high-resolution copy of each source image. Lossy compression is irreversible. Store originals in an S3 bucket, a NAS, or a dedicated folder outside the production directory.

Never recompress an image that has already been lossy-compressed. Each pass degrades quality. Start from the original to generate a new version.

Automate rather than rely on individual discipline. Whether through a WordPress plugin, a Sharp script in the build pipeline, or an image CDN, automated compression ensures consistency.

Remove unnecessary EXIF metadata. EXIF data (camera model, GPS coordinates, shooting parameters) often adds 50 to 200 KB to the file. On the web, this information is rarely useful and can even raise privacy concerns (geolocation). Remove it unless your use case requires it.

Implement lazy loading on below-the-fold images. Use the loading="lazy" attribute to defer loading of images not visible on initial load. Do not apply it to the LCP image.

Test on real devices. An image that looks fine on a 27-inch monitor may reveal artifacts on a smartphone. Validate your compression levels across multiple screen types.

Audit regularly with Lighthouse. Google's audit tool identifies unoptimized images, suggests modern formats, and measures the impact on LCP. Integrate a Lighthouse audit into your deployment routine.

Frequently asked questions about image compression

How does image compression affect SEO and Google rankings?

Unoptimized images degrade the Largest Contentful Paint (LCP), one of the three Core Web Vitals that Google uses as a ranking factor. An LCP above 2.5 seconds directly penalizes your positioning. Compressing an image and sizing it correctly is one of the fastest levers for improving your LCP and gaining organic visibility.

What is the best image format for the web in 2026?

WebP is the recommended default format for most use cases thanks to its universal support and strong compression-to-quality ratio. AVIF offers an additional 20% savings but with slower encoding and slightly less extensive browser support on older systems. The optimal strategy: serve AVIF to compatible browsers, WebP as a fallback, and JPEG as a last resort via the <picture> element.

Can you automate image compression on WordPress without losing quality?

Yes. Plugins like Imagify and ShortPixel offer a lossless compression mode that does not degrade quality. For lossy compression, ShortPixel's "glossy" mode or Imagify's "Normal" mode provide a tradeoff where degradation is invisible to the naked eye. These plugins automatically process every uploaded image and can retroactively optimize the entire existing media library.

What is the difference between an image CDN and a compression plugin?

A compression plugin (Imagify, ShortPixel) optimizes images stored on your server. It intervenes once, at upload or via bulk processing. An image CDN (Cloudflare Images, Cloudinary, Imgix) stores your source images and generates optimized variants on the fly based on the visitor's browser and device. The CDN also adds geographic distribution from servers close to the user. The two approaches are complementary: the plugin reduces weight at the source, the CDN optimizes delivery.

Need an outside perspective on your site's performance? Contact us for an audit of your images and Core Web Vitals.