I've been working with the Cordova framework the last few days and actually created something I'm very proud of, however the application size is sitting at 15MB. I know that's not all that much, but when over half of it is coming from a single .gif file, that's bothersome.
The background for my applications login screen is 10.3MB in .GIF format.
I'm wondering if HTML supports any other formats that can be compressed more, without losing quality. That.. does not require a video player.
I researched a bit and I think this might answer your question, which 'may' make this question a duplicate, but I'm leaning away from. It's from this question. Just keep in mind that browser nuances are a big variable when it comes to this as they don't all support the same thing.
Animated png or APNG (http://en.wikipedia.org/wiki/APNG). They can be made in GIMP with the APNG Plug-in But animated Gif's really are the main one out there - flash kinda took over though, but that isn't really an image per se.
Also, other alternatives from the same wikipedia page: The MNG file format is a more powerful alternative to APNG, although is a more complex format and has less web browser support.
The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only 1 bit alpha transparency, by mapping one of the palette colors to transparent.
SVG combined with scripting or SMIL can animate vector graphics and can incorporate raster graphics. (See SVG animation.)
Dynamic graphics created with HTML 5 canvas Object can also be animated.
An alternative method for animations in web pages is to use conventional static images and animate them using JavaScript,[22] Adobe Flash, Microsoft Silverlight, Java or other plugin based technologies. - Nathan
Another alternative, within the same question, is this:
WebP is an image format employing both lossy and lossless compression. It is currently developed by Google.
Advantages of animated WebP compared to animated GIF
WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.
WebP supports both lossy and lossless compression; in fact, a single animation can combine lossy and lossless frames. GIF only supports lossless compression. WebP's lossy compression techniques are well-suited to animated images created from real-world videos, an increasingly popular source of animated images.
WebP requires fewer bytes than GIF1. Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.
WebP takes less time to decode in the presence of seeking. In Blink, scrolling or changing tabs can hide and show images, resulting in animations being paused and then skipped forward to a different point. Excessive CPU usage that results in animations dropping frames can also require the decoder to seek forward in the animation. In these scenarios, animated WebP takes 0.57x as much total decode time2 as GIF, resulting in less jank during scrolling and faster recovery from CPU utilization spikes.
Disadvantages of animated WebP compared to animated GIF
In the absence of seeking, straight-line decoding of WebP is more CPU-intensive than GIF. Lossy WebP takes 2.2x as much decode time as GIF, while lossless WebP takes 1.5x as much.
WebP support is not nearly as widespread as GIF support, which is effectively universal.
Adding WebP support to browsers increases the code footprint and attack surface. In Blink this is approximately 1500 additional lines of code (including the WebP demux library and Blink-side WebP image decoder). Note that this problem could be reduced in the future if WebP and WebM share more common decoding code, or if WebP's capabilities are subsumed in WebM's.
https://developers.google.com/speed/webp - Vladimir
