discord · stevenpetryk · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
@@ -48,7 +48,7 @@ Something that requires warning here
 
 Currently the following types are available: `info`, `warn`, `danger` and `preview`
 
-![Available alert types](static/images/alerts.png)
+![Available alert types](static/images/alerts.webp)
 
 ### MDX Components
 
@@ -68,7 +68,7 @@ Available options for `icon`:
 
 ###### Example
 
-![Collapsible MDX Component with the list icon](static/images/mdx-collapsible.png)
+![Collapsible MDX Component with the list icon](static/images/mdx-collapsible.webp)
 
 ```markdown
 <Collapsible title="Title" description="Description text" icon="list">
@@ -82,7 +82,7 @@ Buttons are simply... clickable buttons. They take `href` and `color` as argumen
 
 ###### Example
 
-![Button MDX Component](static/images/mdx-button.png)
+![Button MDX Component](static/images/mdx-button.webp)
 
 ```markdown
 <LinkButton to="https://discord.com/developers/docs/getting-started" color="brand" text="click the button!" />
@@ -94,7 +94,7 @@ Cards let you display links in a card format. They accept two arguments, `title`
 
 ###### Example
 
-![Card MDX Component](static/images/mdx-card.png)
+![Card MDX Component](static/images/mdx-card.webp)
 
 ```markdown
 <Card title="Card Title" link="https://discord.com/developers/docs/getting-started">

@@ -16,7 +16,7 @@ It assumes an understanding of [JavaScript](https://developer.mozilla.org/en-US/
 
 <Collapsible title="What we'll be building" icon="view">
 
-![Building Your First Activity Tutorial](images/activities/tutorial-hero.png)
+![Building Your First Activity Tutorial](images/activities/tutorial-hero.webp)
 
 </Collapsible>
 
@@ -145,7 +145,7 @@ You can learn more about the OAuth flow and redirect URIs in the [OAuth2 documen
 
 Click on **OAuth2** on the sidebar in your app's settings. Under **Redirects**, enter `https://127.0.0.1` as a placeholder value then click **Save Changes**.
 
-![Redirect URI in Activity Settings](images/activities/oauth2-redirect.png)
+![Redirect URI in Activity Settings](images/activities/oauth2-redirect.webp)
 
 ### Fetch Your OAuth2 Credentials
 
@@ -310,7 +310,7 @@ Because Activities are in a sandbox enviornment and go through the Discord proxy
 
 Back in your app's settings, click on the **URL Mappings** page under **Activities** on the left-hand sidebar. Enter the URL you generated from `cloudflared` in the previous step.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 | PREFIX | TARGET                                  |
 |--------|-----------------------------------------|
@@ -324,7 +324,7 @@ Next, we'll need to enable Activities for your app. On the left hand sidebar und
 
 Find the first checkbox, labeled `Enable Activities`. Turn it on 🎉
 
-![Enabling Activities in Settings](images/activities/enable-activities.png)
+![Enabling Activities in Settings](images/activities/enable-activities.webp)
 
 #### Default Entry Point Command
 
@@ -341,7 +341,7 @@ Navigate to your Discord test server and, in any voice and or text channel, open
 
 Clicking on your app will launch your locally running app from inside Discord!
 
-![Running your activity](images/activities/start-activity.png)
+![Running your activity](images/activities/start-activity.webp)
 
 :::info
 **Customizing your Activity**
