Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[assets] Optimize back-icon PNGs #2341

Merged
merged 1 commit into from Aug 9, 2017
Merged

Conversation

ide
Copy link

@ide ide commented Aug 9, 2017

Ran the images through optipng -o7 -strip all. In some cases got the images down from > 1 TCP packet to below 1.

Test plan

Looked at images.

Ran the images through `optipng -o7 -strip all`. In some cases got the images down from > 1 TCP packet to below 1.
@skevy skevy merged commit ae9fb10 into react-navigation:master Aug 9, 2017
@ide ide deleted the optimize-image branch August 9, 2017 06:26
@AlanFoster
Copy link

@ide This is kinda awesome; Out of interest - would there be any rendering performance wins here, or is it purely filesize


For anyone coming to this in the future; I'll save you a man lookup:

PNG encoding and optimization options
 -o level
  Select the optimization level.
  The optimization level 0 enables a set of optimization operations that require minimal effort. There will be  no  changes
  to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams.
  The  optimization  level 1 enables a single IDAT compression trial. The trial chosen is what OptiPNG thinks it's probably
  the most effective.
  The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.
  The behavior and the default value of this option may change across different program versions. Use the option -h to  see
  the details pertaining to your specific version.

...

Editing options

 -strip objects
    Strip metadata objects from a PNG file.
    PNG  metadata  is  the information stored in any ancillary chunk except tRNS.  (tRNS represents the alpha channel, which,
    even if ignored in rendering, is still a proper image channel in the RGBA color space.)
    The only option currently supported is -strip all.

@ide
Copy link
Author

ide commented Aug 9, 2017

@AlanFoster the improvements are pretty small. If you're downloading the icons remotely (ex: with Expo) then saving a TCP/IP packet can help, although Expo assets are served over HTTP/2 and cached somewhat optimally so saving a packet doesn't make the UX much better. For apps that bundle icons, this makes the app a little tinier by about 1-2KB.

The phone also doesn't need to read as many bytes when decoding the images but the actual decoded images still take up the same amount of RAM. I don't think you'd notice any improvement in UX. I just sent this PR since I was doing a related experiment and this was a side effect of it, I don't think this PR has much impact though.

sourcecode911 pushed a commit to sourcecode911/react-navigation that referenced this pull request Mar 9, 2020
Ran the images through `optipng -o7 -strip all`. In some cases got the images down from > 1 TCP packet to below 1.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants