iMessage stickers and the “misterious” APNG file. Everything we learned so far.
Have a few minutes? This article could spare you some precious time, and even help the APNG cause!
With iOS 10, Apple finally introduced many ways to customize your daily chats with tons of great stuff: sticker packs, embedded mini apps, smarter emoji, quick responses, handwriting, full screen animations and more…
iMessage, one of the most used app on iOS (and maybe The-One-App that keeps you glued to the Apple ecosystem), is now on par with apps like Wechat, Whatsapp, Telegram, Line, Messenger and so on.
As soon as iOS 10 was announced, we immediately wanted to get our hands dirty, and decided to make a sticker pack (right now, there are already thousands of stickers waiting for you in the App Store!). Not just because we all love stickers in messaging apps (and iMessage was basically the only app left out), but because of the simple workflow that Apple has putted in place to create them.
You don’t need to be a seasoned developer, you just enroll in the iOS Developer Program, then download Xcode on your Mac and you’re good.
Everyone (well, maybe not everyone, as setting up an Apple developer account with licences, contracts, bank account and all may still too cumbersome for some people…) can throw a bunch of images into an Xcode’s sticker pack project and upload the whole thing in minutes to the App Store for validation. You don’t need to be a seasoned developer, you just enroll in the iOS Developer Program, then download Xcode on your Mac and you’re good.
It’s pretty simple. Kudos to Apple, really! Try for yourself, create your own sticker pack. Start here with this video tutorial made by Apple.
The old fashioned way
Do you remember the APNG file format I was talking about in the title? If you want to make some stickers, the APNG format is one of the accepted formats by Xcode for this kind of projects (you also have PNG, GIF or JPEG). If you’ll like to have some animated stickers, your options are APNG, a sequence of PNG files or the 29 years old GIF format (really, it was created in 1987!).
At first, we just ignored the APNG option because we didn’t know much about it.
At first, we just ignored the APNG option because we didn’t know much about it [yet], and none of our everyday applications were able to create an APNG file. We simply went for the old fashioned “PNG images sequence” (because we wanted an 8bit alpha channel). We created our animations in After Effects and exported them as “images sequence”. The export generates a bunch of PNG files, you just drag & drop them into Xcode and your beautiful animated stickers are already wiggling on your screen…Sweet!
Now, after a new fat trimming session done by ImageOptim, our file size was a bit smaller, but still too big.
But, wait!…there is a “limit”!!!. The file size for each individual sticker must be less than 500 KB. And for an animated sticker (especially if you choose to go with the big one, 618 by 618 pixels) this limit can be reached quite easily. Let’s say that your PNG sequence freshly exported is slightly over 1 MB (as our example showed in the picture below). No problem you could say, all you need is just to simplify a bit your animation, cut the overall length (less frames = less images = smaller size), reduce the number of used colors and then throw the images sequence into some kind of optimizer like the great ImageOptim.
Maybe is gonna work! Or not…let’s see!
Our test animation, once optimized with ImageOptim, was 642 KB. Great job! We just have reduced the size to [almost] the half. But it does still waaay beyond the 500 KB limit! So we started another session of deep optimization…
We simplified again our animation, we shortened the total length even more and we even reduce the sprite size a bit (not the 618 by 618 bounding box, just the sprite in it). Now, after a new fat trimming session done by ImageOptim, our file size was a bit smaller, but still too big.
In our sticker pack, we had 8 animated characters that didn’t fit into the 500 KB allowed size. And we already have trimmed all we could whitout comprimising our artwork. The animations were now very short, the color very few and the sprite size much smaller than the original one… But we didn’t want to give up!
A promising “new” format
Here’s where the APNG format came in: suddenly, we wanted to know so much more about it…;-)
Let’s do some homework first… According to Wikipedia, the APNG format is quite young (just 8 years old, a little boy compared to the GIF) and it is an extension to the [now famous] PNG format. APNG’s support 24-bit images with 8-bit transparency, unlimited frames…Oh boy!!!
An APNG file is like a PNG, but animated. Oh, and it’s compatible with older PNG implementations. It’s a single-image file format. An APNG file is just a single file and all the frames are hidden to APNG-unaware applications. But the file format itself doesn’t allow to know if it is an animated or a static PNG. In other words your software/system/app can either handle an APNG file (showing the intended animation) or it can’t (showing you a static image but without letting you know that it is an animation…).
According to our own experience an APNG file is usually smaller then the GIF equivalent, even with an 8bit vs. 1bit alpha channel. Awesome!
By now, this relatively new format isn’t warmly received by many (like the PNG Group and other PNG purists), but I’m convinced that things are going to change sooner than expected…
Do you rember our 500 KB problem I was talking about just few lines above? Well, you could argue that if an APNG file is just a stack of PNG images, it shouldn’t differ that much from an old-school PNG sequence (especially size-wise)…and that if your PNG sequence is larger than 500 KB you should probably go for a 29 years old GIF animation.
Should you?…let’s look at the picture below:
The final APNG file is just 386 KB, almost a third of the original size. That’s a-w-e-s-o-m-e. And you still have an 8bit alpha channel!!! For comparison, the animated GIF was 472 KB, with overall lesser quality.
After some research, we found “animatedpngs.com” to be very good. Don’t trust the site’s design and UX, it’s inversely proportional to its efficiency! This little free tool works like voodoo magic!!! For the record, we also tried little software/apps on our computers but their results weren’t as good as with “animatedpngs.com”…
You just upload your images sequence, choose your output settings, clic “create” and you’re done! Wow! You are now a Grand Master of APNG.
Really, if you’re struggling with your animated stickers in Xcode and with the 500KB limit, you should probably give APNG a try!
Did I already told you that the GIF format is 29 years old?
P.S.
To me, the whole APNG-thing seems very promising. Right now it looks like a “rebel” file format trying to gain some traction and to replace the GIF in a foreseeable future (did I already told you that the GIF format is already 29 years old?). APNG is like the GIF but better: 24-bit colors with 8-bit transparency. This last point for me is a killer feature: having a real alpha channel is a must in 2016. APNG files let you dither colors (to further reduce the size but retaining more quality than a GIF) and on a non-compatible system/application it still work as a non-moving image. APNG also supports an unlimited number of frames and it’s based on the PNG, a fairly simple image format.APNG is a tangible improvement over the [static] PNG and the old-school animated GIF. Maybe it won’t last 29 years, but hey, who knows?
Right now many folks out there already support APNG files: Firefox, Safari with its Webkit rendering engine (this means Macs computers as well as all iOS devices), Apple’s iMessage, Pebble smartwatches, Line…Chrome support is in the works. The Microsoft’s Edge browser doesn’t currently support APNG, but you can say your word on this page.
P.S. 2
Did you make it this far? Honestly, I’m impressed and honored at the same time. Thumbs up!!!
