Most websites are slower than they need to be because of one simple problem: the images are too large. A single uncompressed photo from a phone can be 5 MB or more. Add ten of those to a page and you are asking visitors to download 50 MB before they can even read the content. On a mobile connection, that is a recipe for people leaving before the page finishes loading.
The fix is straightforward. Compress your images before you upload them. Compression reduces the file size without necessarily changing the pixel dimensions. A 5 MB JPG compressed to 80% quality often drops to 1 MB or less. The visual difference is usually invisible. The page loads faster. Your visitors stay. Your search rankings improve.
This article explains what image compression actually is, how to do it without ruining quality, and why it matters for everything from website speed to email attachments. If you want to skip the reading and just compress something, use the ResizeLab image compressor. It runs in your browser, so nothing uploads to a server.
Quick answer: how to compress an image without losing quality
- Open your image in a compression tool
- Set the quality slider to 75–85% for JPG or WebP
- Keep PNG at 100% if you need lossless quality
- Compare before and after to check for visible artifacts
- Download the compressed file
What is image compression?
Image compression is the process of reducing the amount of data an image file uses. The goal is to make the file smaller while keeping the image looking the same — or close enough that nobody notices the difference.
There are two types of compression, and understanding the difference matters because it affects which format you choose and what quality settings you use.
Lossy compression
Lossy compression permanently removes some image data. The algorithm looks at the image, decides which details the human eye is least likely to notice, and discards them. The result is a much smaller file, but the original image can never be perfectly reconstructed.
JPG uses lossy compression. So does WebP when you choose lossy mode. The key with lossy formats is finding the quality setting where the file is small enough but the image still looks good. For most photos, that sweet spot is between 75 and 85% quality.
Below 70% quality, you start seeing compression artifacts. These look like blocky patches, blurry edges, or color banding in smooth gradients like skies. Above 90% quality, the file size savings become marginal. You might cut a 5 MB image to 4.5 MB, which is not worth the effort. The 75–85% range is where you get the best trade-off.
Lossless compression
Lossless compression reorganizes the image data without removing any of it. The file gets smaller, but when you open it, every pixel is exactly the same as the original. PNG uses lossless compression. So does WebP in lossless mode.
Lossless formats are essential for images with text, sharp edges, or transparency. A screenshot of a website, a logo, or a graphic with thin lines will look terrible if you compress it with JPG because the lossy algorithm destroys the crisp edges. PNG keeps them perfect.
The downside is that lossless files are larger than lossy ones. A PNG screenshot might be 800 KB while a JPG of the same dimensions at 80% quality is 200 KB. That is why you should not use PNG for photographs. Use PNG for graphics, screenshots, and anything with transparency. Use JPG or WebP for photos and complex images.
Best image formats for websites
Not all formats compress equally. Choosing the right one is half the battle.
JPG
JPG is the universal photo format. It works everywhere. Every browser, every email client, every social platform, every CMS supports it. It compresses photos well with lossy compression. The problem is that it does not support transparency, and it struggles with sharp edges and text. If you save a screenshot as JPG, the text will look fuzzy. If you save a photo with a logo on it as JPG, the logo edges will blur slightly.
Use JPG for: photographs, product images, artwork, any complex image without transparency or text.
PNG
PNG is lossless, supports transparency, and preserves sharp edges perfectly. It is the right choice for logos, icons, screenshots, diagrams, and any image where text needs to be readable. The file sizes are larger than JPG, but the quality is perfect. You can re-save a PNG a hundred times and it never degrades.
Use PNG for: logos, screenshots, graphics with text, images needing transparency, any image where perfect quality is required.
WebP
WebP is the modern replacement for both JPG and PNG. It can do lossy compression for photos, lossless compression for graphics, and it supports transparency. A WebP file at 80% quality is typically 25–35% smaller than the equivalent JPG. A WebP lossless file is smaller than PNG too.
WebP is supported by all major browsers. The only holdouts are very old email clients and some enterprise software. For websites, WebP is the best choice. For maximum compatibility, you can serve WebP to modern browsers and fall back to JPG for older ones.
Use WebP for: everything on a website. It is the best all-around format for the web.
Compression vs resizing
People often confuse compression with resizing. They are different tools for different problems.
Compression changes how much data each pixel uses. The image stays the same width and height. A 4000×3000 photo compressed from 5 MB to 1 MB is still 4000×3000 pixels. It just uses less storage per pixel. This is what you want when the image is already the right size for your page but the file is too large.
Resizing changes the pixel dimensions. A 4000×3000 image resized to 1200×900 is physically smaller. It will display smaller on screen and the file will be much smaller too. But if the image needs to be 4000 pixels wide for a full-screen hero banner, resizing would make it blurry.
When to use each:
- Use compression when the image is already the right size but the file is too large. This is the most common case for websites. You upload a photo at 1200×800 and the file is 3 MB. Compress it to 300 KB and the page loads instantly.
- Use resizing when the image is too big in pixels. You upload a 6000×4000 photo from your camera and only need it at 800×530 for a blog post. Resize first, then compress. The combination of resizing and compression gives you the smallest possible file without visible quality loss.
- Use both when you need a small image at a specific size. Resize to the target dimensions, then compress to the target quality. The ResizeLab image resizer can do both in one step.
Why image size affects SEO
Google has been measuring page speed as a ranking factor since 2010. In 2021, they introduced Core Web Vitals, which are three specific metrics that measure how fast a page feels to real users. One of those three metrics is directly affected by image size.
Core Web Vitals in plain terms
Core Web Vitals are three scores Google uses to judge whether a page provides a good user experience. They are measured by real Chrome users and reported in Google Search Console.
Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on the page to load. For most pages, that element is an image. A hero banner, a product photo, or a featured image. If that image is 4 MB, LCP will be slow. If it is 400 KB, LCP will be fast. A good LCP score is under 2.5 seconds. A poor score is over 4 seconds. Large images are the single biggest cause of poor LCP scores.
First Input Delay (FID) measures how long the page takes to respond when a user clicks or taps. This is mostly about JavaScript, not images. Compression does not directly affect FID, but it does help because the browser has less data to process while loading.
Cumulative Layout Shift (CLS) measures how much the page layout jumps around as it loads. This is about image dimensions being set in the HTML. If you have an image with no width and height attributes, the browser does not know how much space to reserve. When the image loads, it pushes content down. The fix is simple: always specify width and height attributes in your HTML. Compression does not affect CLS, but it does help the image load faster so the layout settles sooner.
Improving LCP by compressing images is the fastest way to improve your Core Web Vitals score. It is easier than rewriting JavaScript, restructuring CSS, or switching hosting providers. A few minutes of compression work can cut seconds off your LCP time.
Mobile loading speed
Mobile connections are slower than WiFi. A 4G connection might give you 10–20 Mbps in good conditions. That is about 1.5 MB per second. A 5 MB image takes 3–5 seconds to load on 4G. A 1 MB image takes under a second. On 3G or congested networks, the difference is even more dramatic.
Mobile users are also less patient. If a page takes more than 3 seconds to load, 53% of mobile users abandon it. That is not a made-up number. It is from Google’s own research. Slow pages lose visitors. Lost visitors mean lower engagement, lower conversions, and lower search rankings.
Compressing images is the single most impactful thing you can do to speed up mobile loading. It is faster than any other optimization and requires no technical expertise beyond dragging a file into a tool.
Best quality settings for different formats
Here are the settings that work for most people in most situations. Adjust them based on your specific needs, but these are safe starting points.
- JPG at 80% quality — the default sweet spot. Most photos look identical to the original. File size is typically 60–70% smaller than the original. Good for product photos, blog images, galleries, social media.
- JPG at 60% quality — when you need aggressive compression. Acceptable for thumbnails, previews, and background images where fine detail is not critical. You will see some artifacts on close inspection, but at normal viewing distance it is fine.
- PNG at 100% quality — always use maximum quality for PNG. PNG is lossless, so there is no quality slider in the same sense. The compression algorithm already removes all redundant data without losing anything. Do not try to “compress PNG harder” by reducing quality. That is not how PNG works.
- WebP at 80% quality — the best all-around choice for web. Smaller than JPG at the same quality, supports transparency, and is supported by every modern browser. If your CMS supports WebP, use it for everything.
- WebP at 90% quality — when you need near-perfect quality with maximum compression. The file is still smaller than JPG at 80%, but the quality is indistinguishable from the original for most images.
Common mistakes when compressing images
Even experienced people make these mistakes. Avoiding them saves time and quality.
Compressing the same file multiple times
Every time you save a JPG, it loses more data. If you compress a photo to 80% quality, then open it and compress it again to 80% quality, the result is worse than compressing once at 64% quality. The artifacts compound. Always keep your original uncompressed file as a master copy. Compress a copy, never the original.
Using PNG for everything
PNG is lossless and perfect, so some people use it for every image. This is a mistake. A PNG photo is 3–5 times larger than a JPG at 80% quality. If your page has ten PNG photos, it will be 15 MB instead of 3 MB. Use PNG for graphics and screenshots. Use JPG or WebP for photos.
Not comparing before and after
Some compression tools apply aggressive settings by default. Always look at the compressed image before you use it. Zoom in on fine details, edges, and gradients. If you see blockiness or color banding, raise the quality setting. The ResizeLab compressor shows you the original and compressed file sizes side by side, so you can decide whether the quality trade-off is acceptable.
Ignoring the format
Compressing a PNG to 60% quality does not work the same way as compressing a JPG. PNG compression is lossless. The quality slider does not change the visual quality. It only changes how much CPU effort the algorithm spends finding patterns. For PNG, always use 100% quality. The file is already as small as it can be without losing data. If you need a smaller file, convert PNG to WebP instead.
Compressing after resizing instead of before
If you need to resize and compress, resize first. A smaller image contains fewer pixels, so the compressor has less data to encode. Resizing first usually creates much smaller final files than compressing a huge image and resizing afterward. The ResizeLab image converter handles both steps in one workflow.
Image compression for WordPress and Shopify
Content management systems are where most people encounter the image size problem. You upload a photo to a blog post or product page and the platform serves it as-is. If the file is 5 MB, every visitor downloads 5 MB.
WordPress
WordPress creates multiple sizes of every image you upload: thumbnail, medium, large, and full. The theme chooses which size to display. But the full-size image is still available, and if the theme does not specify sizes correctly, the browser might download the full 5 MB version even when a 300 KB version would suffice.
Most WordPress sites benefit from a two-step approach:
- Compress images before uploading them. Use the ResizeLab compressor to shrink files to 80% quality JPG or WebP.
- Install a plugin that converts images to WebP and serves the right format to each browser. Plugins like WebP Express or ShortPixel handle this automatically.
The combination of pre-compression and server-side format conversion gives you the best results. Your uploaded files are already small, and the WebP versions are even smaller for modern browsers.
Shopify
Shopify automatically compresses images and serves them in multiple sizes. But the automatic compression is not always aggressive enough. A product photo uploaded at 3000×3000 might be served at 2048×2048, which is still much larger than needed for most product pages. The product thumbnail might be 500×500, but the main image is still 2 MB.
Pre-compress your product photos before uploading. 1200×1200 at 80% quality is usually enough for a product detail page. Shopify will still generate the smaller thumbnails automatically. The main image will be under 300 KB instead of 2 MB. On a store with a hundred products, that is a massive difference in page speed.
Compressing images for email and social media
Compression is not just for websites. It matters everywhere you share images.
Email attachments
Most email services limit attachments to 10–25 MB. Gmail is 25 MB. Outlook is 20 MB. Yahoo is 25 MB. A few uncompressed photos from a modern phone can exceed that limit easily. A single iPhone photo at full resolution is 2–5 MB. Five photos and your email bounces.
Compress photos before attaching them. JPG at 80% quality drops a 5 MB photo to 1–1.5 MB. Five compressed photos fit comfortably under any email limit. The recipient sees the same image you intended. The quality difference is invisible on a phone screen or laptop display.
Social media uploads
Every major platform compresses your images automatically. Instagram, Facebook, LinkedIn, X — they all re-encode your uploads to save bandwidth. The problem is that their automatic compression is often worse than what you would choose yourself. They might compress a photo to 60% quality when you would have chosen 80%. They might convert your carefully crafted PNG to a lossy JPG that destroys transparency.
Compress your images before uploading to social media. You control the quality instead of letting the platform decide. A JPG at 75% quality is a good balance for social media. The file is small enough to upload quickly, but the quality is high enough that the platform’s automatic compression does not make it worse. The ResizeLab compressor handles this in seconds.
Compressing images on mobile
You do not need a desktop computer to compress images. Modern browsers handle it fine on phones and tablets.
Open the ResizeLab compressor on your phone, tap the browse button, select photos from your camera roll, and compress them. The tool works on Safari for iPhone and Chrome for Android. The compressed images save directly to your device. You can then attach them to emails, upload them to social media, or send them in messages without the large file size.
This is useful for mobile photographers, social media managers, and anyone who works primarily on their phone. You do not need to transfer files to a computer, open a desktop app, and transfer them back. The entire workflow happens on the device.
Browser-based compression vs cloud tools
Most online image tools work by uploading your file to a remote server, processing it, and sending it back. That means a copy of your image sits on someone else’s computer, even if only for a few seconds. The server has access to your file. The service’s terms of service govern what they can do with it. And if the service has a data breach, your image might be exposed.
Browser-based tools work differently. The image is processed using your device’s own CPU and memory. Nothing uploads. Nothing transmits. The compressed file is created locally and downloaded directly. The server never sees your image. There is no data to breach. There are no terms of service to worry about. Your files never leave your device.
This is particularly important for sensitive images: client work, product photography, ID documents, medical scans, legal documents, or anything you would not normally upload to a third-party cloud service. The ResizeLab compressor is browser-based. Your images stay on your device. The processing happens locally. The only network traffic is the initial page load.
Frequently asked questions
Is image compression free?
Yes. The ResizeLab compressor is free to use. There is no signup, no credit card, and no premium tier. You can compress as many images as you want.
In fact all of our tools are absolutely free, for our full range of image tools check out our HUB
Can I compress images without losing quality?
It depends on the format. PNG compression is lossless, so quality is preserved exactly. JPG and WebP use lossy compression, so some data is removed. At 75–85% quality, the visual difference is usually invisible. The file size drops by 50–70% with no noticeable quality loss. You can compress without losing visible quality. You cannot compress without losing any data. The trade-off is acceptable for almost all use cases.
What is the best image format for websites?
WebP is the best all-around choice for websites. It compresses better than JPG for photos, supports transparency like PNG, and is supported by every major browser. For maximum compatibility with older systems, JPG is still the safest fallback. For graphics with text or transparency, use PNG or WebP.
What is the difference between compression and resizing?
Compression reduces the amount of data per pixel without changing the image dimensions. Resizing changes the pixel dimensions. Use compression when the image is already the right size but the file is too large. Use resizing when the image is too big in pixels. Use both when you need a small image at a specific size. The ResizeLab image resizer handles both in one step.
How much can image compression reduce file size?
Photos in JPG typically shrink by 50–70% at 80% quality. WebP often beats that by another 20–30%. PNG compression reduces file size by 20–50% without any quality loss. Graphics with flat colors and large solid areas compress more than photos with fine detail. The exact reduction depends on the image content and the format.
Can I compress PNG images without losing transparency?
Yes. PNG compression is lossless. Transparency is preserved exactly. The file gets smaller, but every pixel — including transparent ones — stays the same. If you want a smaller transparent file, you can also convert PNG to WebP, which supports transparency and compresses much smaller. The PNG to WebP converter handles this.
Does image compression affect SEO?
Yes, indirectly. Compressed images load faster. Faster pages have better Core Web Vitals scores, particularly Largest Contentful Paint. Google uses Core Web Vitals as a ranking signal. Compressed images also use less bandwidth, which is better for mobile users and for your hosting costs. The SEO benefit is not from the compression itself but from the faster loading times it creates.
Why do my compressed images look blurry?
Either the quality setting is too low, or you are compressing a file that has already been compressed. Every JPG compression removes data. If you compress a photo to 60% quality, then compress the result again to 60% quality, the artifacts compound. Always keep your original uncompressed file. Compress a copy, never the original. If the compressed image looks blurry, raise the quality setting to 80% or higher.
Can I compress images on my phone?
Yes. The ResizeLab compressor works on any modern mobile browser. Open the page, tap browse, select photos from your camera roll, and compress them. The compressed images save directly to your device. Works on Safari for iPhone and Chrome for Android.
Related tools
Image compression is one step in the image workflow. These tools handle the other steps:
- Image Resizer — change dimensions while keeping quality. Resize first, then compress.
- Image Cropper — crop to exact dimensions or aspect ratios. Crop first, then compress.
- Image Converter — convert between JPG, PNG, WebP, AVIF, GIF, and BMP. Convert and compress in one step.
- JPG to WebP — convert and compress in one step. Smaller files, same quality.
- PNG to WebP — keep transparency, shrink file size. Best for web graphics.
- WebP to JPG — for universal compatibility. Convert WebP to the format every system supports.
- JPG to PNG — when you need lossless quality or transparency from a JPG source.
- PNG to JPG — when you need a smaller file and do not need transparency.