Giter Club home page Giter Club logo

imessage-panda-sticker's Introduction

Keeping animated PNG iMessage stickers under 500KB

With the release of iOS 10, Apple introduced stickers in iMessage. A sticker is a small image or animation that can be sent or placed on messages, photos or on other stickers.

iMessage panda sticker

Creating a sticker pack with your own animated stickers is simple! You need an animated PNG and Xcode 8. Clone this project to get started, watch Apple's video tutorial, or follow the steps below.

Keeping animated stickers below the maximum size of 500KB can be challenging. We'll show you how you can use TinyPNG to accomplish this! Read on!

Creating an iMessage Sticker Pack Application

First create a new Sticker Pack Application in Xcode 8. Select File > New > Project from the menu, then choose Sticker Pack Application.

Create new project, step 1

Name your project and choose a location to save it.

Create new project, step 2

Adding an animated PNG to your Sticker Pack

Your project is empty after creation. If you already have an animated PNG (APNG), you can drag and drop it to the sticker pack under Stickers.xcstickers > Sticker Pack.

Empty project

Drag and drop sticker

For optimal performance, Apple has added a hard file size limit of 500KB for stickers. Xcode will warn you when you attempt to add a file that is larger.

Error when over 500KB

Making sure your stickers are below 500KB can be especially challenging for animated stickers! Luckily you can use TinyPNG to compress your stickers.

Compressing animated PNGs

You can compress your images in order to reduce the file size. With the TinyPNG website you can compress APNG files for free. This allows you squeeze every last byte out of your images and to create the best possible stickers!

APNG is now under 500KB

Compare before & after

The compression uses advanced techniques to compress images. The difference is hardly noticeable but the filesize savings after compression are quite spectacular. The APNG image of the waving panda is compressed from 1.5 MB to 492 KB. You can see there is barely a visible difference.

Note that animated PNGs are only displayed in Firefox or Safari. In Google Chrome, Opera, Microsoft Edge and other browsers you only see the first frame.

Original APNG โ€“ 1.5MB Optimised APNG โ€“ 492KB
Original Compressed

How to reduce file size further?

If TinyPNG is not able to compress your animated PNG below 500KB, you might have to take other steps to reduce the file size. You may have to change your image so that the dimensions are smaller, or use fewer frames.

imessage-panda-sticker's People

Contributors

rolftimmermans avatar revolter avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.