An oversized image slows down your site, clogs an inbox and drives away impatient visitors. The good news: you can often cut a visual's file size by a factor of five or ten without the eye noticing the slightest difference. In this guide, you'll find the complete method we use at TC Automation, with the formats to favor, the settings that make the difference, real-world examples for small businesses and the mistakes that cost dearly in both speed and search ranking.
Why the weight of your images really matters
On a website, images account for the bulk of a page's weight. A 4 MB visual straight out of a smartphone has no business online: it stretches the load time, hurts your search ranking (Google factors speed into its rankings) and eats up the data plan of your mobile visitors. On the email side, most inboxes cap attachments at 20 or 25 MB, and a signature or newsletter that's too heavy sometimes ends up in spam.
The topic goes well beyond visual comfort. A load that drags on means a visitor who gives up before even seeing your offer, a cart abandoned on mobile, a prospect who judges your company "slow" before exchanging a single word with you. Images also weigh directly on your technical metrics: if the subject interests you, our article on Core Web Vitals explains how an unoptimized visual drags down the well-known "Largest Contentful Paint," one of the criteria Google watches closely.
The goal isn't to compress as much as possible, but to find the sweet spot: the lowest file size at which the degradation stays invisible on screen. This is what's known as "visually lossless" compression.
A business issue, not just a technical one
For a small business, every second of load time saved improves the experience and the conversion rate. Lightening your images is one of the most cost-effective optimizations: a few minutes of work per batch of visuals, for a speed gain your visitors feel immediately.
Lossless vs. lossy compression: what are we talking about
There are two broad families of compression, and you need to tell them apart to make the right choices.
- Lossless compression: no data is removed, the reconstructed image is identical down to the pixel. This is PNG, or the lossless mode of WebP. Modest file-size savings.
- Lossy compression: the algorithm discards information the eye perceives poorly (color nuances, fine detail). This is JPEG. Massive file-size savings, but quality that drops if you push too far.
- Visually lossless compression: a lossy setting gentle enough that no difference is perceptible at normal display size. This is the best compromise for the web.
The key word: perceptible
"No visible loss" doesn't mean "no technical loss." We accept a loss of data invisible to the eye in exchange for a much lighter file. It's perfectly suited to a screen, less so to large-format printing where every detail counts.
In concrete terms, on a screen the human eye can't tell a photo saved at 100% quality from the same photo at 82% quality, even though the file may have lost half its weight. The whole subtlety lies in stopping just before the threshold where the flaws (the notorious "artifacts") start to show in sensitive areas.
Choosing the right format for the job
The choice of format often does more for the final weight than the compression rate itself. Here are the essential guidelines.
| Format | Ideal for | Strengths | Avoid for |
|---|---|---|---|
| JPEG | Photos, color-rich visuals | Excellent size-to-quality ratio | Logos, text, transparency |
| PNG | Logos, screenshots, transparency | Lossless, transparent background | Photos (very heavy files) |
| WebP | Modern web (photos and graphics) | Noticeably lighter than JPEG/PNG | Old desktop software |
| AVIF | Recent web, detailed photos | Compression even better than WebP | Older-browser compatibility |
| SVG | Logos, icons, vector illustrations | Tiny weight, infinite quality | Photographs |
In practice: a photo goes out as JPEG or WebP, a logo as PNG or SVG. WebP is now recognized by every recent browser and should be your default choice for a modern site. Keep PNG when you need clean transparency. To dig deeper into the choice, our comparison WebP, JPG, PNG, AVIF: which image format to choose breaks down the trade-offs format by format.
WebP by default, JPEG as a fallback
On a modern site, serve your photos in WebP and provide a JPEG fallback for the rare older browsers. Most CMS platforms and plugins handle this switch automatically, with no action required on your part.
The 5-step method
Here is the concrete process we follow to prepare a batch of images intended for a website or an email campaign.
- 1Resize first. There's no point loading a 6,000 px wide image if it displays at 1,200 px. Reducing the dimensions to the actual display size cuts the weight before any compression at all. Our guide on resizing an image to the right dimensions gives the width benchmarks for each use case.
- 2Choose the format suited to the use (JPEG/WebP for photos, PNG/SVG for graphics).
- 3Compress aiming for a JPEG quality around 75 to 85%: this is the zone where the loss stays invisible while sharply lightening the file.
- 4Compare before/after at 100% on screen, looking at the sensitive areas (sky, gradients, text edges).
- 5Check the final weight. For the web, ideally aim for under 200 KB per image, and never more than a few hundred KB except in special cases.
The setting that changes everything
If you were to remember just one action: resize your images to their actual display size before compressing them. It's the most effective lever and the one most often overlooked.
How to spot the areas that give away over-compression
Not every area of an image reacts the same way to compression. Flat blocks of solid color and soft gradients (a sky, a painted wall, a studio backdrop) are the first to reveal flaws: blotches, banding or a "pixelated" effect. Sharp edges between two contrasting colors (the edge of text, the outline of a logo over a photo) bring out small halos. When you compare before and after, focus your attention on these specific areas rather than on the image as a whole.
The best compression is the one no one notices: a file half the size, an image that looks untouched.
Compressing an image in practice
No need for expensive software or technical skills. An online tool does the job in a few seconds, right in the browser, without installing anything.
Compress your images online
Reduce the weight of your JPEG, PNG and WebP photos with no visible loss, right in your browser. Your files never leave your computer.
Upload your image, adjust the quality slider, compare the result and download. For a batch of images, process them one by one while keeping the same quality setting, so you get a consistent look across your whole site or newsletter.
Your files stay with you
A good online compressor processes the image directly in the browser, without sending it to a remote server. Your confidential visuals (scanned contracts, internal photos, mockups) never leave your computer, an important point for the privacy of your data.
Real-world cases for a small business
A brochure site or an e-commerce store
Every product page, every banner and every team photo should be resized then compressed before publishing. A catalog of 50 products with 3 MB images is 150 MB to load; the same ones at 150 KB come to 7.5 MB. The difference is felt immediately in speed and browsing comfort. For a tradesperson or shopkeeper who manages their own site, it's often the move that unblocks a page that had become painful to display on mobile. This work is part of a broader approach covered in optimizing your images for the web.
An email campaign or a newsletter
The visuals in an email need to stay light so they don't trigger spam filters or keep the recipient waiting. Aim for under 100 KB per image and a reasonable total message size. An email signature with a logo should weigh a few kilobytes, no more. A business owner who sends a commercial offer with three uncompressed photos runs the risk that the message arrives slowly, truncated, or straight in the junk folder.
A document to send
For an attachment or a PDF file containing photos, compressing the images beforehand avoids exceeding inbox size limits and speeds up both sending and receiving. If it's the PDF itself that's too heavy, the logic is the same on the document side: our guide on compressing a PDF without losing quality applies the same principles to your files and quotes.
Never compress twice
Recompressing an already-compressed JPEG degrades the image further (artifacts, flat color blocks). Always start from the highest-quality original file, and keep that original aside. A well-organized "sources" folder will save you from starting over from an already-damaged version.
Mistakes to avoid
- Publishing an image at full camera resolution without resizing it.
- Using a PNG for a photo: the file can be 5 to 10 times heavier than an equivalent JPEG.
- Pushing JPEG quality down to 40 or 50% to save a few KB: the artifacts become visible.
- Compressing then re-compressing the same file several times.
- Renaming a file with the wrong extension (for example manually changing a HEIC to .jpg) instead of actually converting it.
- Forgetting to fill in the alternative text attribute: compression lightens, but accessibility and SEO run through it too.
The last mistake deserves a clarification. The alternative text (the "alt" attribute) describes the image for search engines and for people using a screen reader. Compressing your visuals improves speed, but good image SEO combines controlled weight, an explicit file name and relevant alternative text. The three go hand in hand.
What criteria to use when choosing a compression tool
Not all compressors are equal. Before adopting a solution, check a few simple points that make the difference day to day.
- Local processing: is the image processed in the browser, without being sent to a server? That's the best guarantee of privacy.
- Before/after preview: can you compare the result and adjust the quality before downloading?
- Supported formats: does the tool accept JPEG, PNG and WebP, both as input and output?
- No watermark and no absurd limit: a good free tool doesn't stamp your images or throttle file size excessively.
- Speed: processing should be almost instant, even for an image of several megabytes.
One tool, one use case
For a one-off need, an online tool is more than enough. For hundreds of images to process regularly (catalog, media library, production pipeline), it becomes worthwhile to automate the compression so it happens on its own, as items are added.
Frequently asked questions
How do I compress an image without losing quality?
First resize the image to its actual display size, choose the right format (JPEG or WebP for a photo), then set the quality around 80%. Compare the result before and after on screen, watching the gradients and edges. At this level, the loss stays invisible to the eye while sharply reducing the weight.
Which format should I choose to lighten a photo on a website?
WebP is the best choice for a modern site: it's lighter than JPEG at equivalent quality and recognized by every recent browser. JPEG remains a safe, universal bet. Reserve PNG for logos and images that need transparency.
How much should an image weigh for the web?
Ideally aim for under 200 KB per image, and often far less for a thumbnail or a secondary photo. For an email, stay under 100 KB per visual. These benchmarks guarantee fast loading with no visible degradation.
Why is my image blurry after compression?
Blur or flaws appear when you push the quality too low (below 60 to 70%) or when you recompress an already-compressed file. Start over from the high-quality original and raise the slider until the flaws disappear.
Does image compression affect search ranking?
Yes, indirectly but clearly. Light images speed up loading, a criterion Google takes into account. On top of that, a clear file name and descriptive alternative text strengthen the search ranking of your visuals.
In summary
Compressing an image with no visible loss is nothing tricky: resize to the display size, choose the right format (JPEG or WebP for photos, PNG or SVG for graphics), set the quality around 80% and compare the result before confirming. In a few seconds per image, you get files 5 to 10 times lighter, a faster site and emails that go through without a hitch. Always keep your originals aside and never compress the same file twice.
At TC Automation, we build this image hygiene into every web project we deliver, and we're happy to automate the processing of your visual batches so compression happens without a second thought. If the weight of your images is slowing down your online presence, let's talk: we'll help you set up a simple, lasting pipeline.
