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 Miami 2018

Nobody likes a slow site. Every year the weight of an average site keeps increasing, mainly because of image sizes. Optimizing images is very important 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

March 12, 2018

More Decks by Irina Blumenfeld

Other Decks in Programming



    2018 IRINA BLUMENFELD @irinablumenfeld #wcmia Slides: netmagik.com/wordcamp-miami-2018
  2. #wcmia - @irinablumenfeld netmagik.com 53% of visits to MOBILE sites

    are abandoned after 3 seconds Source: Google’s Double Click
  3. I M A G E F O R M AT

  4. #wcmia - @irinablumenfeld netmagik.com • Great for Logos, 

    with few colors • Transparency • PNG-8 vs PNG-24 PNG
  5. #wcmia - @irinablumenfeld netmagik.com • Vector graphics • Small in

    size • Great for logos, icons • Transparency • Can be used inline in HTML SVG
  6. #wcmia - @irinablumenfeld netmagik.com S C A L E /

    R E S I Z E • Photoshop • Imsanity WordPress Plugin 3200 px 800 px
  7. #wcmia - @irinablumenfeld netmagik.com S AV E F O R

    W E B J P E G Baseline vs Progressive
  8. #wcmia - @irinablumenfeld netmagik.com O P T I M I

    Z E / C O M P R E S S Lossy vs Lossless
  9. #wcmia - @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
  10. #wcmia - @irinablumenfeld netmagik.com E X A M P L

    E Original Optimized Source: unsplash.com
  11. #wcmia - @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% )
  12. #wcmia - @irinablumenfeld netmagik.com E X A M P L

    E Original - 3.9 Mb Optimized - 207 Kb Source: unsplash.com
  13. #wcmia - @irinablumenfeld netmagik.com T E S T • gtmetrix.com

    • tools.pingdom.com/fpt • webpagetest.org
  14. #wcmia - @irinablumenfeld netmagik.com T H A N K Y

    O U Slides: netmagik.com/wordcamp-miami-2018 Twitter: @irinablumenfeld E-Mail: [email protected]