DEV Community: Suman Biswas

How Image Compression Works: Reducing File Size Without Sacrificing Too Much Quality

Suman Biswas — Sat, 10 Oct 2026 19:51:40 +0000

Images are essential to modern websites, but large image files can significantly affect page loading speed, bandwidth usage, and user experience. Understanding image compression helps developers build faster and more efficient websites.

In this article, we'll explore how image compression works, the difference between lossy and lossless compression, and how to choose the right approach for your project.

What Is Image Compression?

Image compression is the process of reducing an image's file size by representing its visual information more efficiently.

For example, a 5 MB image might be reduced to 800 KB, making it faster to upload, download, and display on a website. The actual reduction depends on the image, its format, and the compression settings.

Lossy vs. Lossless Compression

There are two main types of image compression.

Lossy Compression

Lossy compression reduces file size by removing some image information that may be less noticeable to the human eye.

JPEG is a common example. WebP and AVIF also support lossy compression.

Best for: Photographs, banners, and other images where smaller file sizes are important.

The disadvantage is that repeatedly compressing an image can introduce visible artifacts and reduce quality.

Lossless Compression

Lossless compression reduces file size without permanently removing image information. The original image can be reconstructed exactly from the compressed data.

PNG commonly uses lossless compression, making it useful for screenshots, diagrams, and graphics that need sharp edges or transparency.

Best for: Logos, interface assets, screenshots, and images where preserving exact pixel information matters.

Choosing the Right Image Format

The best format depends on the type of image and how it will be used.

JPEG: Suitable for photographs and widely supported.
PNG: Useful for transparency, screenshots, and lossless image storage.
WebP: Supports lossy and lossless compression, as well as transparency.
AVIF: Can offer excellent compression efficiency, although encoding cost and compatibility requirements should be considered.

For most modern websites, WebP or AVIF can be useful options, but there isn't one format that is best for every image.

How to Compress Images Effectively

Follow these practical steps:

Choose an appropriate image format.
Resize the image to match its actual display dimensions.
Adjust the quality setting when using lossy compression.
Compare the compressed image with the original.
Use responsive images to serve appropriately sized files to different devices.

Remember that resizing and compression are different operations. Resizing changes the image dimensions, while compression changes how efficiently the image data is stored.

Why Image Compression Matters for SEO

Large images can increase page weight and slow down loading, particularly on mobile networks. Optimizing images can help improve loading performance and contribute to a better user experience.

However, image compression alone does not guarantee higher search rankings. Overall page performance, useful content, accessibility, and other technical factors also matter.

Conclusion

Image compression is a practical optimization technique for anyone building websites. By choosing the right format, resizing images appropriately, and balancing file size with visual quality, developers can improve performance without unnecessarily compromising image appearance.

If you need a simple way to reduce image file sizes, you can also try Toolbantu, which provides free online utilities, including an image compressor.

What image format do you usually prefer for websites: JPEG, PNG, WebP, or AVIF?

I Built a Website Full of Free Developer Tools — Here’s What I Learned

Suman Biswas — Sun, 04 Oct 2026 21:08:06 +0000

I Built a Website Full of Free Developer Tools — Here’s What I Learned

I’ve always liked small tools.

A QR generator.
An image compressor.
A file converter.
A color picker.

Individually, these tools solve tiny problems. But when you need one of them, you usually end up searching Google, opening multiple websites, dealing with annoying pop-ups, or wondering whether your files are being uploaded somewhere.

So I decided to build something of my own.

Meet Toolbantu

I’m building Toolbantu, a collection of simple, free online tools designed to solve everyday problems quickly.

The idea is simple:

Open the tool → do the task → get the result.

No complicated setup. No unnecessary features.

Some of the tools include image-related utilities, converters, QR tools, and other small productivity tools.

Why did I build it?

Honestly, I wanted to see how far I could take a simple idea.

Instead of only building tutorials and small experiments, I wanted to create something that people could actually use.

That meant thinking about more than just writing code.

I had to think about:

UI/UX
Performance
Mobile responsiveness
SEO
Accessibility
Page structure
Search intent
Deployment
Indexing
Analytics
Backlinks
And, of course, fixing things that break at 2 AM 😅

The interesting part wasn't writing the code

The biggest lesson I've learned is that building a website and building a useful product are two different things.

You can write clean code and still have nobody use your website.

You can have a beautiful UI and still have terrible SEO.

You can get traffic and still have users leave immediately.

So I've started looking at every tool from the user's perspective:

What problem does this solve?

Why would someone search for it?

Can they understand the tool immediately?

Can they complete their task in a few seconds?

These questions have changed how I build things.

I'm also learning SEO along the way

One of the most interesting parts of this project has been learning how search engines discover and understand websites.

I've been working on things like:

Individual landing pages for tools
Better titles and descriptions
Structured URLs
Sitemap optimization
Internal linking
Search-focused content
Backlinks
Performance improvements

And I've learned something important:

SEO isn't just about adding keywords.

It's about making a genuinely useful page that matches what someone is looking for.

What's next?

Toolbantu is still a work in progress.

I'm planning to keep adding useful tools, improving existing ones, and experimenting with different ways to make the website faster and easier to use.

I'm also documenting the journey because I think there's something valuable about showing the process—not just the final result.

Maybe Toolbantu becomes a big project.

Maybe it stays a small collection of useful utilities.

Either way, I'm learning a lot by building it.

And that's the main reason I started.

If you're interested, you can check out Toolbantu here:

Toolbantu

I'd love to hear what developers think: What's one tiny online tool you use regularly that you wish was better?