Save 37% off PRO during our Black Friday Sale! »

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



    2017 IRINA BLUMENFELD @irinablumenfeld #wcorl
  2. #wcorl - @irinablumenfeld NOT SURE IF WEBSITE IS BROKEN

  3. #wcorl - @irinablumenfeld source: AVERAGE PAGE - 3.4

  4. #wcorl - @irinablumenfeld

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

  6. #wcorl - @irinablumenfeld

  7. #wcorl - @irinablumenfeld 53% of visits to MOBILE sites

    are abandoned after 3 seconds Source: Google’s Double Click
  8. #wcorl - @irinablumenfeld Source: Google’s Double Click 19 seconds

    Average mobile web page load on 3G
  9. I M A G E F O R M AT

  10. #wcorl - @irinablumenfeld • Most Popular • Great for

    Photos • Lossy JPEG
  11. #wcorl - @irinablumenfeld • DO NOT USE! • Big

    in size • Use PNG instead GIF
  12. #wcorl - @irinablumenfeld • Great for Logos • Transparency

    • PNG-8 vs PNG-24 PNG
  13. #wcorl - @irinablumenfeld • Vector graphics • Small in

    size • Transparency • Can be used inline in HTML SVG
  14. #wcorl - @irinablumenfeld I M A G E S

    I Z E 1.7 Mb 3264 x 2448 px
  15. #wcorl - @irinablumenfeld S C A L E /

    R E S I Z E • Photoshop • Imsanity WordPress Plugin 3200 px 800 px
  16. #wcorl - @irinablumenfeld S AV E F O R

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

    W E B Progressive JPEG Example
  18. #wcorl - @irinablumenfeld O P T I M I

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

    Z E / C O M P R E S S • • • EWWW WordPress Plugin • Compress JPG and PNG WordPress Plugin
  20. #wcorl - @irinablumenfeld O P T I M I

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

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

    Z E / C O M P R E S S
  23. #wcorl - @irinablumenfeld E X A M P L

    E Original Optimized Source:
  24. #wcorl - @irinablumenfeld 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 ( 1600 x 1067 px 207 Kb ( -40% )
  25. #wcorl - @irinablumenfeld E X A M P L

    E Original - 3.9 Mb Optimized - 207 Kb Source:
  26. #wcorl - @irinablumenfeld T E S T •

    • •
  27. #wcorl - @irinablumenfeld G T M E T R

    I X . C O M
  28. #wcorl - @irinablumenfeld W E B PA G E

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

    T E S T. O R G
  30. #wcorl - @irinablumenfeld T H A N K Y

    O U Slides: Twitter: @irinablumenfeld E-Mail: