Image Compressor Free Online
Free online image compressor. Compress PNG and JPG images with adjustable quality. Reduce file size for web.
Drop image here or click to upload
Supports JPG, PNG, WebP
Large image files are one of the biggest causes of slow websites, and slow websites lose visitors and revenue. Studies by Google show that 53% of mobile users abandon a site that takes more than 3 seconds to load. Images often account for 50% to 80% of a webpage's total file size, making image compression one of the highest-impact optimisations you can make for website performance. This free online image compressor reduces JPEG, PNG, and WebP file sizes by 40% to 80% while keeping the images looking great - no upload to a server, no account needed, completely private.
How to Compress an Image Online
The entire compression process happens in your browser using the HTML5 Canvas API. Your image is never uploaded to any server. Here is how to use the tool:
Upload your image
Click "Choose Image" or drag and drop an image file directly onto the upload area. The tool supports JPEG (.jpg, .jpeg), PNG (.png), and WebP (.webp) formats. There is no file size limit - you can upload original high-resolution images from a camera or smartphone, which are often 5MB to 20MB in size.
Set your quality level
Use the quality slider to choose your compression level. The slider ranges from 1 (maximum compression, smallest file) to 100 (minimum compression, largest file). For most web use, a quality setting of 70 to 85 gives excellent visual quality with a 50-70% reduction in file size. The live preview updates as you move the slider so you can see exactly how the image will look at each quality level.
Compare before and after
The tool shows you the original file size alongside the compressed file size in real time. You can see exactly how much you have saved - for example, compressing a 3.2MB JPEG to 680KB saves 2.52MB and represents a 79% file size reduction. The preview image updates immediately so you can visually confirm the quality is acceptable.
Download the compressed image
Click the Download button to save the compressed image to your device. The file saves in the same format as the original - JPEG stays JPEG, PNG stays PNG. The pixel dimensions of the image are unchanged - only the file size is reduced through compression encoding.
Why Image Compression Matters for Websites
Website speed is one of the most critical factors for both user experience and SEO. Google officially uses page speed as a ranking signal through its Core Web Vitals metrics. Largest Contentful Paint (LCP) - which measures how long the main image on a page takes to load - must be under 2.5 seconds to achieve a "Good" score. Uncompressed images are the most common cause of poor LCP scores.
Beyond SEO, page speed directly affects conversion rates. Amazon reported that every 100ms of additional load time cost them 1% in sales. For e-commerce sites, blogs, and any website that depends on visitor engagement, compressing images is one of the fastest and easiest ways to improve performance without any redesign.
Image compression also reduces hosting bandwidth costs, speeds up content delivery networks (CDNs), improves performance on mobile data connections, and reduces storage costs when serving large image libraries.
Understanding Image Compression: Lossy vs Lossless
There are two fundamentally different types of image compression:
Lossy compression permanently removes some image data to achieve smaller file sizes. JPEG compression is lossy - at lower quality settings, fine details, sharp edges, and subtle colour gradients are slightly blurred or simplified. This is usually invisible at quality settings above 70, but becomes noticeable at quality settings below 50. Lossy compression achieves the largest file size reductions, often 60-80%, making it the standard choice for photographs and images with many colours and gradients.
Lossless compression reduces file size without removing any image data. Every pixel is preserved exactly. PNG files use lossless compression - the file can be decompressed back to the exact original pixel values. This is essential for images with text, sharp lines, logos, icons, and graphics where any pixel loss would be visible or unacceptable. Lossless compression typically achieves 10-30% file size reduction.
When using this compressor, JPEG output is lossy and PNG output is lossless. Choosing "convert to WebP" allows modern browsers to receive smaller files since WebP achieves better compression than both JPEG and PNG at equivalent quality levels.
What Quality Setting Should I Use?
The optimal quality setting depends on how the image will be used:
Quality 80-90 - for hero images, product photos, portfolio images, and any image where visual quality is a primary concern. Produces files 30-50% smaller than the original with virtually no visible quality loss.
Quality 65-80 - the sweet spot for most web images. Blog post images, thumbnails, banner ads, and general web content look excellent at this range. Files are typically 50-70% smaller than originals.
Quality 50-65 - for thumbnails, background images, and non-critical imagery where maximum performance matters more than perfect quality. Noticeable quality reduction may appear in complex images at the lower end of this range.
Quality below 50 - for very small thumbnails, icon-level imagery, or cases where file size is the overriding concern. Quality loss becomes clearly visible at these settings.
A good practical approach: start at quality 80 and reduce gradually until you see visible quality loss in the preview, then go back one step. That gives you the smallest file size with acceptable quality for your specific image.
Image Compression for Social Media
Social media platforms automatically compress images when you upload them, which can result in blurry or degraded-looking posts. To maximise quality on social platforms, compress your images to an appropriate size before uploading so the platform's own compression algorithm has less work to do and applies less aggressive compression.
For Instagram, compress JPEG images to under 1MB before uploading and use the 4:5 aspect ratio (portrait orientation) for feed posts. For Twitter/X, images under 5MB are uploaded without significant quality loss. For Facebook, images under 100KB are sometimes shown in higher quality. For LinkedIn, keep images under 5MB. For WhatsApp, compressing images to 200KB or less before sending prevents the app from applying heavy compression that degrades quality.
Platform-Specific Image Optimization Guides
Different platforms and CMSs have different optimal image size and quality requirements. Here is how to compress images for specific platforms:
WordPress - compress images to quality 75-80 before uploading to Media Library. WordPress creates thumbnail versions automatically, so starting with well-compressed originals reduces storage and improves performance. For featured images that display prominently on post listings, use quality 80-85. For full-width hero images, keep file size under 200KB while maintaining at least 1920px width. Install a lazy loading plugin to defer off-screen image loading.
Shopify - product images should be compressed to under 300KB per image while maintaining clarity at 2048px width (Shopify's maximum display size). Use quality 80 for main product images and 70-75 for secondary images. Compress all variant images before uploading. Shopify's CDN serves images quickly, but smaller files still improve Largest Contentful Paint (LCP) scores. Use WebP for further optimization - Shopify supports WebP and automatically serves it to compatible browsers when available.
Squarespace - compress images to quality 75-80 before upload. Squarespace automatically resizes images to maximum 1500px width for standard content blocks and 2500px for full-bleed sections, but does not compress aggressively, so uploading pre-compressed images improves page speed significantly. Keep individual images under 500KB. For background images, compress to 200-300KB.
Wix - compress to quality 70-75 before uploading. Wix applies its own optimization, but starting with smaller files reduces storage usage and initial upload time. For hero images and full-width sections, aim for under 300KB. For in-content images, under 100KB is ideal. Wix converts uploaded images to WebP automatically for compatible browsers.
E-commerce platforms (WooCommerce, BigCommerce, Magento) - product images are critical for conversion. Compress to quality 80-85 to balance quality and load speed. Aim for 200-400KB per product image. Use consistent dimensions for all product images (for example, 1200×1200px for square products) so the site layout is consistent. Compress all zoom images and gallery images to under 500KB each.
Batch Compression Workflows for Large Image Libraries
If you have hundreds or thousands of images to compress (for example, migrating a photography website, optimizing an e-commerce catalog, or preparing an image archive), batch compression workflows save time:
Desktop tools for batch compression: Use Adobe Lightroom's export function with quality presets, XnConvert (free, cross-platform batch converter), ImageMagick command-line tool, or Squoosh CLI for automated compression of entire folders. These tools can process hundreds of images with consistent quality settings.
Cloud services for batch compression: TinyPNG, Compressor.io, and Kraken.io offer bulk compression - upload multiple images at once and download a ZIP of compressed versions. Many services have API access for automated workflows.
WordPress plugins for automated compression: Smush, ShortPixel, EWWW Image Optimizer, and Imagify automatically compress images on upload and can bulk-optimize all existing Media Library images. These plugins run compression server-side or via API, handling thousands of images without manual intervention.
Build-time compression for static sites: For Gatsby, Next.js, Hugo, or Jekyll sites, use build plugins (next-optimized-images, gatsby-plugin-image, hugo-imaging) to automatically compress and optimize images at build time. Source images remain high-quality in your repository, and optimized versions are generated for production deployment.
File Size Benchmarks by Image Type and Use Case
Here are realistic file size targets for various image types after compression, based on industry best practices:
Hero images (full-width banner images on websites) - Target: 150-300KB at 1920×1080px or 2560×1440px. Use quality 80-85. Hero images are the largest elements on most pages and directly impact Largest Contentful Paint, so aggressive optimization here yields measurable performance gains.
Blog post featured images - Target: 80-150KB at 1200×630px (the standard Open Graph size for social sharing). Use quality 75-80. These images appear in post listings and social media previews, so balancing quality and size is important.
Product photos (e-commerce) - Target: 150-300KB at 1000×1000px to 1200×1200px. Use quality 80-85. Product images must be clear enough for customers to see details, but small enough for fast gallery browsing. Compress main images less aggressively, thumbnails more aggressively (50-80KB).
Image gallery thumbnails - Target: 30-60KB at 300×300px to 400×400px. Use quality 65-75. Thumbnails are displayed small, so lower quality is acceptable. Optimizing thumbnails reduces total page weight when galleries display dozens of images.
User-generated content (profile pictures, uploaded photos) - Target: 100-200KB at 800×800px to 1000×1000px. Use quality 70-75. UGC accumulates quickly and can balloon storage costs, so aggressive compression prevents database and storage bloat.
Email newsletter images - Target: 50-100KB at 600px width maximum (most email clients display images at 600px width or less). Use quality 70-75. Email load times are critical for engagement, and many users view email on slower mobile connections.
Social media images - Instagram: under 1MB at 1080×1080px (square), 1080×1350px (portrait), or 1080×1920px (stories). Facebook/Twitter/LinkedIn: under 500KB at 1200×630px. Use quality 75-80. Platforms apply their own compression, so pre-compressing prevents double-compression artifacts.
Common Image Compression Mistakes to Avoid
Understanding common pitfalls helps you achieve optimal results:
Mistake 1: Compressing already-compressed images - repeatedly compressing and re-saving the same JPEG image causes cumulative quality degradation. Each save applies lossy compression again, gradually destroying fine details. Workflow: keep an original uncompressed master file (PNG or high-quality JPEG at 95-100%), and only compress copies for web delivery. Never edit and re-save lossy JPEGs repeatedly.
Mistake 2: Using the same quality setting for all images - different images need different quality levels. A photograph can tolerate quality 75 and still look excellent. A screenshot with text needs quality 85-90 or PNG lossless to keep text readable. A hero image needs quality 80-85. A thumbnail can use quality 60-70. Assess each image individually or by category.
Mistake 3: Compressing graphics and logos to JPEG - logos, icons, diagrams, and graphics with sharp edges and solid colours look terrible when compressed to JPEG even at quality 90. These should be PNG (lossless) or SVG (vector). JPEG compression creates visible halos and colour banding around sharp edges.
Mistake 4: Ignoring image dimensions - compressing a 5000×3500px image to 200KB and then displaying it at 800px wide on a webpage is inefficient. Resize the image to the actual display size first (for example, 1600px wide for a 2x retina display), then compress. A 1600px image at quality 80 will be smaller and sharper than a down-scaled 5000px image at quality 60.
Mistake 5: Not testing on real devices - an image that looks perfect on a desktop monitor may show compression artefacts when viewed on a high-DPI mobile screen or printed. Test compressed images on multiple devices and zoom levels before finalizing quality settings. The live preview in this tool helps, but real-world testing is always the final validation.
Technical Deep Dive - JPEG Compression Algorithm
Understanding how JPEG compression works at a technical level explains why certain images compress well and others do not:
Step 1: Colour space conversion - RGB pixel data is converted to YCbCr (luminance + chrominance). Human eyes are more sensitive to brightness than colour detail, so chroma channels (colour) can be subsampled (4:2:0 - half resolution) without visible loss, instantly reducing data by 50%.
Step 2: Block division - the image is divided into 8×8 pixel blocks, each processed independently.
Step 3: DCT (Discrete Cosine Transform) - each block is transformed from spatial domain to frequency domain. Low frequencies represent smooth gradients, high frequencies represent fine detail and edges. This transformation concentrates most image information into a few low-frequency coefficients.
Step 4: Quantization (lossy step) - frequency coefficients are divided by a quantization matrix (controlled by the quality setting) and rounded to integers. Lower quality means more aggressive rounding, discarding more high-frequency detail. This is where the "lossy" loss happens - fine details are simplified or removed. High frequencies (fine texture, sharp edges) are quantized more than low frequencies (smooth areas) because human vision is less sensitive to high-frequency loss.
Step 5: Entropy encoding - the quantized values are run-length encoded (representing long sequences of zeros efficiently) and Huffman coded to produce the final compressed bitstream. This step is lossless.
This process explains why photographs (which have smooth gradients and few sharp edges) compress very efficiently, while graphics with text and sharp lines (which produce strong high-frequency components that are heavily quantized) compress poorly and show visible artefacts.
Learn More About Image Compression
For more information about image compression algorithms and web performance:
- Google PageSpeed - Optimize Images - Official Google documentation on image optimization best practices for web performance
- MDN - Image File Types and Formats - Comprehensive guide to web image formats, compression methods, and use cases