What is better for web, bitmap or vector?

[MarkSmit]

So I try to avoid bitmaps at all costs, because I want my graphics to look good on any screen size. Bitmaps can be heavy in file size too.

But what is better for the browser? I have animated graphics running 60fps and 30fps. The 60fps run extremly smooth, the 30fps are kinda janky. Both 30fps and 60fps lag sometimes, almost always on safari.

30fps graphic, janky slider: https://kartent-graphic-proef.marked-design.nl/

60fps graphic, really smooth: https://bikeflip.msgv.nl/

So two questions:

1. Is a 60fps animation something to always avoid for web?

2. Should I use bitmaps or vectors?

[Nick Gioia]

24 or 30 frames is the best way to go, it's pretty much the standard. Vectors are always better than bitmaps. Vector will keep your files lighter. That's why Animate is so great because it works with vectors. 

[kglad]

...and vectors scale without loss of fidelity (as you know). 

and in animate it's easy to convert a bitmap to a vector (modify>bitmap>trace bitmap).

[JoãoCésar]

Hi.

1 - I always target everything I do at 60 fps. It's the standard and what feels most natural for the users.

2 - It's very likely that users will access your content on mobile devices. And for mobile devices bitmaps are the best option. It's good to present sharp vectors but it's even better to deliver an acceptable performance.

Of course these are my opinions.

Regards,

JC

[MarkSmit]

Thanks for the tip! I often make for desktop and mobile. So I keep the bitmaps in mind.

[JoãoCésar]

Awesome!

So just let us know if you need further assistance.