SVG Blur Technique Comparison
Compare different blur techniques side by side across all images.
SVG Blur and CSS Blur (Plugin) are both applied
by sqip-plugin-blur at build time — one uses an SVG <feGaussianBlur>
filter, the other a CSS filter: blur() inside the SVG.
CSS Blur (Browser) applies filter: blur() on the
<img> element at display time — notice how it bleeds the image edges.
aaron-burden-151465 2000×1500
No Blur 385 B gz
SVG Blur (sqip-plugin-blur) 512 B gz
CSS Blur (sqip-plugin-blur) 415 B gz
CSS Blur (Browser) 385 B gz
anthony-esau-173126 2000×1500
No Blur 386 B gz
SVG Blur (sqip-plugin-blur) 513 B gz
CSS Blur (sqip-plugin-blur) 415 B gz
CSS Blur (Browser) 386 B gz
aron-visuals-974734 2000×2500
No Blur 391 B gz
SVG Blur (sqip-plugin-blur) 519 B gz
CSS Blur (sqip-plugin-blur) 422 B gz
CSS Blur (Browser) 391 B gz
beach 1024×640
No Blur 389 B gz
SVG Blur (sqip-plugin-blur) 515 B gz
CSS Blur (sqip-plugin-blur) 419 B gz
CSS Blur (Browser) 389 B gz
eric-marty-780304 2000×2000
No Blur 387 B gz
SVG Blur (sqip-plugin-blur) 516 B gz
CSS Blur (sqip-plugin-blur) 417 B gz
CSS Blur (Browser) 387 B gz
hashbite-consent-manager-logo 360×360
No Blur 356 B gz
SVG Blur (sqip-plugin-blur) 479 B gz
CSS Blur (sqip-plugin-blur) 383 B gz
CSS Blur (Browser) 356 B gz
ian-dooley-298769 2000×3000
No Blur 368 B gz
SVG Blur (sqip-plugin-blur) 496 B gz
CSS Blur (sqip-plugin-blur) 398 B gz
CSS Blur (Browser) 368 B gz
mona-lisa 1200×1788
No Blur 397 B gz
SVG Blur (sqip-plugin-blur) 525 B gz
CSS Blur (sqip-plugin-blur) 426 B gz
CSS Blur (Browser) 397 B gz