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

Don't Let Images Weight Down Your Site - WCJAX

Don't Let Images Weight Down Your Site - WCJAX

Nobody likes a slow site. Every year the weight of an average site keeps increasing, mainly because of image sizes. Optimizing images is the biggest win when it comes to your website speed.
In this presentation, we will focus on different image formats and steps to follow before uploading them to a website. We’ll discuss PNG, JPG, GIF, SVG and when to use each one.
We’ll set up a process to prepare images for the web, and go over tools to measure loading time. We’ll also look at some examples of before and after image optimization

Irina Blumenfeld

April 04, 2018
Tweet

More Decks by Irina Blumenfeld

Other Decks in Programming

Transcript

  1. DON’T LET IMAGES
    WEIGH DOWN
    YOUR SITE
    WordCamp Jacksonville - 2018
    IRINA BLUMENFELD
    @irinablumenfeld #wcjax

    View full-size slide

  2. #wcjax - @irinablumenfeld netmagik.com

    View full-size slide

  3. #wcjax - @irinablumenfeld netmagik.com
    53%

    of visits to MOBILE sites are abandoned
    after 3 seconds
    Source: Google’s Double Click

    View full-size slide

  4. #wcjax - @irinablumenfeld netmagik.com
    source: httparchive.org
    AVERAGE PAGE - 3.8 MB

    View full-size slide

  5. #wcjax - @irinablumenfeld netmagik.com
    Etsy
    160kb 12%
    bounce rate
    wpostats.com

    View full-size slide

  6. #wcjax - @irinablumenfeld netmagik.com

    View full-size slide

  7. I M A G E F O R M AT S
    JPEG PNG GIF SVG

    View full-size slide

  8. #wcjax - @irinablumenfeld netmagik.com
    • Most Popular
    • Great for Photos
    • Lossy
    JPEG

    View full-size slide

  9. #wcjax - @irinablumenfeld netmagik.com
    • DO NOT USE!
    • Big in size
    • Use PNG instead
    GIF

    View full-size slide

  10. #wcjax - @irinablumenfeld netmagik.com
    • Great for Logos
    • Transparency
    • PNG-8 vs
    PNG-24
    PNG

    View full-size slide

  11. #wcjax - @irinablumenfeld netmagik.com
    • Vector graphics
    • Small in size
    • Transparency
    • Can be used
    inline in HTML
    SVG

    View full-size slide

  12. #wcjax - @irinablumenfeld netmagik.com
    I M A G E S I Z E
    1.7 Mb
    3264 x 2448 px

    View full-size slide

  13. #wcjax - @irinablumenfeld netmagik.com
    S C A L E / R E S I Z E
    • Photoshop
    • Imsanity WordPress Plugin
    3200 px 800 px

    View full-size slide

  14. #wcjax - @irinablumenfeld netmagik.com
    S AV E F O R W E B
    Baseline JPEG Example

    View full-size slide

  15. #wcjax - @irinablumenfeld netmagik.com
    S AV E F O R W E B
    Progressive JPEG Example

    View full-size slide

  16. #wcjax - @irinablumenfeld netmagik.com
    O P T I M I Z E / C O M P R E S S
    Lossy vs Lossless

    View full-size slide

  17. #wcjax - @irinablumenfeld netmagik.com
    O P T I M I Z E / C O M P R E S S
    • Tinypng.com
    • Kraken.io
    • EWWW WordPress Plugin
    • Compress JPG and PNG WordPress Plugin

    View full-size slide

  18. #wcjax - @irinablumenfeld netmagik.com
    O P T I M I Z E / C O M P R E S S

    View full-size slide

  19. #wcjax - @irinablumenfeld netmagik.com
    O P T I M I Z E / C O M P R E S S

    View full-size slide

  20. #wcjax - @irinablumenfeld netmagik.com
    E X A M P L E
    Original Optimized
    Source: unsplash.com

    View full-size slide

  21. #wcjax - @irinablumenfeld netmagik.com
    E X A M P L E
    Original - High Resolution
    4951 x 3301 px
    3.9 Mb
    1. Resize / Save for Web
    1600 x 1067 px
    338 Kb
    2. Optimize (tinypng.com)
    1600 x 1067 px
    207 Kb ( -40% )

    View full-size slide

  22. #wcjax - @irinablumenfeld netmagik.com
    E X A M P L E
    Original - 3.9 Mb Optimized - 207 Kb
    Source: unsplash.com

    View full-size slide

  23. #wcjax - @irinablumenfeld netmagik.com
    T E S T
    • gtmetrix.com
    • tools.pingdom.com/fpt
    • webpagetest.org

    View full-size slide

  24. #wcjax - @irinablumenfeld netmagik.com
    G T M E T R I X . C O M

    View full-size slide

  25. #wcjax - @irinablumenfeld netmagik.com
    W E B PA G E T E S T. O R G

    View full-size slide

  26. #wcjax - @irinablumenfeld netmagik.com
    W E B PA G E T E S T. O R G

    View full-size slide

  27. #wcjax - @irinablumenfeld netmagik.com
    T H A N K Y O U
    Slides: netmagik.com/wordcamp-jacksonville-2018
    Twitter: @irinablumenfeld
    E-Mail: [email protected]

    View full-size slide