docs(browser-starfish): init resource image view docs (#8874)

* add docs

* add supported extensions

* Update src/docs/product/performance/resources.md

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>

* add note on unsupported relative path

* [getsentry/action-github-commit] Auto commit

* add example images

* update img

* update image

* Update resources.md

---------

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

src/docs/product/performance/resources.md

@@ -12,7 +12,7 @@ Starting with the [**Resources** page](#resources-page), you get a high-level ov
 
 ## Prerequisites and Limitations
 
-The resource pages are only available for frontend JavaScript projects with performance monitoring enabled. Currently only JavaScript, CSS and certain resources that are initiated by CSS (such as fonts), are supported.
+The resource pages are only available for frontend JavaScript projects with performance monitoring enabled. Currently only JavaScript, CSS, images, and certain resources that are initiated by CSS (such as fonts), are supported.
 
 For the best experience, we recommend enabling automatic instrumentation via the `BrowserTracing` integration for your frontend project to see resource performance data. This is supported for the following JavaScript platforms:
 
@@ -138,6 +138,20 @@ If you want to investigate a specific page, click on it to open a sidebar showin
 
 <div style="position: relative; padding-bottom: calc(50.829268292682926% + 41px); height: 0;"><iframe src="https://demo.arcade.software/D96Pu2LMLHddyVCn3BOd?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"></iframe></div>
 
+### Image Samples
+
+When viewing an image resource, the resource summary page will also show the 5 largest image samples. Sentry determines the span is an image if it has one of the following extensions: 'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'apng', 'avif'.
+
+If size information is not available, the samples will not be ordered in any particular order. If the images are publicly accessible and the 'Enable Images' project settings is enabled, then the actual images will be rendered in the UI.
+
+<Note>
+
+At the moment, relative resource span descriptions (ones that begin with '/') are not supported for the image preview. We are working on adding this soon! See https://github.com/getsentry/sentry/issues/63208
+
+</Note>
+
+![Example of Sample Images](./resource-sample-images.png)
+
 ## Sample List
 
 Click on a page to open its samples list. This side panel shows summary metrics (requests per minute, average duration, and time spent) for the resource in the specific page.