Client-side media processing in WordPress

The WordPress media library currently relies on server-side processing for tasks like image resizing. This can result in strained server resources and a subpar user experience. Client-side processing provides a solution to enhance both performance and UX by leveraging the user’s browser capabilities and technologies such as WebAssembly. This presentation dives into the technical aspects of media handling in WordPress and demonstrates the exciting benefits of the new client-side processing approach. It sparks your imagination by showcasing how these powerful new capabilities revolutionize media management and pave the way for new use cases within WordPress core and beyond.

Transcript

1. Client-side media processing
3. “ ” The average WordPress user simply wants to be able to write without problems or interruption. WordPress Philosophy Source: wordpress.org/about/philosophy
4. Errors, timeouts, oh my!
5. Compress your images
6. Let WordPress help you
7. We take things that used to require advanced technical knowledge and make it accessible to everyone. Matt Mullenweg “ ” State of the Word, Madrid, 2023
8. Let the browser help you
9. WebAssembly
10. wasm-vips
11. Vips vs. ImageMagick
12. Smaller file sizes with vips
13. Server-side media processing
14. Client-side media processing
15. bit.ly/media-experiments
16. Showtime!
17. Regular upload
18. Image caption / alt text generation
19. HEIF / HEIC conversion
20. Upload from your phone
21. Temporary collaboration
22. Image compression
23. Bulk optimization
24. Smart thumbnails Original Default Smarter
25. Poster image generation
26. Poster image generation
27. Poster image generation PDF.js Canvas Display PDFs in the browser, by Mozilla. Paint video frames on a <canvas> element.
28. ffmpeg.wasm
29. Video compression
30. Animated GIFs
31. Image: Paul Bakaus
32. Animated GIFs
33. Media recording
34. Video subtitles
35. Proprietary + Confidential Challenges
36. Testing
37. Cross-origin isolation
38. Chrome, Edge Firefox, Safari
39. Open source licenses
41. What’s next
42. Gutenberg experiment
43. Compression & thumbnails Image format conversion Expansion to other media types Expansion to media library Roadmap
44. bit.ly/media-experiments
45. More features
46. Summary
47. Democratizing publishing
48. Performance UX Efficiency Smaller images help make your site load faster. Smoother upload process without shaking your head. Let the browser do the heavy lifting, not the server. Benefits at a glance
49. bit.ly/media-experiments
50. Thank you
51. pascalbirchler.com • @swissspidy Thank you
52. pascalbirchler.com • @swissspidy Thank you Quick Survey