Image Optimization - Tutorial

[westnz]

https://user-images.githubusercontent.com/89751452/181667246-05766320-c265-4ab4-a203-e756f934721b.mp4

[westnz]

Kudos to @courtney-pk for providing most of the resources and ideas for this tutorial. Her Online Workshop was the inspiration.

[westnz]

Review:

• Check sound at 2:22
• 2:40 slide changes too fast
• 2:43 black screen
• Unsure why, but flashes appear in some parts of the video. Need to see why that happened and fix.
• 3:44 add transition + 4:02
• 5:01 find a different transition
• 5:27 add a red box/annotation around the plugin
• 7:42 + 8:16 don't transition to the next slide so fast

[westnz]

Published: https://learn.wordpress.org/tutorial/image-optimization/

[ironnysh]

Hi @westnz, as discussed, here are a few topics that could use a refresh :-)

File formats (at ~2:03)

1. WEBP and AVIF are missing
2. Suggestion: recommend either of these for all non-vectorized assets (including animations)
   • Suggestion: recommend avoiding GIFs for accessibility and performance (see some info here)

Plugins (at ~5:10)

• Suggestion: For new uploads, recommend Modern Image Formats by the Performance team (AVIF support coming soon/shipped, hopefully also PNG). There’s also Performance Lab (also by the Performance team) that includes a bunch of image optimization/loading options.
• EWWW Image Optimizer only supports AVIF in the premium version.
• Smush doesn’t seem to support AVIF at all. Only the pro version supports WEBP.

WordPress 5.4 added native support for lazy loading, and the Performance team is doing an impressive job with these “behind the scenes” aspects: Analyzing the Core Web Vitals performance impact of WordPress 6.3 in the field.

Web-based tools (at ~7:06)

• Suggestion: recommend/demonstrate Squoosh. It’s the only one that’s open-source, works locally, supports ALL image formats, and the best: provides a visual representation of the changes (you can adjust the settings)
• Is kraken.io still alive? :-)

How about browser-based editors instead of the three image editors mentioned at 7:46? Here are a few popular alternatives:

• Canva
• Pixlr Editor
• Photopea

[westnz]

Very helpful suggestions. Thank you, @ironnysh!

[westnz]

https://github.com/WordPress/Learn/assets/89751452/dd1d56d1-ed0a-428b-8b75-a7bfdb0c3513

[ironnysh]

Tutorial/Lessons Review Checklist

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

Fantastically fresh :-))

[westnz]

//published