chore: use Astro Image

CONTRIBUTING.md

@@ -32,16 +32,6 @@ There are a couple of custom components in this project that you can use:
   <Include file="file.mdx" />
   ```
 
-- `Screenshot` - A component that displays a screenshot.
-
-```mdx
-import Screenshot from '~/components/Screenshot.astro';
-
-<Screenshot src="/localization-resources/mt_suggestions.png" alt="Localization Resources" />
-```
-
-The `Screenshot` component automatically resolves the path to the screenshot, so you don't need to specify the full or relative path.
-
 ## Icons
 
 You can use Starlight's [`Icon`](https://starlight.astro.build/guides/components/#icon) component. It provides some basic set of icons.
@@ -81,25 +71,24 @@ It's always better to use these icons instead of local, as they are already supp
 Put screenshots in the `src/assets/screenshots` directory according to the document location. You can then reference them in your MDX file like this:
 
 ```mdx
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import uploadFiles from "!/crowdin/getting-started/upload_files.png";
 
-<Screenshot src="/localization-resources/mt_suggestions.png" alt="Localization Resources" />
+<Image src={uploadFiles} alt="Upload Files" />
 ```
 
-It automatically resolves the path to the screenshot, so you don't need to specify the full or relative path. For the example above, the screenshot should be located in the `src/assets/screenshots/crowdin/localization-resources/mt_suggestions.png` path.
+The `!` is an alias for the `src/assets/screenshots` directory.
 
-For Crowdin Enterprise, just add the `enterprise` prop to the `Screenshot` component:
-
-```mdx
-<Screenshot src="/organization-management/fields_details.png" alt="Field" enterprise />
-```
-
-So it will display the screenshot from the `src/assets/screenshots/enterprise/organization-management/fields_details.png` path.
+This approach uses Astro's default `Image` component and takes advantage of its optimization and caching capabilities.
 
 ### Customizing screenshots
 
 You can specify your own classes to customize the image (e.g, `no-shadow`, `dialog`)
 
+```mdx
+<Image src={uploadFiles} alt="Upload Files" class="no-shadow" />
+```
+
 ## File-based/String-based content differentiation
 
 To differentiate between file-based and string-based content, you can use the `Tabs` component with the `syncKey` prop. This prop allows you to switch between tabs and keep the selected tab in sync across multiple components.

src/content/docs/crowdin/getting-started/for-managers.mdx

@@ -8,7 +8,14 @@ slug: for-managers
 import { CardGrid, LinkCard, Steps, Tabs, TabItem, Aside} from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
 import ReadMore from '~/components/ReadMore.astro';
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import uploadFiles from "!/crowdin/project-management/sources/upload_files.png";
+import uploadFilesSB from "!/crowdin/project-management/sources/upload_files_sb.png";
+import preTranslation from "!/crowdin/getting-started/pre_translation.png";
+import inviteDialog from "!/crowdin/getting-started/invite_dialog.png";
+import reportsGeneral from "!/crowdin/getting-started/reports_general.png";
+import projectSettingsExport from "!/crowdin/getting-started/project_settings_export.png";
+import screenshotsInEditor from "!/crowdin/project-management/screenshots_in_editor.png";
 
 > Crowdin is a localization management platform that helps companies, teams, and individuals stay agile when translating products like mobile, desktop & web apps, websites, games, help documentation, and more.
 
@@ -58,12 +65,12 @@ Once you've created the project, you can upload localizable files in a way that
   <TabItem label="File-based project">
     To upload translatable content in a file-based project, open your project and go to **Sources > Files**:
 
-    <Screenshot src="/getting-started/upload_files.png" alt="Upload files" />
+    <Image src={uploadFiles} alt="Upload files" />
   </TabItem>
   <TabItem label="String-based project">
     To upload translatable content in a string-based project, open your project and go to the **Upload** tab:
 
-    <Screenshot src="/getting-started/upload_files_sb.png" alt="Upload files" />
+    <Image src={uploadFilesSB} alt="Upload files" />
   </TabItem>
 </Tabs>
 
@@ -103,7 +110,7 @@ In most cases, you might have localization resources like [Translation Memory](/
 
 [Screenshots](/screenshots) are another great way to provide additional context so translators can understand better how they should translate the source strings. To upload screenshots, open your project and go to the **Screenshots** tab. Tag the source strings on the screenshots. This way, screenshots with tagged strings will appear under each string in the Editor's Context section.
 
-<Screenshot src="/getting-started/screenshots_in_editor.png" alt="Screenshots in the Editor" />
+<Image src={screenshotsInEditor} alt="Screenshots in the Editor" />
 
 <CardGrid>
   <LinkCard
@@ -124,7 +131,7 @@ In most cases, you might have localization resources like [Translation Memory](/
 
 To save time, you can pre-translate your Crowdin project via [Translation Memory](/translation-memory) (TM) or [Machine Translation](/machine-translation) (MT). This way, you'll have some strings automatically translated before translators start working on your project translations. You can apply pre-translation manually or set up automatic pre-translation via [TM](/project-settings/translation-memories) or [MT](/project-settings#machine-translation), so each time new content is added, it's translated automatically.
 
-<Screenshot src="/getting-started/pre_translation.png" alt="Pre-translation via TM" />
+<Image src={preTranslation} alt="Pre-translation via TM" />
 
 <ReadMore>
   Read more about [Pre-translation](/pre-translation).
@@ -136,7 +143,7 @@ Decide who will translate your content. You can cooperate with professional tran
 
 If you decide to [invite your own team of translators](/team-management), open your project and go to the **Members** tab. You can invite people to your project using their Crowdin username or email address and via the invitation link. When inviting new people, you can assign them the following roles: Manager, Language Coordinator, Proofreader, and Translator. You can [change the assigned role](/team-management) for any project member at any time.
 
-<Screenshot src="/getting-started/invite_dialog.png" alt="Invite project members" />
+<Image src={inviteDialog} alt="Invite project members" />
 
 Once new members join your project, they can start translating the content in the [Editor](/online-editor).
 
@@ -151,7 +158,7 @@ There are five main types of reports you can find under the **Reports** tab in y
 * Translation Cost
 * Top Members
 
-<Screenshot src="/getting-started/reports_general.png" alt="Project reports" />
+<Image src={reportsGeneral} alt="Project reports" />
 
 <ReadMore>
   Read more about [Reports](/project-reports).
@@ -161,7 +168,7 @@ There are five main types of reports you can find under the **Reports** tab in y
 
 Translations are downloaded according to the export settings configured in the project's **Settings** tab.
 
-<Screenshot src="/getting-started/project_settings_export.png" alt="Export Settings" />
+<Image src={projectSettingsExport} alt="Export Settings" />
 
 You can download translations manually using the web interface, using integrations (e.g., [GitHub](/github-integration) or similar), applying [API](https://developer.crowdin.com/api/v2/), or using a [console client](https://crowdin.github.io/crowdin-cli/) to automate the translation download.
 

src/content/docs/crowdin/getting-started/for-translators.mdx

@@ -8,7 +8,12 @@ slug: for-translators
 
 import { Aside, LinkCard } from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import profileFull from "!/crowdin/getting-started/profile_full.png";
+import showcases from "!/crowdin/getting-started/showcases.png";
+import projectDashboard from "!/crowdin/getting-started/project_dashboard.png";
+import onlineEditorSections from "!/crowdin/getting-started/online_editor_sections.png";
+import volunteerEditorMenu from "!/crowdin/getting-started/volunteer_editor_menu.png";
 
 > Crowdin is a localization management platform that helps companies translate their software. In this article, you will find information on how you can contribute to localization projects as a translator.
 
@@ -24,15 +29,15 @@ Click the profile picture in the upper-right corner and select *Settings* to acc
 
 A profile page is a place where you start working on Crowdin projects. In the *Projects* tab, you can see all the projects you have joined.
 
-<Screenshot src="/getting-started/profile_full.png" alt="Profile" />
+<Image src={profileFull} alt="Profile" />
 
 ## Exploring Projects
 
 Find a Crowdin project you would like to contribute to using the search field in the header or the direct URL provided by the project manager. However, not all projects can be found with the help of the search field. This is because they are private and only accessible via invitation links.
 
 Visit our [Showcases](https://crowdin.com/projects#showcases) page, where you can find some popular public projects grouped by category. Use the *Advanced Search* if you want to apply specific filter options (e.g., target languages, platform) to find a public project.
 
-<Screenshot src="/getting-started/showcases.png" alt="Showcases" />
+<Image src={showcases} alt="Showcases" />
 
 <Aside type="tip">
   *Crowdsourcing* is an approach that engages a community for one common goal &ndash; to translate products on a volunteer basis into various target languages. As a volunteer translator, you can help organizations with localization by translating in Crowdin.
@@ -60,7 +65,7 @@ Once you find and open the needed project, you can access the following tabs:
 
 * **Discussions** &ndash; the page with the project-related conversations. You can participate in already existing discussions or create a new topic if necessary.
 
-<Screenshot src="/getting-started/project_dashboard.png" alt="Project Home" />
+<Image src={projectDashboard} alt="Project Home" />
 
 ## Work in the Editor
 
@@ -70,7 +75,7 @@ Collaborate with other project members, discuss any issues or questions in the C
 
 As an alternative to translating online in the Editor, you can download project files for offline translation if the project manager has enabled public downloads. Use the XLIFF file format for offline translation, which is supported by most desktop localization tools.
 
-<Screenshot src="/getting-started/online_editor_sections.png" alt="Editor Sections" />
+<Image src={onlineEditorSections} alt="Editor Sections" />
 
 ### Section 1 (Left sidebar)
 
@@ -97,7 +102,7 @@ You can use this section to discuss the meaning of the source string or other re
 
 The Main menu <Icon name="mdi:menu" class="inline-icon"/> in the upper-left corner allows you to switch between files for translation, change translation languages, contact a manager, and configure the Editor view.
 
-<Screenshot src="/getting-started/volunteer_editor_menu.png" alt="Main Menu" />
+<Image src={volunteerEditorMenu} alt="Main Menu" />
 
 ### Keyboard Shortcuts
 

src/content/docs/crowdin/getting-started/supported-formats.mdx

@@ -5,7 +5,8 @@ slug: supported-formats
 
 import { Steps } from '@astrojs/starlight/components';
 import FormatsBanner from '~/components/FormatsBanner.astro';
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import assetsWorkflow from "!/crowdin/getting-started/assets-workflow.png";
 
 Crowdin supports a wide range of localization formats, including but not limited to files for mobile, software, documents, subtitles, and graphic assets.
 
@@ -31,7 +32,7 @@ Localize images associated with your product to improve your product’s user ex
   4. Download the localized graphics and use them in production.
 </Steps>
 
-<Screenshot src="/getting-started/assets-workflow.png" alt="Assets Workflow" />
+<Image src={assetsWorkflow} alt="Assets Workflow" />
 
 ## Converted File Formats
 

src/content/docs/crowdin/localization-resources/machine-translation.mdx

@@ -6,13 +6,16 @@ slug: machine-translation
 [//]: # (https://support.crowdin.com/configuring-machine-translation-engines/)
 
 import { Steps, Aside, LinkCard } from '@astrojs/starlight/components';
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import machineTranslationSuggestions from "!/crowdin/localization-resources/mt_suggestions.png";
+import machineTranslationEngines from "!/crowdin/localization-resources/machine_translation_engines.png";
+import automlCustomGlossaryConfiguration from "!/crowdin/localization-resources/automl_custom_glossary_configuration.png";
 
 Machine translation engines integrated with Crowdin provide translation suggestions from automatic translation services like Google Translate and AutoML Translation, Microsoft Translate, and more.
 
 Suggestions made by machine engines are displayed in the Editor under the translators’ suggestions field. Also, you can do [Pre-Translation](/pre-translation) using MT engines.
 
-<Screenshot src="/localization-resources/mt_suggestions.png" alt="Machine Translation suggestions in the Editor" />
+<Image src={machineTranslationSuggestions} alt="Machine Translation suggestions in the Editor" />
 
 <LinkCard
   title="Add More Machine Translation Engines"
@@ -31,7 +34,7 @@ To configure the machine translation engines, follow these steps:
   3. Click **Update**.
 </Steps>
 
-<Screenshot src="/localization-resources/machine_translation_engines.png" alt="Configuring Machine Translation engines" />
+<Image src={machineTranslationEngines} alt="Configuring Machine Translation engines" />
 
 <Aside type="caution">
   Machine translation engines must be configured using the project owner's account.
@@ -158,7 +161,7 @@ To configure your Google Cloud AutoML custom glossary, follow these steps:
   5. (Optional) Specify your Custom Model. If needed, configure language mapping between Custom Model and Crowdin languages.
 </Steps>
 
-<Screenshot src="/localization-resources/automl_custom_glossary_configuration.png" alt="Google Cloud AutoML Custom Glossary Configuration" />
+<Image src={automlCustomGlossaryConfiguration} alt="Google Cloud AutoML Custom Glossary Configuration" />
 
 ## MT Engine IDs
 
@@ -170,5 +173,5 @@ Alternatively, you can also [get your MT engine IDs via API](https://developer.c
 
 ## See Also
 
--   [Pre-Translation](/pre-translation)
--   [Project Settings](/project-settings)
+- [Pre-Translation](/pre-translation)
+- [Project Settings](/project-settings)

src/content/docs/crowdin/project-management/creating-project.mdx

@@ -7,7 +7,9 @@ slug: creating-project
 
 import { Steps, Aside, CardGrid, Card } from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import createProject from '!/crowdin/project-management/create_project.png';
+import projectVisibility from '!/crowdin/project-management/project_visibility.png';
 
 To be able to upload your content for localization, create a project first.
 
@@ -44,13 +46,13 @@ To create a project, follow these steps:
 <Steps>
   1. [Log in](https://crowdin.com/login) to your Crowdin account or [Sign up](https://crowdin.com/join) to create one.
 
-  2. Click **Create Project**. <Screenshot src="/project-management/create_project.png" alt="Create Project" />
+  2. Click **Create Project**. <Image src={createProject} alt="Create Project" />
 
   3. Name your project.
 
   4. Customize your project address if needed.
 
-  5. Select the preferred project visibility. You can choose between a **Public project** (visible to anyone) or a **Private project** (visible only to the invited project members). For a public project, you can enable **Moderated project joining** in your project **Settings** tab and restrict the possibility of translating for users until you confirm their join requests. Private projects can't be found via search engines and Crowdin search. <Screenshot src="/project-management/project_visibility.png" alt="Project Visibility" />
+  5. Select the preferred project visibility. You can choose between a **Public project** (visible to anyone) or a **Private project** (visible only to the invited project members). For a public project, you can enable **Moderated project joining** in your project **Settings** tab and restrict the possibility of translating for users until you confirm their join requests. Private projects can't be found via search engines and Crowdin search. <Image src={projectVisibility} alt="Project Visibility" />
 
   6. Select **String-based project** if you want to manage your translatable content as individual strings. Otherwise, keep this option cleared to manage your translatable content as source files.
 

src/content/docs/crowdin/project-management/project-activity.mdx

@@ -3,7 +3,10 @@ title: Project Activity
 slug: project-activity
 ---
 
-import Screenshot from '~/components/Screenshot.astro';
+import { Image } from 'astro:assets';
+import projectActivityFilterRecords from "!/crowdin/project-management/project_activity_filter_records.png";
+import projectActivityUndoRecords from "!/crowdin/project-management/project_activity_undo_records.png";
+import projectActivityViewDiff from "!/crowdin/project-management/project_activity_view_diff.png";
 
 The Activity tab lets you track all main events that happen in the project. For good readability, activity records are grouped by days, users, and activity types.
 
@@ -22,20 +25,20 @@ You can filter activity records by the following activity types:
 
 You can also filter activity records by a specific language or all languages, a specific user or all users, and the desired time period (e.g., Today, Yesterday, Last 7 days, Last 30 days, All time, and Custom Range).
 
-<Screenshot src="/project-management/project_activity_filter_records.png" alt="Filter Activity Records" />
+<Image src={projectActivityFilterRecords} alt="Filter Activity Records" />
 
 ## Undo Activity Records
 
 If some unwanted actions (e.g., wrong translations upload, mistaken source file deletion, etc.) happen in the project, the project owner and managers can cancel them in the Activity tab by clicking UNDO next to the respective activity record. Proofreaders and translators can only cancel their own actions.
 
 Since activity records are grouped by types, you can either undo a whole group of activities or click **Details** and undo only some of them.
 
-<Screenshot src="/project-management/project_activity_undo_records.png" alt="Undo Activity Records" />
+<Image src={projectActivityUndoRecords} alt="Undo Activity Records" />
 
 ## View Updated File Diffs
 
 For updated project files, besides the number of added, deleted, and updated strings, you can view the actual strings added, deleted, or updated during the source file update and word quantity contained in the strings. To view the detailed diff for the file update, click **Diff** next to the needed activity record.
 
 For grouped project file update records, click **Details** to see all updated files in the group and then click **Diff** next to the needed file.
 
-<Screenshot src="/project-management/project_activity_view_diff.png" alt="View File Diffs" />
+<Image src={projectActivityViewDiff} alt="View File Diffs" />