Site update or How Not to Make Spicy Backgrounds That Abuse Your CPU and GPU

So previous version of this website had a background which was a spicy combination of CSS filters which also was animated

/*how to abuse your CPU or GPU without javascript, mining and verbal abuse*/
@keyframes trippy{
    from{
        filter: blur(1vw) saturate(3) hue-rotate(0) blur(0.75vw)
    }
    to{
        filter: blur(1vw) saturate(3) hue-rotate(360deg) blur(0.75vw)
    }
}

Since I am not an actual web dev so I’m more fun of performance and optimizations I decided to end this… with optimizations web devs should use more frequently.

• Shrink the image size and jpegify it (won’t matter in the end for GPU but at least will take less bandwidth)
• If you want spicy effects on it the best thing will be applying them offline, i.e. in some image processing software before uploading it.
• Please use as less filters as possible if possible, probability of which is 99.99% unless you really want to make your website the ultimate benchmark (trust me it’s not too hard since every modern website is now such)

Here’s the optimized CSS that is boiling your computer right now.

@keyframes trippy{
    from{
        filter: hue-rotate(0);
    }

    to{
        filter: hue-rotate(360deg);
    }
}

Thanks for reading! 😺

subscribe to my RSS feed