I'm dealing with a situation where we allow artistic nudity but need to blur these images until users confirm they're 18+. I'm wondering if just blurring the images with CSS would suffice or if I need to create a separate blurred version of the image after upload. Also, should the blurred version have a different URL, or can I just add a `-blurred.jpg` suffix? My goal isn't to completely hide the original content but to prevent immediate exposure.
4 Answers
CSS blurring should work fine for what you need, but just remember that it’s not foolproof. Consider the other methods if compliance is your main concern.
Blurring with CSS might not be sufficient since it only overlays a blur effect. If someone right-clicks and selects "open image in new tab," they would see the original image without the blur, which could lead to compliance issues. You might want to generate a blurred version during the upload process to avoid this problem.
In cases like this, I usually opt for server-side blurring. It can actually speed up load times because the server handles the image processing, allowing you to serve smaller, optimized files directly.
Interesting! Did it improve load times because you used lower resolution images? I serve everything through a CDN.
I don’t think just using CSS blur is enough. Most setups usually employ some form of image processing middleware to handle blurring before images are served. It’s safer and can help with compliance.
That's a great point! This is exactly why I’m asking here. Maybe creating a blurred version via a queue worker is the best route to take.