SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

[Google AI Studio] Time-Saving Cooking No. 36: An app that automatically optimizes APNG images for LINE sticker review standards

Out of necessity, I created an APNG image analysis app.
It displays everything from animation control information to the list of chunk structures in plain sight.

In addition to this, I have also implemented the feature mentioned in the title,

automatic optimization for LINE sticker review standards

.
It is quite a niche tool, but please bear with me if you are interested (lol).




Analyzing APNG format files

Lately, I have been making nothing but apps related to
APNG (Animated PNG), an image format that extends PNG to support animation.

To verify that they are "created correctly," I have created an analysis app again this time.
The usage is as follows.

1. Load the target file

Drag and drop the file into the "PNG / APNG Analysis & Correction" box, or click to select the file.

Drag and drop a PNG / APNG image into the box

2. Analyzed information is displayed

The file information will be displayed on the screen.

Screen after loading an APNG image

Each item of the analysis results will be explained in the following sections.





Detailed explanation of PNG/APNG analysis results

PNG files are composed of blocks of data called "chunks." This tool breaks down those chunks and visualizes how the image is constructed.

1. Basic Information (IHDR chunk)

This is the most important basic data located at the beginning of every PNG file.

  • Size (Width x Height): The size of the image in pixels. Since it must be an even number for LINE stickers, if it is an odd number, the value will be highlighted in red.

  • Color Type: The format of the image's color information. The tool displays it as follows:

    • RGB: Three colors: red, green, and blue.

    • RGBA: A format that adds an "alpha channel (transparency)" to RGB.

    • Palette format: A lightweight format that manages up to 256 colors by number.

    • Grayscale: Black and white (or black and white + transparency) information.

  • Bit Depth: The amount of information per channel (usually 8-bit).

  • Frame count: The total number of frames that make up the animation. For still images, it is displayed as "1".

  • IHDR detailed information:

    • Compression method: Data compression method (usually Deflate).

    • Filter method: Pre-processing method to increase compression ratio.

    • Interlace: Setting to display images gradually when viewed on the web. 'None' is recommended for LINE.

Basic information

2. Animation control (acTL chunk)

If this data is included, the file is recognized as an 'APNG (Animated PNG)'.

  • 1 loop playback time: The time it takes for the animation to play once from the first frame to the last frame (e.g., 1.000 seconds).

  • Loop count: Setting for the number of times the animation repeats.

    • Infinite (0): Continues to play without stopping.

    • 1 to 4 times: Stops at the last frame after playing the specified number of times. A checkmark is displayed if it meets the LINE sticker regulations (1 to 4 times).

  • Total playback time: The total time from the start of playback until it stops completely, calculated as 1 loop time × loop count. A warning is displayed if it exceeds the LINE regulation (4 seconds total).

Animation control

3. Frame control information (fcTL chunk)

Important data that defines the 'display time', 'drawing size/position', and 'blending method' for each frame of the animation.

  • Playback time (Delay): The duration for which that frame is displayed. It is calculated as Delay Num (numerator) / Delay Den (denominator), and for intuitive understanding on the tool, it is also displayed in seconds (e.g., 0.100s).

  • Size / Offset: Indicates the 'drawing size (width × height)' and 'drawing position (x, y offset)' of the frame. APNG has a mechanism to save data capacity by overwriting only the changed parts.

  • Operation settings (Disposal / Blend):

    • Disposal Op: Determines how to process the current drawing area before drawing the next frame (leave as is, clear with background color, or revert to the previous state).

    • Blend Op: Controls whether to 'overwrite as is (Source)' the image onto the previous frame or perform 'alpha blending (Over)' considering transparency.

Frame control information

4. List of chunk structures

The table displayed at the bottom of the analysis results lists the 'chunks' (blocks of information) that make up the binary data of the PNG file in order. You can check the type, position (offset), data size, and CRC (error detection code) of each chunk.

  • IHDR (Image Header): The most important chunk containing basic information such as image width, height, color depth, and color type.

  • acTL (Animation Control): An APNG-specific chunk that defines the total number of frames and loop count for the animation.

  • fcTL (Frame Control): Controls the display timing and drawing position of each frame (the 'frame control information' mentioned above).

  • IDAT (Image Data): The actual compressed image data for the static image (or the first frame of an APNG).

  • fdAT (Frame Data): Image data for the second and subsequent frames of an APNG. It works in conjunction with fcTL.

  • PLTE (Palette): Color sample data used for indexed color (palette format).

  • tEXt / zTXt: Text-based metadata such as the name of the software used, copyright information, and comments.

  • IEND (Image Trailer): A mark indicating the end of the PNG data. No data follows this.

This tool decodes these complex binary structures, converts them into human-readable numbers, and then determines whether they are 'pass or require correction' based on the guidelines of specific platforms.





