weigh down your site - 2018 wordcamp jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com...
TRANSCRIPT
DON’T LET IMAGES WEIGH DOWN
YOUR SITE
WordCamp Jacksonville - 2018 IRINA BLUMENFELD
@irinablumenfeld #wcjax
#wcjax - @irinablumenfeld netmagik.com
53% of visits to MOBILE sites are abandoned
after 3 seconds
Source: Google’s Double Click
#wcjax - @irinablumenfeld netmagik.comsource: httparchive.org
AVERAGE PAGE - 3.8 MB
#wcjax - @irinablumenfeld netmagik.com
Etsy160kb 12%
bounce rate
wpostats.com
I M A G E F O R M A T S
JPEG PNG GIF SVG
#wcjax - @irinablumenfeld netmagik.com
• Most Popular • Great for Photos • Lossy
JPEG
#wcjax - @irinablumenfeld netmagik.com
• DO NOT USE! • Big in size • Use PNG instead
GIF
#wcjax - @irinablumenfeld netmagik.com
• Great for Logos • Transparency • PNG-8 vs
PNG-24
PNG
#wcjax - @irinablumenfeld netmagik.com
• Vector graphics • Small in size • Transparency • Can be used
inline in HTML
SVG
#wcjax - @irinablumenfeld netmagik.com
S C A L E / R E S I Z E
• Photoshop • Imsanity WordPress Plugin
3200 px 800 px
#wcjax - @irinablumenfeld netmagik.com
S A V E F O R W E B
Baseline JPEG Example
#wcjax - @irinablumenfeld netmagik.com
S A V E F O R W E B
Progressive JPEG Example
#wcjax - @irinablumenfeld netmagik.com
O P T I M I Z E / C O M P R E S S
Lossy vs Lossless
#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
#wcjax - @irinablumenfeld netmagik.com
E X A M P L E
Original Optimized
Source: unsplash.com
#wcjax - @irinablumenfeld netmagik.com
E X A M P L E
Original - High Resolution4951 x 3301 px
3.9 Mb
1. Resize / Save for Web1600 x 1067 px
338 Kb
2. Optimize (tinypng.com)1600 x 1067 px 207 Kb ( -40% )
#wcjax - @irinablumenfeld netmagik.com
E X A M P L E
Original - 3.9 Mb Optimized - 207 Kb
Source: unsplash.com
#wcjax - @irinablumenfeld netmagik.com
T E S T
• gtmetrix.com • tools.pingdom.com/fpt • webpagetest.org
#wcjax - @irinablumenfeld netmagik.com
G T M E T R I X . C O M
#wcjax - @irinablumenfeld netmagik.com
W E B PA G E T E S T. O R G
#wcjax - @irinablumenfeld netmagik.com
W E B PA G E T E S T. O R G
#wcjax - @irinablumenfeld netmagik.com
T H A N K Y O U
Slides: netmagik.com/wordcamp-jacksonville-2018
Twitter: @irinablumenfeld
E-Mail: [email protected]