@@ -541,7 +541,7 @@ document.querySelector('#app').innerHTML = `
 
 Now if we relaunch our app, we'll be prompted to authorize with Discord using the `identify`, `guilds`, and `applications.commands` scopes.
 
-![Prompt to authorize Activity](images/activities/tutorial-auth.png)
+![Prompt to authorize Activity](images/activities/tutorial-auth.webp)
 
 :::warn
 **Safe storage of tokens**
@@ -606,7 +606,7 @@ setupDiscordSdk().then(() => {
 
 If you close and rejoin the Activity, you should now see the name of the current channel.
 
-![Discord Activities](images/activities/tutorial-channel-name.png)
+![Discord Activities](images/activities/tutorial-channel-name.webp)
 
 <Collapsible title="Step 6 Checkpoint" icon="list" open>
 
@@ -680,7 +680,7 @@ setupDiscordSdk().then(() => {
 
 If we relaunch our Activity, we will see the current server's avatar render in our Activity.
 
-![Discord Activities](images/activities/tutorial-hero.png)
+![Discord Activities](images/activities/tutorial-hero.webp)
 
 <Collapsible title="Step 7 Checkpoint" icon="list" open>
 

@@ -49,7 +49,7 @@ When in an Activity with others, make the actions and presence of the others vis
     - If a user has customized their server nickname or avatar, use their server nickname or avatar in game.
     - Show when a user is speaking in the voice call, or whether they're active or inactive.
 
-![Speech bubbles in Bobble League](images/activities/bobble-bash.png)
+![Speech bubbles in Bobble League](images/activities/bobble-bash.webp)
 
 
 ### Respect user privacy
@@ -67,7 +67,7 @@ Make your app fast, easy to join, and maximize fun to launch a crowd favorite.
 - Surprise and delight is about caring about the small details of how a person experiences your work.
 - Put the right emotion in when they least expect it to deliver the magic.
 
-![Bobble League](images/activities/bobble-league.png)
+![Bobble League](images/activities/bobble-league.webp)
 
 ### Keep load times as low as possible
 - This allows for easier drop-in drop-out behavior for the large portion of mobile users on Discord.
@@ -80,7 +80,7 @@ Make your app fast, easy to join, and maximize fun to launch a crowd favorite.
 - Activities are frictionless to join and easy to discover, so you can expect that users will join mid-experience. Give those users something to do, even if it's just letting them spectate until they can join without being disruptive. In the same vein, users can leave without notice or become afk (away from keyboard). Handle these cases gracefully.
 - Create a case for users who have joined a call but have not yet started playing or engaging. Allow these users to "spectate" other users who are playing. This can also be helpful for Activities that have an ideal number in mind for play.
 
-![Support drop-in, drop-out behavior in your Activity](images/activities/eights.png)
+![Support drop-in, drop-out behavior in your Activity](images/activities/eights.webp)
 
 ### Make your app as available as possible
 
@@ -105,7 +105,7 @@ Discord is a social platform where users talk to each other. Sharing and invites
     - Share photos or GIFs that capture moments of fun and memorable, or something to brag about. Don't make things shareable just to feature the activity.
     - Sharing a high score alone may not be very engaging, but sharing a really good move made in a game, or a collaborative drawing that creates a memory is a conversation starter and may make others want to join in on the fun.
 
-![Shared Moment from Chess in the Park](images/activities/chess-victory.png)
+![Shared Moment from Chess in the Park](images/activities/chess-victory.webp)
 
 #### Activities in Text Channels
 - The Activity user interface, copy and user flows should not rely on people in voice to explain, organize, clarify, or instruct about how the activity works. 

@@ -140,7 +140,7 @@ Deleting is irreversible and immediate. Ensure that your link isn't in active us
 
 #### User Experience
 
-![custom-link-embed](images/activities/custom-link-embed.png)
+![custom-link-embed](images/activities/custom-link-embed.webp)
 
 Users will see an embed with your information displayed. Clicking "Play" opens the activity and passes through the `custom_id` you've set. A `referrer_id` will be present for links shared on Discord.
 

@@ -34,7 +34,7 @@ discordSdk.commands.setOrientationLockState({
 
 It's also possible to configure an application with a default orientation lock state via the Developer Portal. Using this method, the Discord app will apply the orientation lock when launching the application before the SDK has been initialized. This can create a smoother application launch flow where the application starts in the correct orientation rather than switching to the correct orientation after some delay after the application requests an orientation lock via the SDK. The Developer Portal supports setting a different default orientation lock states for phones versus tablets.
 
-![default-orientation-lock-state](images/activities/default_orientation_lock_state.png)
+![default-orientation-lock-state](images/activities/default_orientation_lock_state.webp)
 
 #### Subscribing to Screen Orientation Updates
 

@@ -41,7 +41,7 @@ https://funky-jogging-bunny.trycloudflare.com
 
 In the Discord Developer Portal, update the Application URL mapping for `/` url to `funky-jogging-bunny.trycloudflare.com` to match your network tunnel address and save your changes.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 :::warn
 If you do not own the URL that you are using to host the application (i.e. ngrok's free tier), someone else could claim that domain and host a malicious site in its place. Please be aware of these risks, and if you have to use a domain you do not own, be sure to reset your URL mapping when you are done using the tunnel.
@@ -59,7 +59,7 @@ The flow for setting up your production application is very similar:
 4. Follow the instructions for [Launching your Application from the Discord Client](/docs/activities/development-guides/local-development#launch-your-application-from-the-discord-client). Application URL Override should not be enabled.
 
 This application now uses the same configuration it will use once it is fully published ✨.
-![application-test-mode-prod](images/activities/application-test-mode-prod.gif)
+![application-test-mode-prod](images/activities/application-test-mode-prod.webp)
 
 
 ---
@@ -96,7 +96,7 @@ Because your application is "sandboxed", it will be unable to make network reque
 
 To add or modify your application's URL mappings, click on `Activities -> URL Mappings` and set the prefix and target values for each mapping as needed.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 #### Prefix/Target formatting rules
 
@@ -108,10 +108,10 @@ To add or modify your application's URL mappings, click on `Activities -> URL Ma
 - Targets must point to a directory; setting a target to a file (e.g. `example.com/index.html`) is unsupported and may lead to unexpected behavior.
 - Because of how URL globbing works, if you have multiple prefix urls with the same initial path, you must place the shortest of the prefix paths last in order for each url mapping to be reachable. For example, if you have `/foo` and `/foo/bar`, you must place the url `/foo/bar` before `/foo` or else the mapping for `/foo/bar` will never be reached.
 
