Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PNG don Chop Space

PNG don Chop Space

Did you notice your app size is needlessly large and figured your app resources specifically images are the culprit for this? If Yes, then Webp is for you….

Umar Saidu Auna

August 27, 2021
Tweet

More Decks by Umar Saidu Auna

Other Decks in Programming

Transcript

  1. PNG don Chop Space!!!
    August 28, 2021

    View full-size slide

  2. Hello!
    I am Umar Saidu Auna
    Software Engineer
    a tech community organizer.
    You can find me on twitter
    @umarauna
    2

    View full-size slide

  3. Png don chop space
    Did you notice your app size is
    needlessly large and figured your
    app resources specifically images
    are the culprit for this? If Yes,
    then Webp is for you….
    3

    View full-size slide

  4. 5
    We freed 14.3MB

    View full-size slide

  5. Mai nene WebP?
    1
    What is Webp? - Hausa

    View full-size slide

  6. WebP is an image file format from
    Google that provides lossy
    compression (like JPEG) as well as
    transparency (like PNG) but can
    provide better compression than
    either JPEG or PNG. Lossy WebP
    images are supported in Android 4.0
    (API level 14) and higher.
    8

    View full-size slide


  7. One of the best things
    about WebP images it’s
    reduces the image size
    without reducing the
    image quality.
    9

    View full-size slide

  8. idi ti Webp?
    2
    Why Webp? - Yoruba

    View full-size slide

  9. WebP provides consistently smaller
    file sizes than its alternatives.
    11

    View full-size slide

  10. WebP lossless image files are on
    average, 26% smaller than PNGs.
    12

    View full-size slide

  11. WebP lossy images are 25-34%
    smaller than comparable JPG images
    13

    View full-size slide

  12. the new pikin
    3
    the new child - Pidgin

    View full-size slide

  13. AVIF
    The AV1 image format (AVIF) is an
    exciting new open-sourced and royalty
    free optimised image format which
    supports any image codec. An AVIF image
    offers significant file size reduction
    compared with JPEG, PNG and WebP and is
    currently supported on Google Chrome,
    Firefox and Android.
    16

    View full-size slide

  14. AVIF vs JPEG and WebP
    The AVIF image format offers
    significant file size reduction for
    lossy images compared with JPEG and
    even WebP – Google's image format.
    17

    View full-size slide

  15. Browsers supported
    Google Chrome
    18
    Firefox
    Microsoft Edge
    not() Safari

    View full-size slide

  16. 19
    JPEG
    (311.4 KB)
    Webp
    (254.2 KB)
    Avif
    (162.6 KB)

    View full-size slide

  17. Webp maka Web
    4
    Webp for web? - Igbo

    View full-size slide

  18. Tools
    Squoosh - Online image
    compression and conversion
    Online-Convert.com - Online image
    conversion
    21

    View full-size slide

  19. Command line tools
    https://www.npmjs.com/package/cwebp
    22

    View full-size slide

  20. Node Tools
    https://github.com/imagemin/imagemin
    23
    Its Plugin
    https://github.com/imagemin/imagemin-webp

    View full-size slide

  21. Sketch – UI Designers
    In Sketch, we can export any slice
    in the WebP image format.
    24

    View full-size slide


  22. WebP is supported in
    72% of browsers
    globally used.
    25

    View full-size slide

  23. Oya show me how to do it!!!
    We go convert an image to webp
    and back to png in Android Studio 26

    View full-size slide

  24. Article on medium
    https://bit.ly/webp-image
    27

    View full-size slide

  25. Slide
    https://speakerdeck.com/auna/png
    -don-chop-space
    28

    View full-size slide

  26. 29
    nagode
    Any questions?
    You can find me at:

    @umarauna

    github.com/umarauna
    e dupe
    Daalụ
    you do well
    thank you

    View full-size slide