About LINE Sticker Standard Checks

To pass the LINE animation sticker review, you must meet all of the following conditions.
This tool performs an automatic judgment based on the analysis results, displaying them in green if they comply and red if there is an issue.

1. Format (APNG)

  • Condition: Must be APNG (animated)

  • Explanation: It must be in 'Animated PNG (APNG)' format, which contains multiple frames, rather than a standard static PNG. While the extension remains .png, it checks whether data for animation control is included internally.

2. Color Mode

  • Condition: RGB format (RGB / RGBA)

  • Explanation: It must be in RGB color, which is standard for digital devices, or RGBA color including transparency. If CMYK mode for printing or special color profiles are included, it will cause a review error because it will not display correctly.

3. Width/Height (Even Number Rule)

  • Condition: Width max 320px / Height max 270px (and each must be an even number)

  • Explanation: Due to LINE's system limitations, the vertical and horizontal dimensions of the image must be 'even numbers'. If even one pixel is odd, an error will occur during upload. This tool performs automatic corrections, such as trimming one pixel, if an odd number is detected.

4. Size Standard (270px Rule)

  • Condition: Either the width or height must be '270px or larger'

  • Explanation: This is a rule to prevent stickers from appearing too small on the chat screen. While keeping it within the maximum size (320x270), at least one side must be set to 270px or larger.

5. File Size

  • Condition: Maximum 300KB or less

  • Explanation: This is the strictest limitation for animated stickers. While APNG offers high image quality, it tends to result in larger file sizes. Therefore, if there are many frames, it is essential to use techniques such as "color reduction (palettization)" to limit the number of colors and keep the file size within 300KB.

6. Loop Count

  • Condition: 1 to 4 times (0 times/infinite is not allowed)

  • Explanation: An "infinite loop" where the animation repeats endlessly is prohibited. The playback count must be set to 1 to 4 times, and it must be set to end in a static state.

7. Total Playback Time

  • Condition: Total must be exactly 1, 2, 3, or 4 seconds

  • Explanation: The total of "display time per frame × loop count" must be exactly one of 1, 2, 3, or 4 seconds (integer seconds). Fractional times such as "1.5 seconds" or "4.2 seconds" are not permitted.





Operations Related to LINE Stickers

The APNG image is uploaded and previewed on the right side of the screen, and you can perform operations related to LINE stickers using the buttons below it.

🔘 "Correct to LINE Standards" button
Automatic optimization for LINE sticker review standards

This app analyzes the uploaded image and performs batch corrections with a single click to ensure it meets the strict review guidelines of the LINE Creators Market (300KB limit, even pixels, integer second playback time, 5 to 20 frames, etc.). If the file size exceeds the limit, it automatically performs color reduction while maintaining image quality to convert it into an uploadable data format.

🔘 "Save" button
Download optimized file

Saves the analyzed and corrected APNG file currently displayed in the preview to your device. Since this file has already cleared LINE's technical specifications, it can be uploaded directly from the sticker editing screen and used for submission.

🔘 "Generate Main/Tab Images" button
Batch creation of accessory images for submission (Main / Tab)

Automatically resizes and generates the "Main Image (240×240px APNG)" and "Chat Room Tab Image (96×74px static image)" that are required for sticker set submission from the current original sticker image. By automatically applying the specific size limits and file formats required for each image, it significantly reduces the effort for creators to manually launch editing software.

Preview and buttons

Conversion of single-frame PNG images is also possible

Even when a single-frame static PNG image is loaded, it can be converted into an APNG as a simple animation using horizontal flipping.

Single-frame PNG images become horizontally flipped animations





Share URL

Please give it a try.





Summary: Eliminate upload errors

This app is a sister app to the
APNG animation creation app created in "Time-Saving Cooking No. 34".

APNGs created with the No. 34 app will
almost 100% result in errors and fail to upload as LINE animation stickers if left as is.

However, by optimizing with this app, you can convert them into data that meets LINE sticker review standards.

While this does not completely prevent rejections
(you may still receive feedback regarding alpha channel painting),
it should allow you to avoid almost all technical errors during upload.

If you are struggling with LINE upload errors, please give it a try.

Errors during LINE uploads will be almost entirely eliminated.

That's all!





✨ For those who have passed the review and want to expand their range of expression

If you'd like, there is more to this story.

I created an app that not only eliminates errors but also allows you to adjust the pacing of the animation, such as making it "gradually faster" or "longer only at the end."

You can find the rest of the explanation here.


いいなと思ったら応援しよう!

ROROSUKE LABO 記事なり、プログラムなりが役に立ったと思った方は、 チップの応援よろしくお願いいたします。 次の開発もがんばろうかな、という気になりますのだ (笑)