Preface: In this article I'm assuming you're already familiar with SVG. If not, now's a great time to familiarise yourself! The power of SVG is tru...
For further actions, you may consider blocking this person and/or reporting abuse
I clicked because I saw ice cream.
This is a really cool trick, definitely something I'll be looking at using in the future since I've come across this specific use case.
Do you know if there are any compatability issues with different browsers?
In modern browsers SVG support is very good so there shouldn't be any issues. I've even tested in IE11 and it works fine. There are a few ways to approach it though, inline SVGs seem to offer the best support while externally references ones (e.g. as an img) may differ from browser to browser. This codepen samples a number of those options which is useful for testing.
Thanks for your reply, James. IE11 support sounds great, that's as far down as I'm willing to go. ;) I'll take a look at the codepen samples.
Designers HATE him!
I find that using those lossy png optimizers like ImageOptim (MacOS) can get file sizes around the same or even lower than use jpg with masks.
Definitely a good option as well. I ran the same 1.9mb PNG through ImageOptim and it got it down to around 600kb so still about double the size. Certainly a great improvement though, especially if you have a batch of PNGs to do, but you do compromise some quality with lossy compression.