<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Decoding of animated PNG (APNG) is not optimized for memory usage."
href="https://bugs.webkit.org/show_bug.cgi?id=146205">146205</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Decoding of animated PNG (APNG) is not optimized for memory usage.
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Images
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>clopez@igalia.com
</td>
</tr>
<tr>
<th>CC</th>
<td>cgarcia@igalia.com, maxstepin@yahoo.com
</td>
</tr></table>
<p>
<div>
<pre>The current code for decoding animated PNGs (see <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Add APNG support"
href="show_bug.cgi?id=17022">bug 17022</a>.) decodes all frames at once
and loads the raw pixels on memory for each frame.
This is a problem when we have an animated PNG with many frames.
Take the following example:
<a href="http://people.igalia.com/clopez/apngmem">http://people.igalia.com/clopez/apngmem</a>
The image loaded (clouds.png) has 375 frames at 700 x 394 (8-bit/color RGBA),
so when each frame of this image is loaded into memory it uses:
700*394*4 ~ 1.05 MB
That should be ok if the image had only a few frames, however it has 375 frames,
so when we load all the 375 frames into memory we end using around ~400MB,
which is too much.
The current PNGImageDecoder decoder implements PNGImageDecoder::clearFrameBufferCache(),
which helps to clear the already displayed frames. So if you check the memory
usage of WebKitWebProcess when the example test page is playing the animation,
you will see that the memory used by WebKitWebProcess lowers as it displays
the animation, however when the animation ends and starts again, the memory usage
peaks again because it decodes all the frames into memory again.
So, instead of loading all the frames on memory at once, I think it should be better
if it loads the frames on demand as the animation shows on the screen.
The GIF decoder has a parameter named haltAtFrame that seems designed to
avoid this very same isue. See:
<a href="http://trac.webkit.org/browser/trunk/Source/WebCore/platform/image-decoders/gif/GIFImageDecoder.cpp?rev=185822#L299">http://trac.webkit.org/browser/trunk/Source/WebCore/platform/image-decoders/gif/GIFImageDecoder.cpp?rev=185822#L299</a>
<a href="http://trac.webkit.org/browser/trunk/Source/WebCore/platform/image-decoders/gif/GIFImageReader.cpp?rev=185822#L354">http://trac.webkit.org/browser/trunk/Source/WebCore/platform/image-decoders/gif/GIFImageReader.cpp?rev=185822#L354</a>
For example, check loading this gif (1116 frames at 800 x 800) <<a href="http://people.igalia.com/clopez/apngmem/giant-redacted.gif">http://people.igalia.com/clopez/apngmem/giant-redacted.gif</a>>
on the WebKitGTK+ MiniBrowser and on some image viewer (eog, ristretto, ...).
You will see that on the WebKitGTK+ MiniBrowser it only uses a few megabytes
while on the image viewer it would use so much ram that it will end being killed by the OOM.
I have converted this gif to png with gif2apng. The result is here <<a href="http://people.igalia.com/clopez/apngmem/giant-redacted.png">http://people.igalia.com/clopez/apngmem/giant-redacted.png</a>>
If you download it and open with WebKitGTK+ you will see that it uses a lot of ram. While with the gif version that don't happens.
So, I think that the png decoder should gain support to only decode the frames
up to a haltAtFrame parameter like the GIFImageDecoder does.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>