What is Compression Ratio?

Compression Ratio is the ratio of the size of the source data to the size of the compressed data.

Formula:

Compression Ratio = original size / compressed size

Example:

1. Source file: 100 KB
2. After compression: 20 KB
3. Compression ratio = 100/20 = 5:1 (or just 5)

The higher the coefficient, the stronger the compression and the less data is transmitted over the network.

HTTP compression (Gzip, Brotli, Deflate)

The server compresses text files (HTML, CSS, JS, JSON) before sending them to the client.

Example of an HTTP response header

Content-Encoding: gzip

Image compression (WebP, AVIF, JPEG XL)

Image formats use compression algorithms:

1. Lossless (Lossless) — PNG, WebP (in lossless mode)
2. Lossy (lossy) — JPEG, WebP, AVIF

Example:

The original PNG: 500 KB → Compressed WebP: 100 KB (CR = 5:1)

Video and audio (H.265, Opus, AAC)

Video codecs (for example, H.265) can provide a compression ratio of 10:1 or higher compared to uncompressed video.

Databases and API responses

1. API JSON responses can be compressed via gzip/brotli
2. Some **NoSQL databases (e.g. MongoDB) support on-the-fly data compression

Compression algorithms

How do I enable compression on the server?

nginx

gzip on;
gzip_types text/html text/css application/javascript;
gzip_min_length 256;
gzip_comp_level 6;  # Compression level (1-9)

Node.js (Express)

const compression = require('compression');
app.use(compression({ level: 6 })); // Gzip compression level

Practical example: Gzip vs Brotli comparison

Let’s say we have a bundle file.js size 1MB

Conclusion: Brotli gives better compression, but requires more CPU

How do I measure the Compression Ratio?

Chrome DevTools

1. Open the Network tab.
2. Find the file (for example, .js, .css).
3. Look at the headers:
   • Content-Length (compressed size)
   • X-Original-Size (if the server sends it)

Audit tools

1. Lighthouse (“Performance” tab)
2. WebPageTest (shows traffic savings)

Optimization of compression in web projects

✅ Use Brotli for static files (better compression)

✅ Gzip — for dynamic content (faster)

✅Optimize images (WebP/AVI + sharp in Node.js)

✅Minify JS/CSS (Terser, CSSNano) before compressing

✅Configure caching (Cache-Control + CDN)

An example of Vue optimization.js of the project

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    // Basic version (Gzip)
    viteCompression(),
    
    // Or an advanced setup for Brotli + Gzip
    viteCompression({
      algorithm: 'brotliCompress', // 'gzip' by default
      ext: '.br', // Extension for Brotli
      threshold: 10240, // Minimum file size (in bytes)
      verbose: true, // Log the process
      deleteOriginFile: false, // Delete original files after compression
      filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // Which files should I compress
    }),
    viteCompression({ algorithm: 'gzip' }), // Duplicating for Gzip
  ],
  build: {
    // Additional Build Settings
    chunkSizeWarningLimit: 1600, // Increasing the limit for chunks
  },
});

Output

Compression Ratio is a key indicator of the effectiveness of data compression on the web.

Proper compression speeds up website loading and reduces traffic costs.

1. A good coefficient for text: 5:1 – 10:1 (Brotli)
2. For images: 3:1 – 20:1 (** WebP/AVIF**)
3. For video: 10:1 – 100:1 (H.265)