discord · stevenpetryk · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025
@@ -45,7 +45,7 @@ For example:
 > Something that requires warning here
 ```
 
-![Alert options](images/alerts.png)
+![Alert options](images/alerts.webp)
 
 ### MDX Components
 
@@ -64,7 +64,7 @@ Available options for `icon`:
 
 ###### Example
 
-![Collapsible MDX Component with the list icon](images/mdx-collapsible.png)
+![Collapsible MDX Component with the list icon](images/mdx-collapsible.webp)
 
 ```markdown
 <Collapsible title="Title" description="Description text" icon="list">
@@ -78,7 +78,7 @@ Buttons are simply... clickable buttons. They take `href` and `color` as argumen
 
 ###### Example
 
-![Button MDX Component](images/mdx-button.png)
+![Button MDX Component](images/mdx-button.webp)
 
 ```markdown
 <LinkButton to="https://discord.com/developers/docs/getting-started" color="brand">click the button!</LinkButton>
@@ -90,7 +90,7 @@ Cards let you display links in a card format. They accept two arguments, `title`
 
 ###### Example
 
-![Card MDX Component](images/mdx-card.png)
+![Card MDX Component](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](activities/tutorial-hero.png)
+![Building Your First Activity Tutorial](activities/tutorial-hero.webp)
 
 </Collapsible>
 
@@ -142,7 +142,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](activities/oauth2-redirect.png)
+![Redirect URI in Activity Settings](activities/oauth2-redirect.webp)
 
 ### Fetch Your OAuth2 Credentials
 
@@ -297,7 +297,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](activities/url-mapping-tutorial.webp)
 
 | PREFIX | TARGET                                  |
 |--------|-----------------------------------------|
@@ -311,7 +311,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](activities/enable-activities.png)
+![Enabling Activities in Settings](activities/enable-activities.webp)
 
 #### Default Entry Point Command
 
@@ -328,7 +328,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](activities/start-activity.png)
+![Running your activity](activities/start-activity.webp)
 
 > info
 > **Customizing your Activity** <br/> If you'd like to set images for your Activity, you can learn how to do that [here](#DOCS_ACTIVITIES_DEVELOPMENT_GUIDES/setting-up-activity-metadata).
@@ -529,7 +529,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](activities/tutorial-auth.png)
+![Prompt to authorize Activity](activities/tutorial-auth.webp)
 
 > warn
 > **Safe storage of tokens**<br />
@@ -592,7 +592,7 @@ setupDiscordSdk().then(() => {
 
 If you close and rejoin the Activity, you should now see the name of the current channel.
 
-![Discord Activities](activities/tutorial-channel-name.png)
+![Discord Activities](activities/tutorial-channel-name.webp)
 
 <Collapsible title="Step 6 Checkpoint" icon="list" open>
 
@@ -665,7 +665,7 @@ setupDiscordSdk().then(() => {
 
 If we relaunch our Activity, we will see the current server's avatar render in our Activity.
 
-![Discord Activities](activities/tutorial-hero.png)
+![Discord Activities](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](activities/bobble-bash.png)
+![Speech bubbles in Bobble League](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](activities/bobble-league.png)
+![Bobble League](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](activities/eights.png)
+![Support drop-in, drop-out behavior in your Activity](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](activities/chess-victory.png)
+![Shared Moment from Chess in the Park](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. 

@@ -164,7 +164,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](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.
@@ -218,7 +218,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](activities/url-mapping-tutorial.webp)
 
 #### Prefix/Target formatting rules
 
@@ -233,7 +233,7 @@ To add or modify your application's URL mappings, click on `Activities -> URL Ma
 | ✅ DO                                                 | ❌ DON'T                                                    |
 |------------------------------------------------------|------------------------------------------------------------|
 | Requests mapped correctly                            | Requests to /foo/bar will incorrectly be sent to `foo.com` |
-| ![url-mapping-do.png](activities/url-mapping-do.png) | ![url-mapping-dont.png](activities/url-mapping-dont.png)   |
+| ![url-mapping-do.png](activities/url-mapping-do.webp) | ![url-mapping-dont.png](activities/url-mapping-dont.png)   |
 
 #### Exceptions
 
