-

1. image optimization
“doing your chores”

2. Why optimize anything?
Make the site fast
Make life my easy
Sites are slow to load because of their page weight
For our sites, images are the cause of slow down (well…..probably)
Image optimization the easiest, and most effective way to speed up your page.

3. I’m rob mcinnis
FE Developer
I work at iamota.com
robertjmcinnis@gmail.com

4. Google says,
Most consumers wait about 3 seconds for a website to load on a desktop or
laptop....and about 5 seconds on their mobile device.
Amazon found that if their pages slow down by 1 second, they lose $1.6 billion a
year.
Google uses page load time as a factor in their ranking algorithm.

5. Some general rules...
Don’t serve images that are unnecessarily large
Don’t use PNG’s when you don’t have to
GIFs (not animated)
@2x is overrated
Perceived Speed
Determine what’s important on the page
2MB total page weight

6. How to measure
Chrome Tools
WebPageTest www.webpagetest.org
Page Speed Insights http://developers.google.com/speed/pagespeed/insights/

10. Let’s compare optimized images...

11. Tools
Manual Image Manipulation
Photoshop
Gimp
Services / Apps
https://imageoptim.com/
https://tinypng.com/

12. Wordpress Tools
Image Optimization
https://wordpress.org/plugins/tiny-compress-images/
https://wordpress.org/plugins/imsanity/
https://wordpress.org/plugins/ewww-image-optimizer/
https://wordpress.org/plugins/simple-image-sizes/
Lazy Load:
https://wordpress.org/plugins/a3-lazy-load/
Advanced:
https://developer.wordpress.org/reference/functions/add_image_size/

13. This is what SUCCESS looks like.
….i know, super exciting….
Tiny Compress

14. Beware...
The Writer
The Designer
Animated GIFs
Plugins
Screenshot Shortcut
Destructive optimization

15. I’m done.