1. 1
Common WordPress APIs:
Responsive Images
Jonathan Bossenger
Learn.WordPress.org

2. 2
👋🏽 Welcome!
As you join, let everyone know in the chat where you’re
joining us from…
Hello!
○ My name is Jonathan Bossenger
○ From Cape Town, South Africa
○ Developer educator at Automattic
○ Sponsored to work with the Training Team
○ jonathanbossenger.com

3. Learn.WordPress.org
Responsive Images
Jonathan Bossenger

4. Announcements
○ Welcome, and thanks to Tracy for co-hosting.
○ Please let me know if you can’t see this slide!
○ We are presenting in focus mode, but please feel free to enable your video.
○ You are welcome to ask questions.
○ You are welcome to post questions in the chat, or unmute to ask questions.

5. Announcements
○ Make sure your local install is ready
○ If I am going too fast, please let me know!
○ We will be posting this session to https://wordpress.tv/ afterwards.
○ For WordPress tutorials and courses please visit https://learn.wordpress.org/
○ For WordPress developer news and updates please visit
https://developer.wordpress.org/news/

6. Learning outcomes
○ What are responsive images?
○ What does the WordPress Responsive Images API do.
○ New functions and hooks that were added for the API.
○ Creating your own responsive images:
• Classic themes
• Block themes

7. Requirements
○ A default local WordPress install
○ A text editor
○ Twenty Twenty-One and Twenty Twenty-Three default themes

8. Let’s go!

9. Resources
○ https://developer.mozilla.org/en-
US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
○ https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-
responsive.html
○ https://developer.wordpress.org/apis/responsive-images/
○ https://make.wordpress.org/core/2015/09/30/responsive-images-merge-proposal/
○ https://www.codexworld.com/mobile-device-detection-in-php/