WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com...
Transcript of WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com...
![Page 1: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/1.jpg)
DON’T LET IMAGES WEIGH DOWN
YOUR SITE
WordCamp Jacksonville - 2018 IRINA BLUMENFELD
@irinablumenfeld #wcjax
![Page 3: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/3.jpg)
#wcjax - @irinablumenfeld netmagik.com
53% of visits to MOBILE sites are abandoned
after 3 seconds
Source: Google’s Double Click
![Page 4: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/4.jpg)
#wcjax - @irinablumenfeld netmagik.comsource: httparchive.org
AVERAGE PAGE - 3.8 MB
![Page 5: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/5.jpg)
#wcjax - @irinablumenfeld netmagik.com
Etsy160kb 12%
bounce rate
wpostats.com
![Page 7: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/7.jpg)
I M A G E F O R M A T S
JPEG PNG GIF SVG
![Page 8: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/8.jpg)
#wcjax - @irinablumenfeld netmagik.com
• Most Popular • Great for Photos • Lossy
JPEG
![Page 9: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/9.jpg)
#wcjax - @irinablumenfeld netmagik.com
• DO NOT USE! • Big in size • Use PNG instead
GIF
![Page 10: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/10.jpg)
#wcjax - @irinablumenfeld netmagik.com
• Great for Logos • Transparency • PNG-8 vs
PNG-24
PNG
![Page 11: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/11.jpg)
#wcjax - @irinablumenfeld netmagik.com
• Vector graphics • Small in size • Transparency • Can be used
inline in HTML
SVG
![Page 13: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/13.jpg)
#wcjax - @irinablumenfeld netmagik.com
S C A L E / R E S I Z E
• Photoshop • Imsanity WordPress Plugin
3200 px 800 px
![Page 14: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/14.jpg)
#wcjax - @irinablumenfeld netmagik.com
S A V E F O R W E B
Baseline JPEG Example
![Page 15: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/15.jpg)
#wcjax - @irinablumenfeld netmagik.com
S A V E F O R W E B
Progressive JPEG Example
![Page 16: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/16.jpg)
#wcjax - @irinablumenfeld netmagik.com
O P T I M I Z E / C O M P R E S S
Lossy vs Lossless
![Page 17: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/17.jpg)
#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
![Page 20: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/20.jpg)
#wcjax - @irinablumenfeld netmagik.com
E X A M P L E
Original Optimized
Source: unsplash.com
![Page 21: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/21.jpg)
#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% )
![Page 22: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/22.jpg)
#wcjax - @irinablumenfeld netmagik.com
E X A M P L E
Original - 3.9 Mb Optimized - 207 Kb
Source: unsplash.com
![Page 23: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/23.jpg)
#wcjax - @irinablumenfeld netmagik.com
T E S T
• gtmetrix.com • tools.pingdom.com/fpt • webpagetest.org
![Page 24: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/24.jpg)
#wcjax - @irinablumenfeld netmagik.com
G T M E T R I X . C O M
![Page 25: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/25.jpg)
#wcjax - @irinablumenfeld netmagik.com
W E B PA G E T E S T. O R G
![Page 26: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/26.jpg)
#wcjax - @irinablumenfeld netmagik.com
W E B PA G E T E S T. O R G
![Page 27: WEIGH DOWN YOUR SITE - 2018 WordCamp Jacksonville€¦ · #wcjax - @irinablumenfeld netmagik.com EXAMPLE Original - High Resolution 4951 x 3301 px 3.9 Mb 1. Resize / Save for Web](https://reader036.fdocuments.us/reader036/viewer/2022090608/605ec1a4ca0c3178fb6248d6/html5/thumbnails/27.jpg)
#wcjax - @irinablumenfeld netmagik.com
T H A N K Y O U
Slides: netmagik.com/wordcamp-jacksonville-2018
Twitter: @irinablumenfeld
E-Mail: [email protected]