Live data from Hacker News

Show HN: Image Effects with CSS

bennettfeely.com

11–20 of 21 posts

Re: Show HN: Image Effects with CSS

#11
Slightly related question: Does the carbon footprint increase with all this client side rendering?

I would think just rendering something charcoal on the computer of the designer should be enough, rather than repeating it on the machines of thousands of visitors?

Re: Show HN: Image Effects with CSS

#12

Slightly related question: Does the carbon footprint increase with all this client side rendering? I would think just rendering something charcoal on the computer of the designer should be enough, rather than repeating it on the machines of thousands of visitors?

It's a good question. What about the network transmission? What's the carbon footprint of transmitting a 50k image to thousands of visitors vs a handful of bytes in css? I agree it does push more energy usage to the client, but I'm not sure how total energy usage adds up.

In any event I don't like it because it kills my battery.

Re: Show HN: Image Effects with CSS

#13
post #8

Earlier quoted context omitted.

But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side again. Maybe I am missing something?

If it was done inside a canvas it would be possible to save it. The effects would not be as simple to create though.

I did something similar in pure JS a few years ago. It's definitely possible to render the image into a canvas and save it/upload it/present as a data uri.

I'm pretty sure the applied css effects should carry over to the canvas.

Recently, I've been looking more into WebGL and what's possible with GLSL shader scripts for image warping (for VR) and image processing/effects. see shadertoy.com etc.

Re: Show HN: Image Effects with CSS

#15

Slightly related question: Does the carbon footprint increase with all this client side rendering? I would think just rendering something charcoal on the computer of the designer should be enough, rather than repeating it on the machines of thousands of visitors?

Yes, and if your website is using CSS effects to change the same image for every user then you're making a mistake. Just render the modified image to a static asset and serve that.

However, if you want to use a pencil effect on an image that you don't have control over (eg a user's image before they upload it, or something from an API-driven service like Unsplash) then the technique still has a lot of value.

Re: Show HN: Image Effects with CSS

#16
post #8

Earlier quoted context omitted.

But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side again. Maybe I am missing something?

If it was done inside a canvas it would be possible to save it. The effects would not be as simple to create though.

[deleted]

Re: Show HN: Image Effects with CSS

#17
post #3

Earlier quoted context omitted.

Client side image editor is the first thing I thought of.

But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side again. Maybe I am missing something?

[deleted]

Re: Show HN: Image Effects with CSS

#18
post #3

Earlier quoted context omitted.

Client side image editor is the first thing I thought of.

But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side again. Maybe I am missing something?

You can render SVG with foreign HTML+CSS to a canvas[1]. I did that in one of my apps (guitar fretboard diagram generator) to render PNGs from my dynamic React components. Worked like a charm!

[1] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

Re: Show HN: Image Effects with CSS

#20

Slightly related question: Does the carbon footprint increase with all this client side rendering? I would think just rendering something charcoal on the computer of the designer should be enough, rather than repeating it on the machines of thousands of visitors?

Are these really that CPU intensive? It's a very basic transform. Probably a rounding error in terms of overall rendering energy usage.
Post reply on HN