-| ✅ DO                                                        | ❌ DON'T                                                         |
-|-------------------------------------------------------------|-----------------------------------------------------------------|
-| Requests mapped correctly                                   | Requests to /foo/bar will incorrectly be sent to `foo.com`      |
-| ![url-mapping-do.png](images/activities/url-mapping-do.png) | ![url-mapping-dont.png](images/activities/url-mapping-dont.png) |
+| ✅ DO                                                         | ❌ DON'T                                                          |
+|--------------------------------------------------------------|------------------------------------------------------------------|
+| Requests mapped correctly                                    | Requests to /foo/bar will incorrectly be sent to `foo.com`       |
+| ![url-mapping-do.png](images/activities/url-mapping-do.webp) | ![url-mapping-dont.png](images/activities/url-mapping-dont.webp) |
 
 #### Exceptions
 
@@ -161,7 +161,7 @@ The first section of Debug Logs are not your application logs but Discord specif
 
 When you scroll down the page, your application logs should be visible.
 
-![debug-logs-filtering](images/activities/debug-logs-filtering.gif)
+![debug-logs-filtering](images/activities/debug-logs-filtering.webp)
 
 #### Sharing Application Logs from Mobile
 

@@ -15,7 +15,7 @@ By default, your Activity will be launchable on web/desktop. To enable or disabl
 - Select `Activities` -> `Settings` in the left-side of the developer portal, or visit `https://discord.com/developers/<your app id>/embedded/settings`
 - From check the appropriate checkboxes in the developer portal, and save your changes
 
-![supported-platforms](images/activities/supported-platforms.png)
+![supported-platforms](images/activities/supported-platforms.webp)
 
 ---
 

@@ -10,7 +10,7 @@ sidebar_label: Multiplayer Experience
 
 When a user clicks "Join Application", they expect to enter the same application that their friends are participating in. Whether the application is a shared drawing canvas, board game, collaborative playlist, or first-person shooter; the two users should have access to the same shared data. In this documentation, we refer to this shared data as an **application instance**.
 
-![join-application](images/activities/join-application.png)
+![join-application](images/activities/join-application.webp)
 
 The Embedded App SDK allows your app to talk bidirectionally with the Discord Client. The `instanceId` is necessary for your application, as well as Discord, to understand which unique instance of an application it is talking to.
 
@@ -151,4 +151,4 @@ curl https://discord.com/api/applications/1215413995645968394/activity-instances
 With this API, the activity's backend can verify that a client is in fact in an instance of that activity before allowing the client to participate in any meaningful gameplay. How an activity implements "session verification" is left to the developer's discretion. The solution can be as granular as gating specific features or as binary as not returning the activity HTML except for valid sessions.
 
 In the below flow diagram, we show how the server can deliver the activity website, only for valid users in a valid activity instance:
-![application-test-mode-prod](images/activities/activity-instance-validation.jpg)
+![application-test-mode-prod](images/activities/activity-instance-validation.webp)
@@ -25,7 +25,7 @@ discordSdk.commands.openExternalLink({
 
 #### User Experience
 
-![external-link-modal](images/activities/external-link-modal.png)
+![external-link-modal](images/activities/external-link-modal.webp)
 
 Users will see a modal inside the Discord app notifying them whether or not they want to proceed. By clicking **_Trust this Domain_**, users will not see a modal for that specific domain again.
 
@@ -60,7 +60,7 @@ try {
 
 User Experience
 
-![Invite Dialog UI](images/activities/invite-dialog.png)
+![Invite Dialog UI](images/activities/invite-dialog.webp)
 
 Users will see a modal inside the Discord app allowing them to send an invite to a channel, friend, or copy an invite link to share manually.
 
@@ -113,7 +113,7 @@ await discordSdk.commands.openShareMomentDialog({mediaUrl});
 
 User Experience
 
-![share-moment-dialog](images/activities/share-moment-dialog-example.png)
+![share-moment-dialog](images/activities/share-moment-dialog-example.webp)
 
 ---
 
@@ -181,4 +181,4 @@ console.log(`Hardware Acceleration is ${enabled === true ? 'enabled' : 'disabled
 
 #### User Experience
 
-![encourage-hardware-acceleration-modal](images/activities/encourage-hardware-acceleration-modal.png)
+![encourage-hardware-acceleration-modal](images/activities/encourage-hardware-acceleration-modal.webp)
@@ -4,7 +4,7 @@ sidebar_label: Overview
 
 # Overview of Activities
 
-![Building Discord Activities](images/activities/activities-hero.png)
+![Building Discord Activities](images/activities/activities-hero.webp)
 
 **Activities** are multiplayer games and social experiences that can be launched in Discord. Activities can integrate with Discord features like user identity, voice and chat, profile data like Rich Presence, and native monetization.
 

@@ -7,7 +7,7 @@ showTOC: false
 
 Components allow you to add interactive elements to modals and the messages your app sends. They're accessible, customizable, and easy to use.
 
-![](images/components/hero.png)
+![](images/components/hero.webp)
 
 Discord apps support three types of message components: layout components, content components, and interactive components. Each type of component has its own purpose and use cases.