Change image paths to webp

Signed-off-by: Vipul Gupta (@vipulgupta2048) <[email protected]>

CONTRIBUTING.md

@@ -38,11 +38,11 @@ This will allow the system to version the documentation using the `Change-type`
 
 Images and screenshots help the user in better understanding of the docs. Before adding a screenshot, make sure to keep the area in focus, text is clearly visible and doesn't have any identifying information. Rename the screenshot appropriately and make sure to upload them to the right path.
 
-![](./static/img/common/billing/plan_selection.png)
+![](./static/img/common/billing/plan_selection.webp)
 
 Do mark the menu options, buttons or tabs with a red box as and when needed.
 
-![](./static/img/common/billing/current_plan.png)
+![](./static/img/common/billing/current_plan.webp)
 
 Images for the documentation are stored in [static/img](https://github.com/balena-io/docs/tree/master/static/img) directory. Screenshots of the dashboard are commonly stored in the [common](https://github.com/balena-io/docs/tree/master/static/img/common) directory.  
 
@@ -53,13 +53,13 @@ To add an image to the documentation,
 3. When added, refer and add them to the relevant documentation page using either the markdown format.
 
 ```markdown
-![Description of the image](/img/common/app/cool-looking-image.png)
+![Description of the image](/img/common/app/cool-looking-image.webp)
 ```
 
 OR use the HTML `<img>` tag
 
 ```html
-<img alt="Description about the image" src="/img/common/app/cool-looking-image.png">
+<img alt="Description about the image" src="/img/common/app/cool-looking-image.webp">
 ```
 
 ## Adding links to the docs

config/index.coffee

@@ -54,4 +54,4 @@ module.exports =
     baseUrl: process.env.BASE_URL || 'https://www.balena.io/docs'
     menuLinks: MAIN_MENU_LINKS
     fbAppId: FB_APP_ID
-    defaultThumbnail: 'https://www.balena.io/docs/img/logo.png'
+    defaultThumbnail: 'https://www.balena.io/docs/img/logo.webp'

pages/learn/accounts/account.md

@@ -20,7 +20,7 @@ To add a password to an account created with a social login (Google, Github), na
 
 Access tokens are used for authentication in the {{ $names.company.lower }} [API][api], [CLI][cli], and [Node.js][node-sdk] and [Python][python-sdk] SDKs. They are managed in the *Access tokens* tab of the [*Preferences*][prefs] page, which can be found via the dropdown menu in the upper-right corner of the dashboard:
 
-<img src="/img/common/preferences/access_tokens.png" width="100%">
+<img src="/img/common/preferences/access_tokens.webp" width="100%">
 
 There are two types of access tokens: session tokens and API keys. Both authentication types provide user-level permissions, meaning any user or application with one of these tokens can make changes across devices, fleets, and the user account.
 
@@ -32,25 +32,25 @@ Session tokens are retrieved from the *Preferences* page, and they can be refres
 
 API keys are named tokens that do not expire and can be revoked as needed. To create a new API key, make sure you are in the *Access tokens* tab of the *Preferences* page, then select *Create API key*:
 
-<img alt="Create API Key" src="/img/common/preferences/create_api_key.png" width="100%">
+<img alt="Create API Key" src="/img/common/preferences/create_api_key.webp" width="100%">
 
 You'll see a required field for *Token name*, as well as an optional field for *Token description*:
 
-<img alt="Name API Key" src="/img/common/preferences/api_key_name.png" width="60%">
+<img alt="Name API Key" src="/img/common/preferences/api_key_name.webp" width="60%">
 
 When you click *Create token*, you will see a dialog with the new API key:
 
-<img alt="API Key Warning" src="/img/common/preferences/api_key_warning.png" width="80%">
+<img alt="API Key Warning" src="/img/common/preferences/api_key_warning.webp" width="80%">
 
 __Warning:__ This is your **only** opportunity to see the key, so make sure to download or copy to a secure location!
 
 After you close the dialog, you'll see your API key in the list, complete with name, date of creation, and description:
 
-<img alt="List API Keys" src="/img/common/preferences/api_key_list.png" width="100%">
+<img alt="List API Keys" src="/img/common/preferences/api_key_list.webp" width="100%">
 
 To revoke one or more API keys, select the boxes to the left of the tokens you wish to remove, then click *Delete selected*:
 
-<img alt="Delete API Key" src="/img/common/preferences/api_key_delete.png" width="100%">
+<img alt="Delete API Key" src="/img/common/preferences/api_key_delete.webp" width="100%">
 
 API keys can also be generated using the API, [CLI][cli-keys], and [Node.js][node-sdk-keys] and [Python][python-sdk-keys] SDKs.
 
@@ -69,37 +69,37 @@ __Note:__ We use the industry standard [Time-based One-time Password Algorithm][
 
 [Sign up][signup] for an account (or [log in][login] if you already have one) and go to your [preferences][prefs] page. From here, click on the *Two-factor Authentication* tab then click *Enable two-factor authentication* to enable:
 
-<img alt="Enable two-factor authentication" src="/img/common/preferences/enable_2fa.png" width="100%">
+<img alt="Enable two-factor authentication" src="/img/common/preferences/enable_2fa.webp" width="100%">
 
 Next, you will be shown a QR code and prompted for a pairing code as shown below:
 
 __Note:__ Two-factor authentication will only be enabled once you have finished configuring it against your smartphone/computer, so no need to worry about logging out before finishing the configuration then not having access to your account!
 
-<img alt="Two-factor authentication pairing" src="/img/common/preferences/pairing_2fa.png" width="80%">
+<img alt="Two-factor authentication pairing" src="/img/common/preferences/pairing_2fa.webp" width="80%">
 
 In order to use your phone/computer as your added layer of security you will need to download a free authenticator app. There are many available, but one that works well and has been successfully tested against {{ $names.company.lower }} is [Google Authenticator][google-auth] - download it for [Android][google-auth-android] or [iOS][google-auth-ios].
 
 Once installed, navigate to the barcode scanner:
 
 __Note:__ The Android app is shown here - if you already have accounts installed, tap the 3 vertical dots in the top right-hand corner and select 'Set up account', otherwise you should be given the option when you first start the app.
 
-![Google Authenticator Scan Barcode Menu](/img/screenshots/2fa3mobile1.png)
+![Google Authenticator Scan Barcode Menu](/img/screenshots/2fa3mobile1.webp)
 
 When you tap the option to scan a barcode your phone will turn on your camera and all you need to do to pair with your account is to simply point it at the QR code displayed on your monitor.
 
 Once configured, you'll see a 6 digit generated code with a graphic beside it indicating a countdown. Once the countdown expires, the code becomes invalid:
 
-![Google Authenticator Codes](/img/screenshots/2fa3mobile2.png)
+![Google Authenticator Codes](/img/screenshots/2fa3mobile2.webp)
 
 Next, you'll need to input the displayed code into the 'Pairing code' input on the preferences page. If successful, you will be shown recovery codes that may be used in the event that you cannot access your two-factor authentication app. These codes should be downloaded and stored in a safe place.
 
-<img alt="Two-factor authentication recovery codes" src="/img/common/preferences/recovery_codes_2fa.png" width="100%">
+<img alt="Two-factor authentication recovery codes" src="/img/common/preferences/recovery_codes_2fa.webp" width="100%">
 
 Once you've downloaded your recovery codes and clicked _OK_, the next time you log in, you will be prompted for the code displayed in your authenticator app after you've input your username and password. Enjoy your added layer of security!
 
 To disable two-factor authentication, visit the _Two-factor Authentication_ tab of the _Account Preference_ and click _Disable two-factor authentication_. You will be prompted for your account password before it is disabled.
 
-<img alt="Two-factor authentication recovery codes" src="/img/common/preferences/disable_2fa.png" width="100%">
+<img alt="Two-factor authentication recovery codes" src="/img/common/preferences/disable_2fa.webp" width="100%">
 
 ### List of verified authenticator apps
 
@@ -111,7 +111,7 @@ To disable two-factor authentication, visit the _Two-factor Authentication_ tab
 
 If you wish to delete your {{ $names.cloud.lower }} account, go to your [_Preferences_][prefs] page, and under the _Account Details_ tab, select the _Delete Account_ button. You will need to confirm this action by entering your password. If your account does not have a password, you will be prompted to set one in your account preferences. Upon confirmation, the account will be permanently deleted, including all fleets and devices. If you would also like to request deletion of your data in accordance with GDPR, please refer to the instructions in our [privacy policy][privacy-policy].
 
-![Delete {{ $names.company.lower }} Account](/img/screenshots/delete-balena-account.png)
+![Delete {{ $names.company.lower }} Account](/img/screenshots/delete-balena-account.webp)
 
 [signup]:{{ $links.dashboardUrl }}/signup
 [login]:{{ $links.dashboardUrl }}/login

pages/learn/accounts/billing.md

@@ -6,23 +6,23 @@ title: Billing
 
 Billing in balenaCloud is managed through [organizations][organizations]. To manage billing for a specific organization, navigate to the organization and select the `Billing` tab from the sidebar on the left:
 
-<img src="/img/common/billing/billing_nav.png" width="25%">
+<img src="/img/common/billing/billing_nav.webp" width="25%">
 
 From this dashboard, you can change your billing plan, update your billing information, monitor your usage, and download invoices. If you have any questions about billing for your account, please contact [our customer success team][solutions].
 
 ## Changing your billing plan
 
 To modify or upgrade your billing plan, click the "Change plan" button on the billing page:
 
-<img src="/img/common/billing/current_plan.png" width="100%">
+<img src="/img/common/billing/current_plan.webp" width="100%">
 
 Select the plan you'd like to upgrade to from the list of available options:
 
-<img src="/img/common/billing/plan_selection.png" width="100%">
+<img src="/img/common/billing/plan_selection.webp" width="100%">
 
 Enter your billing information and complete the signup process:
 
-<img src="/img/common/billing/billing_info.png" width="50%">
+<img src="/img/common/billing/billing_info.webp" width="50%">
 
 If you need to downgrade or cancel your plan, you can follow the steps mentioned above by choosing a lower tier or free plan instead.
 
@@ -32,15 +32,15 @@ Certain plans may require you to contact our customer success team in order to c
 
 At the top of the billing page, you'll find a summary of your subscription with information on the total amount and due date for your next payment:
 
-<img src="/img/common/billing/sub_sum.png" width="100%">
+<img src="/img/common/billing/sub_sum.webp" width="100%">
 
 Beneath this you can see your current usage, including [active devices][inactive] and collaborators:
 
-<img src="/img/common/billing/usage.png" width="80%">
+<img src="/img/common/billing/usage.webp" width="80%">
 
 Further down, you'll find a place to download invoices, add or edit payment methods, and update account information:
 
-<img src="/img/common/billing/account_details.png" width="100%">
+<img src="/img/common/billing/account_details.webp" width="100%">
 
 At the bottom of this page, you'll find more information on the available [plans][plans], and you can change plans as necessary.
 
@@ -52,7 +52,7 @@ Credit purchases of any size will result in paying less for device usage on the
 
 To manage credits, navigate to the organization and select the `Credits` tab from the sidebar on the left:
 
-<img src="/img/common/billing/credits_nav.png" width="25%">
+<img src="/img/common/billing/credits_nav.webp" width="25%">
 
 On the Credits page, you're able to see credit purchase history and the number of credits that have been purchased and are still allocatable for device usage. This is also where you can initiate credit purchases. An invoice will be automatically generated and listed on the Billing page when a credit purchase is initiated.
 

pages/learn/accounts/enterprise-sso.md

@@ -35,7 +35,7 @@ To enable Single Sign-On (SSO) for balenaCloud organizations, you must establish
 2. From the balenaCloud dashboard, select the [Identity Provider](https://dashboard.balena-cloud.com/identity-provider) option from the left sidebar.
 3. Click on the Add Identity Provider button. In the dialog that appears, either upload the XML file or manually enter the IdP details.
 
-<img alt="Screenshot of Add Identity Provider form" src="/img/common/saml/add-idp-form-filled.png" width="100%">
+<img alt="Screenshot of Add Identity Provider form" src="/img/common/saml/add-idp-form-filled.webp" width="100%">
 
 To create an Identity Provider entity, start by first selecting a unique SSO identifier. This identifier will be part of your team's URL for logging in. For instance, if your organization is `ACME Corp`, you can choose your unique SSO identifier as `acme` and your team's login URL will be `https://dashboard.balena-cloud.com/saml/acme`.
 
@@ -49,7 +49,7 @@ __Note:__ Removing organizations after IdP creation will not revoke access for S
 
 You have successfully configured SAML 2.0 for your balenaCloud Enterprise SSO. Your team can now access balenaCloud securely and seamlessly through the configured Identity Provider. For instructions on how your team can log in, refer to [Authenticating as a SAML/SSO User](#authenticating-as-a-samlsso-user). If you encounter any issues or need further assistance, please contact our support team.
 
-<img alt="Fully configured IdP with two organizations associated" src="/img/common/saml/idp-with-two-orgs.png" width="100%">
+<img alt="Fully configured IdP with two organizations associated" src="/img/common/saml/idp-with-two-orgs.webp" width="100%">
 
 #### (Optional) Configure a Default Team
 
@@ -63,11 +63,11 @@ __Note__: If you unlink the default team in the Identity Provider configuration,
 
 To log in using your enterprise SAML authentication, you must first have or [create](https://dashboard.balena-cloud.com/signup) a standard balenaCloud account using your company email address. Once logged in to this account, navigate to your [user preferences](https://dashboard.balena-cloud.com/preferences/details) and click "Enable" in the "Enterprise SSO" section.
 
-<img alt="User preferences with Enable SSO button highlighted" src="/img/common/saml/merge-account-accept.png" width="100%">
+<img alt="User preferences with Enable SSO button highlighted" src="/img/common/saml/merge-account-accept.webp" width="100%">
 
 Next, provide the company `SSO Identifier` supplied by your balenaCloud organization administrator.
 
-<img alt="Enable SSO modal with SSO identifier filled in." src="/img/common/saml/add-sso-identifier-merge-modal.png" width="60%">
+<img alt="Enable SSO modal with SSO identifier filled in." src="/img/common/saml/add-sso-identifier-merge-modal.webp" width="60%">
 
 __Important:__ By activating SAML, you are transferring your personal account to a company account. **This action is non-reversible**. The following changes will occur:
 * **Your API keys will be deleted**
@@ -91,7 +91,7 @@ By clicking the Enable button, you agree to the above terms. If you have any que
 Once you have enabled SAML on your account, you can log in using the Enterprise SSO login button or the login URL provided by your balenaCloud organization administrator, e.g., `https://dashboard.balena-cloud.com/saml/acme`.
 
 <!-- TODO: Update to latest screenshot -->
-<img alt="Login page with Enterprise SSO login highlighted." src="/img/common/saml/login-page.png" width="60%">
+<img alt="Login page with Enterprise SSO login highlighted." src="/img/common/saml/login-page.webp" width="60%">
 
 Once you have enabled SAML, you can no longer log in using a `username` and `password` combination and you must always use the SSO login method.
 

pages/learn/accounts/fleet-members.md

@@ -33,25 +33,25 @@ Developers are given, in addition to the access provided to operators, the abili
 
 To add a new member to your fleet, click on the *Members* tab of the fleet:
 
-<img alt="Members Tab" src="/img/common/app/members_tab.png" width="15%">
+<img alt="Members Tab" src="/img/common/app/members_tab.webp" width="15%">
 
 This brings up a list of all fleet members, if any have been assigned. Click on the *Add member* button in the top left:
 
-<img alt="Create Application Member" src="/img/common/app/add_member.png" width="100%">
+<img alt="Create Application Member" src="/img/common/app/add_member.webp" width="100%">
 
 The *Add member* dialog has a dropdown with descriptions of the member types, as well as information about which types are available based on your billing plan. Choose a level of access, then enter the username or email address of the new member:
 
-<img alt="Add Application Member" src="/img/common/app/member_dialog.png" width="60%">
+<img alt="Add Application Member" src="/img/common/app/member_dialog.webp" width="60%">
 
 __Note:__ Fleet members must have already [signed up][signup] for a {{ $names.company.lower }} account before they can be added to a fleet.
 
 After you click *Add*, you will see the username of the new member in the list. From here, you can edit access levels or remove the user if necessary:
 
-<img alt="List Application Members" src="/img/common/app/member_list.png" width="100%">
+<img alt="List Application Members" src="/img/common/app/member_list.webp" width="100%">
 
 All users that have been added to a fleet will see that fleet in their dashboard, with an indicator to designate it has been shared by the fleet owner:
 
-<img alt="Shared Application" src="/img/common/app/shared_app.png" width="40%">
+<img alt="Shared Application" src="/img/common/app/shared_app.webp" width="40%">
 
 Fleet members will have the option to remove themselves from a fleet by clicking on the members tab, selecting the checkbox by their name from the member list, clicking on the *Modify* button, and selecting *Delete member*.
 

pages/learn/accounts/idp-setup/google-workspace-saml-setup.md

@@ -50,7 +50,7 @@ This guide will walk you through the steps to create a SAML Identity Provider (I
 
 7. Finally, you should a custom SAML app in your Google Workspace that looks similar to this
 
-<img alt="Download XML" src="/img/common/saml/google-workspace-saml-app-final.png" width="100%">
+<img alt="Download XML" src="/img/common/saml/google-workspace-saml-app-final.webp" width="100%">
 
 ## Conclusion