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.

Transcript

1. DON’T LET IMAGES WEIGH DOWN YOUR SITE WordCamp Orlando - 2017 IRINA BLUMENFELD @irinablumenfeld #wcorl
2. #wcorl - @irinablumenfeld netmagik.com NOT SURE IF WEBSITE IS BROKEN OR JUST SLOW
3. #wcorl - @irinablumenfeld netmagik.com source: httparchive.org AVERAGE PAGE - 3.4 MB
4. #wcorl - @irinablumenfeld netmagik.com
5. #wcorl - @irinablumenfeld netmagik.com Etsy 160kb 12% bounce rate wpostats.com
6. #wcorl - @irinablumenfeld netmagik.com
7. #wcorl - @irinablumenfeld netmagik.com 53% of visits to MOBILE sites are abandoned after 3 seconds Source: Google’s Double Click
8. #wcorl - @irinablumenfeld netmagik.com 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 S JPEG PNG GIF SVG
10. #wcorl - @irinablumenfeld netmagik.com • Most Popular • Great for Photos • Lossy JPEG
11. #wcorl - @irinablumenfeld netmagik.com • DO NOT USE! • Big in size • Use PNG instead GIF
12. #wcorl - @irinablumenfeld netmagik.com • Great for Logos • Transparency • PNG-8 vs PNG-24 PNG
13. #wcorl - @irinablumenfeld netmagik.com • Vector graphics • Small in size • Transparency • Can be used inline in HTML SVG
14. #wcorl - @irinablumenfeld netmagik.com I M A G E S I Z E 1.7 Mb 3264 x 2448 px
15. #wcorl - @irinablumenfeld netmagik.com S C A L E / R E S I Z E • Photoshop • Imsanity WordPress Plugin 3200 px 800 px
16. #wcorl - @irinablumenfeld netmagik.com S AV E F O R W E B Baseline JPEG Example
17. #wcorl - @irinablumenfeld netmagik.com S AV E F O R W E B Progressive JPEG Example
18. #wcorl - @irinablumenfeld netmagik.com O P T I M I Z E / C O M P R E S S Lossy vs Lossless
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
20. #wcorl - @irinablumenfeld netmagik.com O P T I M I Z E / C O M P R E S S
21. #wcorl - @irinablumenfeld netmagik.com O P T I M I Z E / C O M P R E S S
22. #wcorl - @irinablumenfeld netmagik.com O P T I M I Z E / C O M P R E S S
23. #wcorl - @irinablumenfeld netmagik.com E X A M P L E Original Optimized Source: unsplash.com
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% )
25. #wcorl - @irinablumenfeld netmagik.com E X A M P L E Original - 3.9 Mb Optimized - 207 Kb Source: unsplash.com
26. #wcorl - @irinablumenfeld netmagik.com T E S T • gtmetrix.com • tools.pingdom.com/fpt • webpagetest.org
27. #wcorl - @irinablumenfeld netmagik.com G T M E T R I X . C O M
28. #wcorl - @irinablumenfeld netmagik.com W E B PA G E T E S T. O R G
29. #wcorl - @irinablumenfeld netmagik.com W E B PA G E T E S T. O R G
30. #wcorl - @irinablumenfeld netmagik.com T H A N K Y O U Slides: netmagik.com/wordcamp-orlando-2017 Twitter: @irinablumenfeld E-Mail: irina@netmagik.com