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

Don't let images weigh down your site

Don't let images weigh down your site

Slides from the presentation at WordCamp Orlando 2017

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

November 09, 2017
Tweet

More Decks by Irina Blumenfeld

Other Decks in Programming

Transcript

  1. DON’T LET IMAGES
    WEIGH DOWN
    YOUR SITE
    WordCamp Orlando - 2017
    IRINA BLUMENFELD
    @irinablumenfeld #wcorl

    View Slide

  2. #wcorl - @irinablumenfeld netmagik.com
    NOT SURE IF WEBSITE IS BROKEN
    OR JUST SLOW

    View Slide

  3. #wcorl - @irinablumenfeld netmagik.com
    source: httparchive.org
    AVERAGE PAGE - 3.4 MB

    View Slide

  4. #wcorl - @irinablumenfeld netmagik.com

    View Slide

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

    View Slide

  6. #wcorl - @irinablumenfeld netmagik.com

    View Slide

  7. #wcorl - @irinablumenfeld netmagik.com
    53%

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

    View Slide

  8. #wcorl - @irinablumenfeld netmagik.com
    Source: Google’s Double Click
    19 seconds

    Average mobile web page load
    on 3G

    View Slide

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

    View Slide

  10. #wcorl - @irinablumenfeld netmagik.com
    • Most Popular
    • Great for Photos
    • Lossy
    JPEG

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. #wcorl - @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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. #wcorl - @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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. #wcorl - @irinablumenfeld netmagik.com
    T H A N K Y O U
    Slides: netmagik.com/wordcamp-orlando-2017
    Twitter: @irinablumenfeld
    E-Mail: [email protected]

    View Slide