Skip to main content
MarkSmit
MarkSmit
Inspiring
Jan 25, 2023 3:07 PM UTC
Question

What is better for web, bitmap or vector?

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?

This topic is closed to new replies. Start a new post to keep the conversation going.

5 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
Jan 30, 2023 11:25 AM UTC

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

Translate
    MarkSmit
    MarkSmitAuthor
    Inspiring
    Jan 30, 2023 11:32 AM UTC

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

    Translate
      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      Jan 30, 2023 11:42 AM UTC

      Awesome!

       

      So just let us know if you need further assistance.

      Translate
      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      Jan 25, 2023 3:41 PM UTC

      ...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).

      Translate
        Community Expert
        Nick GioiaCommunity Expert
        Community Expert
        Jan 25, 2023 3:21 PM UTC

        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. 

        Translate
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices