Using CSS vs image
Is there any advatage to doing something like this with CSS compared to using an image?
9 Replies
I think with rendering an image there is less computing time, with rendering using css it's easier to customize.
Define "advantage". With an image it's easier to use in multiple pages and super easy to change if/when change is needed. Though with CSS it's one less HTTP call since you're not downloading another file.
As with everything, It Depends™
Right, didn't even consider the downloading part.
Tho I don't think that specific gradient can be done with a one liner, if it can that it's gonna a kinda long one.
The one who posted it said we need multiple blended layers and SVG overlays. But I have no idea.
CSS could adapt to different dimensions dynamically. Images could only be scaled, and to avoid blurring, you'd need the image at the largest possible size. You can get around some of these issues with images by using the srcset attribute or a picture element, but that's extra work. An image can have a visible delay before it loads, possibly fail to load, and a user might even disable images for their browser.
keep it stupid simple -> use an image. if you run into issues, build it custom
agreed I don't know if it's really worth the effort to recreate this in CSS. Looks like something that could be an easy less an 10k image with the right image format. Lossy would probably work fine so jpeg, webp(lossy), avif
could store it grayscale and then tint it in style lol
What about an inline SVG?