Alternatives to the .GIF format in IONIC

ionic-v1
1

Our application consists of a novice team between myself and a graphics designer. This is our first application and I would like to consider the progress a major success. We’re currently in polishing stages and attempting to have an animated background for our login screen.

Currently we have this done with the use of a .GIF file which is set as the <pane background. It works great. The issue is that the gif is almost 10MB in size, which is 5x the applications size alone. We’ve done everything we can to lower the size of the GIF without completely destroying the graphical appeal.

The GIF animatation lasts for approximately 3 seconds, and has a resolution of 432x720 and is used in portrait view.

We have no problem with keeping the aditional 10MB of size for the GIF background, however I figure there must be an alternative in which to reduce the size(on the disk) of the animation.

For example, creating a sprite-sheet (Layout, no margin) of this GIF in 480x800 per frame is only 877Kb. Perhaps there’s a way to split this image up in Javascript and create a GIF dynamically or display the animation by switching the background image every x miliseconds?

2

Hmmm I had the same dilemma.

My team tried two options (the app never made it to final production so we didn’t get any user feedback) and they both seemed good. So you’ve got one of them, just the gif. We compressed it pretty heavily and the phone would stretch it out, and it still looked good since mobile browsers are pretty okay with doing that now days.

The other one was using a video we had uploaded to Vimeo. From what I’ve been able to tell, 99% of apps that do video backgrounds use this method. Of course it can be anywhere, vimeo just has awesome free and paid options to keep videos private, high quality, and easy background embedding with html5 video.

There are a lot of tutorials on how to do this with a regular website but it applies the same to an app. You would just bind the video background to the ion-content or even the ion-view, whatever works for your app.

I hope it turns out well, video backgrounds are super catchy and they look great.