Last updated
Minification vs. Compression
- Minification: removes unnecessary characters from source code (done once at build time)
- Gzip/Brotli compression: compresses the file for transfer (done by the server on each request)
- Both should be used together — they are complementary, not alternatives
- Minification reduces the size of the file on disk and in the browser cache
- Compression reduces the size of the file during network transfer
- A minified file compresses better than an unminified file
The CSS Minifier on TechConverter.me processes stylesheets instantly with detailed compression statistics. Paste your CSS and get production-ready minified output in seconds — no build pipeline required.
Examples
Example 1: Basic Minification
/* BEFORE — 398 bytes */
/* Navigation styles */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
.nav-link {
color: #374151;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
transition: background-color 0.15s ease;
}
.nav-link:hover {
background-color: #f3f4f6;
color: #111827;
}
/* AFTER — 196 bytes (51% reduction) */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:#fff;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;padding:.5rem .75rem;border-radius:.375rem;transition:background-color .15s ease}.nav-link:hover{background-color:#f3f4f6;color:#111827}
Example 2: Optimizations Applied
/* Color shortening */
#ffffff → #fff
#000000 → #000
#ff0000 → red
#aabbcc → #abc
/* Zero unit removal */
0px → 0
0rem → 0
0% → 0
/* Leading zero removal */
0.5rem → .5rem
0.15s → .15s
/* Semicolon removal */
.el { color: red; } → .el{color:red}
/* (last semicolon before } is optional) */
/* Whitespace removal */
margin: 0 auto; → margin:0 auto;
rgba(0, 0, 0, 0.1) → rgba(0,0,0,.1)
Example 3: Shorthand Property Optimization
/* BEFORE */
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}
/* AFTER */
.box{margin:10px 20px;padding:8px 16px}
/* 4 margin props → 1, 4 padding props → 1 */