Image optimization 2 (#9529)

* feat: optimize images using Next Image

* feat: make relative path images work

* fix gitignore

* a more robust cwd for mdx-bundler

* feat: move /docs images next to importing mdx files

* feat: move platform-includes images next to importing mdx files

* fix: remove orphaned images

* fix image references and dedupe some images

* dedupe some more images

* fix: fix race condition during build time when reading image size 🤞

* remove unreferenced image

* move image under ./img

* move additional_data.png into a common include

* move attachments-access-denied.png into a common include

* move attachments-access.png into a common include

* move attachments-list-example.png into a common include

* move code-mappings-configure-modal.png into a common include

* move code-mappings-event-json.png into a common include

* move code-mappings-source-file.png into a common include

* move code-mappings-stacktrace.png into a common include

* move crons-alerts-example.png into a common include

* move debug-files-workflow.png into a common include

* move distributed-trace-in-sentry.png into a common include

* move viewhierarchy-example.png into a common include

* move viewhierarchy-list-example.png into a common include

* move viewhierarchy-list-example.png into a common include

* move tags.png into a common include

* move user_feedback_widget.png into a common include

* update image contributing docs

* fix web-vitals-concepts 404 bug

* use local perf-web-vitals.png image

.gitignore

@@ -93,3 +93,5 @@ public/page-data
 
 # tsbuildinfo file generated by CI
 tsconfig.tsbuildinfo
+
+public/mdx-images/*

docs/api/guides/create-auth-token.mdx

@@ -27,7 +27,7 @@ See our documentation on [authentication](/api/auth/) to learn more about the di
 
 1. Enter a name for your integration.
 
-![Sentry.io UX walkthrough of creating an internal integration.](/api/guides/create-internal-integration.gif)
+![Sentry.io UX walkthrough of creating an internal integration.](./img/create-internal-integration.gif)
 
 ## Create a API Authentication Token
 
@@ -39,6 +39,6 @@ See our documentation on [authentication](/api/auth/) to learn more about the di
 
 1. Scroll down to the bottom of the page and copy the generated token under "Tokens".
 
-![Sentry.io UX walkthrough of creating a token and setting it's permissions.](/api/guides/set-token-permissions.gif)
+![Sentry.io UX walkthrough of creating a token and setting it's permissions.](./img/set-token-permissions.gif)
 
 Keep your auth token around on your clipboard or in an environment variable to use in API calls.

docs/api/permissions.mdx

@@ -10,7 +10,7 @@ To set the scopes for an [integration token](/product/integrations/integration-p
 
 To set the scopes for an auth token, select the scopes from the dropdown when [creating an auth token](https://sentry.io/api/). These cannot be edited later.
 
-![](/product/accounts/auth-tokens/user-auth-token-create.png)
+![](./img/user-auth-token-create.png)
 
 If you're looking for information on membership roles please visit the
 [membership](/product/accounts/membership/) documentation.

docs/contributing/pages/images.mdx

@@ -3,31 +3,46 @@ title: Images
 noindex: true
 ---
 
-If you want to add images to your docs, you'll have to put them in the `public` folder. Make sure you reference them correctly in your .mdx files.
+If you want to add images to your docs, you can add them next to your `.mdx` files, under `./img` by convention.
+You don't have to follow a rigid folder structure as long as the relative path (starts with `./`) to the image is correct.
 
-## Folder Structure
+If an image is used in multiple places, it's best to put it in `includes/common-imgs`, reference it from there in a local `md[x]` file
+and then `Include` it in the target `mdx` files.
 
-All images must live in the [`public`](https://github.com/getsentry/sentry-docs/tree/master/public) folder in order to be processed correctly.
+Images can also be added to the `public` folder (but not recommended for docs images).
 
-The folder structure of `docs` is duplicated in `public` so that you can still use relative paths to reference images in your content files.
+<Note>
+  Every image that starts with `/` (instead of `./`) is considered to be in the `public` folder.
+</Note>
 
 ### Example
 
-For instance, the file, `docs/product/alerts/alert-types.mdx`, can reference the image, `public/product/alerts/issue-alert.png`, like so :
+- Local images:
+
+The file, `docs/product/alerts/alert-types.mdx`, can reference the local `./img/issue-alert.png` image like so :
 
 ```markdown {filename:docs/product/alerts/alert-types.mdx}
-![Issue alert](issue-alert.png)
+![Alert details ...](./img/alert-details-example.png)
+```
+
+- Images with multiple references:
+
+The image `docs/common-imgs/imgs/tags.png` is referenced in `docs/common-imgs/tags.md` as a local image:
+
+```markdown {filename:docs/common-imgs/tags.mdx}
+![Tags](./img/tags.png)
 ```
 
-Content files that live elsewhere (such as `/docs/platform/apple/index.mdx`) can still use the same image by referencing it with the full path (`/public` does not need to be included), like so:
+which is then included in many other files:
 
-```markdown {filename:/docs/platform/apple/index.mdx}
-![Issue alert](/product/alerts/issue-alert.png)
+```markdown {filename:docs/platforms/ruby/common/enriching-events/tags/index.mdx}
+<Include name="common-imgs/tags" />
 ```
 
+
 ## Image Optimization
 
-To save space and ensure consistency, we ask that all image files be compressed and cropped to the dimensions listed below. When adding an image, please makes sure that it's high-resolution and crisp and that text is big enough to read. 
+To save space and ensure consistency, we ask that all image files be compressed and cropped to the dimensions listed below. When adding an image, please makes sure that it's high-resolution and crisp and that text is big enough to read.
 
 ### Recommended Dimensions
 - If you want the image to take up the full width of the page, make it **1484 pixels** wide.

docs/platforms/android/configuration/app-not-respond.mdx

@@ -64,7 +64,7 @@ If [ApplicationExitInfo#getTraceInputStream](<https://developer.android.com/refe
 
 </Note>
 
-![ANR](/platforms/android/configuration/app-not-respond.png)
+![ANR](./img/app-not-respond.png)
 
 #### Historical ANRs
 
@@ -102,7 +102,7 @@ SentryAndroid.init(context) { options ->
 }
 ```
 
-![ANR Thread Dump](/platforms/android/configuration/app-not-respond-thread-dump.png)
+![ANR Thread Dump](./img/app-not-respond-thread-dump.png)
 
 ## ANR Root Cause Analysis
 
@@ -112,16 +112,16 @@ Sentry performs various root cause analyses to give you insights about why certa
 
 If an ANR is connected to one of the Performance Issues detected by Sentry (for example, [File I/O on Main Thread](/product/issues/issue-details/performance-issues/file-main-thread-io/) or [DB on Main Thread](/product/issues/issue-details/performance-issues/db-main-thread-io/)), the offending span will be linked to the ANR event, showing you exactly which slow operation is to blame.
 
-![ANR Root Cause File I/O](/platforms/android/configuration/anr-rootcause-fileio.png)
+![ANR Root Cause File I/O](./img/anr-rootcause-fileio.png)
 
 ### Common Patterns
 
 This detector looks at the stack trace of an ANR and tries to identify common pitfalls, such as accessing files, assets, or heavy resources on the main thread. If an offending stack frame is found, it'll be highlighted in the stack trace with some information about how to prevent this type of ANR:
 
-![ANR Root Cause Suspect Frame](/platforms/android/configuration/anr-rootcause-frame.png)
+![ANR Root Cause Suspect Frame](./img/anr-rootcause-frame.png)
 
 ### Deadlock Detection
 
 Sentry will try to detect deadlocks and point out potential causes. If, for example, the main thread is blocked by waiting on a lock object that's held by another thread, the suspect frame that's waiting on the lock will be highlighted. The stack trace of the offending thread that's holding the lock, as well as the offending frame of that thread will also be shown:
 
-![ANR Root Cause Deadlock](/platforms/android/configuration/anr-rootcause-deadlock.png)
+![ANR Root Cause Deadlock](./img/anr-rootcause-deadlock.png)

docs/platforms/android/data-management/debug-files/source-context/index.mdx

@@ -9,7 +9,7 @@ If Sentry has access to your application's source code, it can show snippets of
 For example, here's a stack trace from a .NET application. The source context contains
 the original C# source code of the application, with the location of the frame highlighted.
 
-![Screenshot of stack trace showing source context.](/platforms/android/data-management/debug-files/source-context/source-context-screenshot.png)
+![Screenshot of stack trace showing source context.](./img/source-context-screenshot.png)
 
 ### Source Bundles
 

docs/platforms/android/data-management/debug-files/upload/index.mdx

@@ -9,7 +9,7 @@ to upload them using `sentry-cli`. Depending on your workflow, you may want to
 upload as part of your build pipeline or when deploying and publishing your
 application:
 
-![](/platforms/android/data-management/debug-files/upload/debug-files-workflow.png)
+<Include name="common-imgs/debug-files-workflow" />
 
 <PlatformContent includePath="debug-files">
 

docs/platforms/android/enriching-events/attachments/index.mdx

@@ -49,19 +49,19 @@ Learn more about how attachments impact your [quota](/product/accounts/quotas/).
 
 To limit access to attachments, navigate to your organization's **General Settings**, then select the _Attachments Access_ dropdown to set appropriate access — any member of your organization, the organization billing owner, member, admin, manager, or owner.
 
-![Attachments Access](/platforms/android/enriching-events/attachments/attachments-access.png)
+<Include name="common-imgs/attachments-access" />
 
 By default, access is granted to all members when storage is enabled. If a member does not have access to the project, the ability to download an attachment is not available; the button will be greyed out in Sentry. The member may only view that an attachment is stored.
 
 ## Viewing Attachments
 
 Attachments display on the bottom of the **Issue Details** page for the event that is shown.
 
-![Attachments Access Denied](/platforms/android/enriching-events/attachments/attachments-access-denied.png)
+<Include name="common-imgs/attachments-access-denied" />
 
 Alternately, attachments also appear in the _Attachments_ tab on the **Issue Details** page, where you can view the _Type_ of attachment, as well as associated events. Click the Event ID to open the **Issue Details** of that specific event.
 
-![Attachments List Example](/platforms/android/enriching-events/attachments/attachments-list-example.png)
+<Include name="common-imgs/attachments-list-example" />
 
 ## Maximum Attachment Size
 

docs/platforms/android/enriching-events/context/index.mdx

@@ -5,7 +5,7 @@ description: "Custom contexts allow you to attach arbitrary data (strings, lists
 
 Custom contexts allow you to attach arbitrary data to an event. Often, this context is shared among any issue captured in its lifecycle. You cannot search these, but they are viewable on the issue page:
 
-![Custom contexts as viewed on the Additional Data section of an event](/platforms/android/enriching-events/context/additional_data.png)
+<Include name="common-imgs/additional_data" />
 
 <Note>
 

docs/platforms/android/enriching-events/screenshots/index.mdx

@@ -17,8 +17,8 @@ Because screenshots may contain <PlatformLink to="/data-management/sensitive-dat
 
 If one is available, you'll see a thumbnail of the screenshot when you click on a specific issue from the [**Issues**](https://demo.sentry.io/issues/) page.
 
-![Screenshot Thumbnail](/platforms/android/enriching-events/screenshots/screenshot-thumbnail.png)
+![Screenshot Thumbnail](./img/screenshot-thumbnail.png)
 
 Once you've clicked on the event ID of a specific issue, you'll be able to see an overview of all the attachments as well as associated events in the "Attachments" tab.
 
-![Screenshots List Example](/platforms/android/enriching-events/screenshots/screenshot-list-example.png)
+![Screenshots List Example](./img/screenshot-list-example.png)

docs/platforms/android/enriching-events/tags/index.mdx

@@ -25,4 +25,4 @@ Some tags are automatically set by Sentry. We strongly recommend against overwri
 
 Once you've started sending tagged data, you'll see it when logged in to sentry.io. There, you can view the filters within the sidebar on the Project page, summarized within an event, and on the Tags page for an aggregated event.
 
-![](/platforms/android/enriching-events/tags/tags.png)
+<Include name="common-imgs/tags" />

docs/platforms/android/enriching-events/viewhierarchy/index.mdx

@@ -105,8 +105,8 @@ plugins {
 
 View hierarchies appear in the "Attachments" tab, where you can view all attachments, as well as associated events. Click the event ID to open the [Issue Details](/product/issues/issue-details) page of that specific event.
 
-![Screenshots List Example](/platforms/android/enriching-events/viewhierarchy/viewhierarchy-list-example.png)
+<Include name="common-imgs/viewhierarchy-list-example" />
 
 On the **Issue Details** page, you can interact with the view hierarchy attachment in a section called "View Hierarchy". This section represents the state of your application at the time of an error event. There are three displays: a tree view, wireframe, and detailed view for a selected node. You can select nodes in either the tree or the wireframe to view the properties collected by the SDK. The SDK will report on the following keys for each node in the view: `alpha`, `visible`, `x`, `y`, `width`, `height`, `type`, and `identifier` if applicable, but there may be additional values specific to the SDK. This feature can be used as an exploratory tool to debug layout issues, visualize unnecessarily rendered content, or gain a better understanding of the relationship between views.
 
-![View Hierarchy Example](/platforms/android/enriching-events/viewhierarchy/viewhierarchy-example-android.png)
+![View Hierarchy Example](./img/viewhierarchy-example-android.png)

docs/platforms/android/integrations/file-io/index.mdx

@@ -105,7 +105,7 @@ class LyricsActivity : ComponentActivity() {
 
 To view the recorded transaction, log into [sentry.io](https://sentry.io) and open your project. Clicking **Performance** will open a page with transactions, where you can select the just recorded transaction with the name `Track Interaction`. The event will look similar to this:
 
-![File I/O performance instrumentation](/platforms/android/integrations/file-io/file-io-instrumentation.png)
+![File I/O performance instrumentation](./img/file-io-instrumentation.png)
 
 <Note>
 

docs/platforms/android/integrations/jetpack-compose/index.mdx

@@ -21,7 +21,7 @@ _(New in version 6.16.0)_
 
 With Jetpack Compose performance metrics the Sentry Android SDK can automatically measure the initial `composition` and `rendering` time as performance spans of your `@Composable` UI elements.
 
-![Jetpack Compose Performance Metrics](/platforms/android/integrations/jetpack-compose/jetpack-compose-performance-metrics.png)
+![Jetpack Compose Performance Metrics](./img/jetpack-compose-performance-metrics.png)
 
 <Note>
 
@@ -74,7 +74,7 @@ _(New in version 6.10.0)_
 
 The Sentry User Interactions feature for Jetpack Compose can detect click, scroll, and swipe gestures. For every gesture, the SDK can automatically collect breadcrumbs and launch transactions.
 
-![Jetpack Compose User Interactions](/platforms/android/integrations/jetpack-compose/jetpack-compose-user-interactions.png)
+![Jetpack Compose User Interactions](./img/jetpack-compose-user-interactions.png)
 
 ### Installation
 
@@ -144,7 +144,7 @@ If you want to customize the recorded breadcrumbs/transactions, you can skip to
 
 In this section, we get you up and running with Sentry's Compose Navigation Integration, so that it will automatically add a breadcrumb and start a transaction for each navigation event.
 
-![Jetpack Compose Navigation Breadcrumbs](/platforms/android/integrations/jetpack-compose/jetpack-compose-navigation.png)
+![Jetpack Compose Navigation Breadcrumbs](./img/jetpack-compose-navigation.png)
 
 ### Auto-Installation With the Sentry Android Gradle Plugin
 

docs/platforms/android/integrations/logcat/index.mdx

@@ -18,7 +18,7 @@ Supported in Sentry Android Gradle Plugin version `3.5.0` and above.
 The Sentry Logcat integration adds support for automatically reporting log calls above a minimum logging level as breadcrumbs.
 Any matching `android.Log.*` calls inside your app package are captured as breadcrumbs, including `android.Log.*` calls originating from bundled third party libraries.
 
-![Logcat Breadcrumbs](/platforms/android/integrations/logcat/logcat-breadcrumbs.png)
+![Logcat Breadcrumbs](./img/logcat-breadcrumbs.png)
 
 ## Installation With the Sentry Android Gradle Plugin
 

docs/platforms/android/integrations/room-and-sqlite/index.mdx

@@ -199,7 +199,7 @@ class EditActivity : ComponentActivity() {
 
 To view the recorded transaction, log into [sentry.io](https://sentry.io) and open your project. Clicking on **Performance** will open a page with transactions, where you can select the just recorded transaction with the name `Track Interaction`. The event will look similar to this:
 
-![Room and AndroidX SQLite performance instrumentation](/platforms/android/integrations/room-and-sqlite/room-sqlite-instrumentation.png)
+![Room and AndroidX SQLite performance instrumentation](./img/room-sqlite-instrumentation.png)
 
 <Note>
 

docs/platforms/android/usage/distributed-tracing/index.mdx

@@ -16,7 +16,7 @@ When an error or performance issue occurs, it can be challenging to pinpoint the
 
 Here's an example showing a distributed trace in Sentry:
 
-![A full distributed trace in Sentry](/platforms/android/usage/distributed-tracing/distributed-trace-in-sentry.png)
+<Include name="common-imgs/distributed-trace-in-sentry" />
 
 This distributed trace shows a Vue app's `pageload` making a request to a Python backend, which then calls the `/api` endpoint of a Ruby microservice.
 

docs/platforms/apple/common/data-management/debug-files/source-context/index.mdx

@@ -9,7 +9,7 @@ If Sentry has access to your application's source code, it can show snippets of
 For example, here's a stack trace from a .NET application. The source context contains
 the original C# source code of the application, with the location of the frame highlighted.
 
-![Screenshot of stack trace showing source context.](/platforms/apple/common/data-management/debug-files/source-context/source-context-screenshot.png)
+![Screenshot of stack trace showing source context.](./img/source-context-screenshot.png)
 
 ### Source Bundles
 

docs/platforms/apple/common/data-management/debug-files/upload/index.mdx

@@ -9,7 +9,7 @@ to upload them using `sentry-cli`. Depending on your workflow, you may want to
 upload as part of your build pipeline or when deploying and publishing your
 application:
 
-![](/platforms/apple/common/data-management/debug-files/upload/debug-files-workflow.png)
+<Include name="common-imgs/debug-files-workflow" />
 
 <PlatformContent includePath="debug-files">
 

docs/platforms/apple/common/enriching-events/attachments/index.mdx

@@ -53,19 +53,19 @@ Learn more about how attachments impact your [quota](/product/accounts/quotas/).
 
 To limit access to attachments, navigate to your organization's **General Settings**, then select the _Attachments Access_ dropdown to set appropriate access — any member of your organization, the organization billing owner, member, admin, manager, or owner.
 
-![Attachments Access](/platforms/apple/common/enriching-events/attachments/attachments-access.png)
+<Include name="common-imgs/attachments-access" />
 
 By default, access is granted to all members when storage is enabled. If a member does not have access to the project, the ability to download an attachment is not available; the button will be greyed out in Sentry. The member may only view that an attachment is stored.
 
 ## Viewing Attachments
 
 Attachments display on the bottom of the **Issue Details** page for the event that is shown.
 
-![Attachments Access Denied](/platforms/apple/common/enriching-events/attachments/attachments-access-denied.png)
+<Include name="common-imgs/attachments-access-denied" />
 
 Alternately, attachments also appear in the _Attachments_ tab on the **Issue Details** page, where you can view the _Type_ of attachment, as well as associated events. Click the Event ID to open the **Issue Details** of that specific event.
 
-![Attachments List Example](/platforms/apple/common/enriching-events/attachments/attachments-list-example.png)
+<Include name="common-imgs/attachments-list-example" />
 
 ## Maximum Attachment Size
 

docs/platforms/apple/common/enriching-events/context/index.mdx

@@ -5,7 +5,7 @@ description: "Custom contexts allow you to attach arbitrary data (strings, lists
 
 Custom contexts allow you to attach arbitrary data to an event. Often, this context is shared among any issue captured in its lifecycle. You cannot search these, but they are viewable on the issue page:
 
-![Custom contexts as viewed on the Additional Data section of an event](/platforms/apple/common/enriching-events/context/additional_data.png)
+<Include name="common-imgs/additional_data" />
 
 <Note>
 

docs/platforms/apple/common/enriching-events/screenshots/index.mdx

@@ -28,8 +28,8 @@ Because screenshots may contain <PlatformLink to="/data-management/sensitive-dat
 
 If one is available, you'll see a thumbnail of the screenshot when you click on a specific issue from the [**Issues**](https://demo.sentry.io/issues/) page.
 
-![Screenshot Thumbnail](/platforms/apple/common/enriching-events/screenshots/screenshot-thumbnail.png)
+![Screenshot Thumbnail](./img/screenshot-thumbnail.png)
 
 Once you've clicked on the event ID of a specific issue, you'll be able to see an overview of all the attachments as well as associated events in the "Attachments" tab.
 
-![Screenshots List Example](/platforms/apple/common/enriching-events/screenshots/screenshot-list-example.png)
+![Screenshots List Example](./img/screenshot-list-example.png)

docs/platforms/apple/common/enriching-events/tags/index.mdx

@@ -25,4 +25,4 @@ Some tags are automatically set by Sentry. We strongly recommend against overwri
 
 Once you've started sending tagged data, you'll see it when logged in to sentry.io. There, you can view the filters within the sidebar on the Project page, summarized within an event, and on the Tags page for an aggregated event.
 
-![](/platforms/apple/common/enriching-events/tags/tags.png)
+<Include name="common-imgs/tags" />