@@ -338,7 +338,7 @@ discordSdk.commands.openExternalLink({
 
 #### User Experience
 
-![external-link-modal](activities/external-link-modal.png)
+![external-link-modal](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.
 
@@ -373,7 +373,7 @@ try {
 
 User Experience
 
-![Invite Dialog UI](activities/invite-dialog.png)
+![Invite Dialog UI](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.
 
@@ -426,7 +426,7 @@ await discordSdk.commands.openShareMomentDialog({mediaUrl});
 
 User Experience
 
-![share-moment-dialog](activities/share-moment-dialog-example.png)
+![share-moment-dialog](activities/share-moment-dialog-example.webp)
 
 ---
 
@@ -494,7 +494,7 @@ console.log(`Hardware Acceleration is ${enabled === true ? 'enabled' : 'disabled
 
 #### User Experience
 
-![encourage-hardware-acceleration-modal](activities/encourage-hardware-acceleration-modal.png)
+![encourage-hardware-acceleration-modal](activities/encourage-hardware-acceleration-modal.webp)
 
 
 ---
@@ -508,7 +508,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](activities/supported-platforms.png)
+![supported-platforms](activities/supported-platforms.webp)
 
 ---
 
@@ -613,7 +613,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](activities/default_orientation_lock_state.png)
+![default-orientation-lock-state](activities/default_orientation_lock_state.webp)
 
 #### Subscribing to Screen Orientation Updates
 
@@ -764,7 +764,7 @@ Rest assured: other activities will not be able to make requests with your activ
 
 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](activities/join-application.png)
+![join-application](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.
 
@@ -999,7 +999,7 @@ 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](activities/activity-instance-validation.jpg)
+![application-test-mode-prod](activities/activity-instance-validation.webp)
 
 ---
 

@@ -4,7 +4,7 @@ sidebar_label: Overview
 
 # Overview of Activities
 
-![Building Discord Activities](activities/activities-hero.png)
+![Building Discord Activities](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.
 

@@ -70,7 +70,7 @@ If a command-level configuration does not exist for the given context, the syste
 
 Below is a simplified flowchart that illustrates how permissions will be applied by the Discord client after the new changes take effect.
 
-![Flowchart with an overview of the new permissions configurations logic](new-permissions-flowchart.svg)
+![Flowchart with an overview of the new permissions configurations logic](new-permissions-flowchart.webp)
 
 #### 2. `APPLICATION_COMMAND_PERMISSIONS_V2` Guild Feature
 

@@ -232,11 +232,11 @@ You're ready to go! Check out the rest of the documentation for more info on how
 In your project folder, you'll want to make something like a "discord-files" folder, for organization. In that folder, copy all the `.h` and `.cpp` files from the zip.
 You want to include all the header and source files respectively in your project
 
-![Correct Files](cpp-files-sdk.png)
+![Correct Files](cpp-files-sdk.webp)
 
 In your project settings, you'll want to include the relevant library (e.g. `discord_game_sdk.dll.lib`) as an additional dependency.
 
-![Linked Library](lib-linked-sdk.png)
+![Linked Library](lib-linked-sdk.webp)
 
 - From there, you should be able to `#include "discord-files/discord.h"`, or whatever the path to that header file is, and have access to the code.
 </Collapsible>
@@ -1274,7 +1274,7 @@ Opens the overlay widget for voice settings for the currently connected applicat
 
 <Collapsible title="Screenshot of the Voice Settings modal for an application" icon="view">
 
-![Screenshot of the Voice Settings modal for an application](game-overlay-sdk-voice-settings.png)
+![Screenshot of the Voice Settings modal for an application](game-overlay-sdk-voice-settings.webp)
 </Collapsible>
 
 Returns a `Discord.Result` via callback.

@@ -12,7 +12,7 @@ Download the Discord word-mark assets [discord.com/branding](https://discord.com
 
 Please do not edit, change, distort, recolor, or reconfigure the Discord logo.
 
-![Discord Logo](social-sdk/design-guidelines/Brand-02.png)
+![Discord Logo](social-sdk/design-guidelines/Brand-02.webp)
 
 ## Buttons
 
@@ -26,15 +26,15 @@ The Flexible buttons are intended to be restyled to match the game's aesthetic (
 
 These pre-styled buttons leverage colors vetted by our Design Systems team to pass contrast ratios across different backgrounds.
 
-![Brand Buttons](social-sdk/design-guidelines/Brand-03.png)
+![Brand Buttons](social-sdk/design-guidelines/Brand-03.webp)
 
 ## Spacing
 
 Ensure that there is adequate spacing between button text and the Discord logo as well as the left/right edges of the button.
 
 When using the Flexible button styling, ensure that your typeface's baseline and x-height are aligned to the Discord logo.
 
-![Brand Spacing](social-sdk/design-guidelines/Brand-04.png)
+![Brand Spacing](social-sdk/design-guidelines/Brand-04.webp)
 
 ## Resources 
 

@@ -16,7 +16,7 @@ Discord's sign-in button is presented as the **primary option** to log-in for th
 
 Please use the [**Blurple Button**](#DOCS_DISCORD_SOCIAL_SDK_DESIGN_GUIDELINES_BRANDING_GUIDELINES/buttons) button styling for the sign-in connection point.
 
-![Signing In](social-sdk/design-guidelines/ConnectionPoints-03.png)
+![Signing In](social-sdk/design-guidelines/ConnectionPoints-03.webp)
 
 ## Friends list
 
@@ -26,15 +26,15 @@ Select your preferred _button-styling_ for the friends list connection point (se
 
 After the player connects their account, the connection point is no longer visible.
 
-![Friends List](social-sdk/design-guidelines/ConnectionPoints-04.png)
+![Friends List](social-sdk/design-guidelines/ConnectionPoints-04.webp)
 
 ## Content Guidelines
 
 Please use the strings shown here within the relevant contexts. 
 
 These connection point strings should be consistent across all games that use the Discord Social SDK to help the user build recognition, trust, and understanding when taking this action.
 
-![Content Guidelines](social-sdk/design-guidelines/ConnectionPoints-05.png)
+![Content Guidelines](social-sdk/design-guidelines/ConnectionPoints-05.webp)
 
 ---
 

@@ -14,7 +14,7 @@ Players expect a consistent Discord social experience across devices—whether o
 
 Console players **will need a secondary device** to experience the full benefits of the Discord Social SDK.
 
-![Connect on console](social-sdk/design-guidelines/Consoles-02.jpg)
+![Connect on console](social-sdk/design-guidelines/Consoles-02.webp)
 
 ## Connect to Discord on console 
 
@@ -24,25 +24,25 @@ Users will need to use a mobile device or computer in order to avoid the clunky
 
 A player without an existing Discord account can create one easily on the web.
 
-![Connect on console](social-sdk/design-guidelines/Consoles-03.jpg)
+![Connect on console](social-sdk/design-guidelines/Consoles-03.webp)
 
 Users can skip the device code screen by scanning the QR code with their mobile camera. They will be prompted to authorize the game. If the Discord app is not detected upon scanning, users are prompted to sign in and connect via the web browser. 
 
 If a player does not wish to use the QR scan, they will need to go to discord.com/activate to enter the 8-digit code. 
 
-![connecting with your phone](social-sdk/design-guidelines/Consoles-04.jpg)
+![connecting with your phone](social-sdk/design-guidelines/Consoles-04.webp)
 
 ## Chatting on console 
 Game chat will be available for games who support the feature on consoles. However, <u>unsupported rich media</u> from Discord (i.e. attachments, polls, voice messages, etc.) should not include a clickable link icon. Similar to the auth flow, we do not want to encourage players to visit Discord in the console web browser—they should use secondary devices to view this content. 
 
-![chat on console](social-sdk/design-guidelines/Consoles-05.jpg)
+![chat on console](social-sdk/design-guidelines/Consoles-05.webp)
 
 
 ## Friends list on console
 
 Please leverage the same [friends list guidelines](#DOCS_DISCORD_SOCIAL_SDK_DESIGN_GUIDELINES_UNIFIED_FRIENDS_LIST) previously documented in the playbook. There are no notable differences in the friends list on console in comparison to other devices. However, consoles do not support hover interactions so there needs to be console-friendly way for players to access secondary information (such as alternate identities) about friends in the list. 
 
-![chat on console](social-sdk/design-guidelines/Consoles-06.jpg)
+![chat on console](social-sdk/design-guidelines/Consoles-06.webp)
 
 ---