feat: use Eleventy's image plugin for image transformation (#488)

Use https://www.11ty.dev/docs/plugins/image/ to transform images on build time to avif, webp and jpeg.

Images are moved to `/content/images`.

`<picture>` is no longer needed, the plugin does this automatically.

Remove webp images from the source.

Resolves #152
Resolves #368

Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/488
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

.gitignore

@@ -1,7 +1,7 @@
 # Project-specific
 ## Output of Eleventy site builder
 _site/
-
+.cache/
 
 # Integrated development environments (IDEs) and text editors
 ## JetBrains

assets/css/codeberg-docs.css

@@ -26,6 +26,7 @@
 .content img {
   border: 5px solid rgba(0, 0, 0, 0.2);
   max-width: 100%;
+  height: auto;
 }
 .content blockquote {
   margin: 0;

content/_includes/default_layout.njk

@@ -88,7 +88,7 @@
         </div>
         <!-- Navbar brand -->
         <a href="/" class="navbar-brand" title="Codeberg Docs">
-          <img src="https://design.codeberg.org/logo-kit/icon_inverted.svg" height="22" width="22" alt="Codeberg" />
+          <img src="https://design.codeberg.org/logo-kit/icon_inverted.svg" eleventy:ignore="" height="22" width="22" alt="Codeberg" />
           Docs
         </a>
         <!-- Navbar nav -->

content/advanced/access-token.md

@@ -17,10 +17,7 @@ This guide explains how to generate an access token from the website. However, y
 
 Access tokens grant full access to your account. You must handle them securely.
 
-<picture>
-  <source srcset="/assets/images/advanced/access-token/generate-token.webp" type="image/webp">
-  <img src="/assets/images/advanced/access-token/generate-token.png">
-</picture>
+<img src="/images/advanced/access-token/generate-token.png" alt="">
 
 1. In a web browser, go to Codeberg and click on the `Profiles and Settings` button on the top right. The button will be your profile picture.
 2. Click on [`Settings`](https://codeberg.org/user/settings) in the dropdown.
@@ -28,10 +25,7 @@ Access tokens grant full access to your account. You must handle them securely.
 4. Under `Manage Access Tokens | Generate New Token`, enter a name to identify your token in the `Token Name` field.
 5. Click the generate token button.
 
-<picture>
-  <source srcset="/assets/images/advanced/access-token/token-generated.webp" type="image/webp">
-  <img src="/assets/images/advanced/access-token/token-generated.png">
-</picture>
+<img src="/images/advanced/access-token/token-generated.png" alt="">
 
 Your access token has now been generated! Copy your token and store it securely.
 

content/advanced/migrating-repos.md

@@ -10,10 +10,7 @@ If you want to download a local copy of your files, you can `git clone` your rep
 
 This works well for moving files, but when you want to migrate metadata like issues, releases and a wiki, you can use the migration tool.
 
-<picture>
-  <source srcset="/assets/images/advanced/migrating-repos/new-migration.webp" type="image/webp">
-  <img src="/assets/images/advanced/migrating-repos/new-migration.png">
-</picture>
+<img src="/images/advanced/migrating-repos/new-migration.png" alt="Dropdown showing the new migration item">
 
 On Codeberg, you can click on the plus symbol on the top right, and then select [**New Migration**](https://codeberg.org/repo/migrate) on the dropdown to access the migration tool.
 
@@ -35,10 +32,7 @@ Here we document instructions for migrating specific to each service. Once you'v
 
 ### Migrating from Git
 
-<picture>
-  <source srcset="/assets/images/advanced/migrating-repos/git-migration.webp" type="image/webp">
-  <img src="/assets/images/advanced/migrating-repos/git-migration.png">
-</picture>
+<img src="/images/advanced/migrating-repos/git-migration.png" alt="">
 
 Here's an explanation of some fields on the [Git migration page](https://codeberg.org/repo/migrate?service_type=1):
 
@@ -49,10 +43,7 @@ Here's an explanation of some fields on the [Git migration page](https://codeber
 
 To migrate a repo with its metadata from a different service, you will first need to [create an access token](/advanced/access-token/) on the service with your repository. _Please check your services documentation, on how to get the access token._ Examples can be found for [GitLab](https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html) and [GitHub](https://github.com/settings/tokens). Don't forget to delete the access token once you are finished.
 
-<picture>
-  <source srcset="/assets/images/advanced/migrating-repos/gitea-migration.webp" type="image/webp">
-  <img src="/assets/images/advanced/migrating-repos/gitea-migration.png">
-</picture>
+<img src="/images/advanced/migrating-repos/gitea-migration.png" alt="">
 
 Here's an explanation of some fields on the [Gitea migration page](https://codeberg.org/repo/migrate?service_type=3):
 

content/advanced/using-webhooks.md

@@ -30,27 +30,18 @@ Every service that offers webhook functionality can be added using the **Forgejo
 
 To better illustrate how webhooks can be used, we prepared a tutorial for you that works with \*[Read the Docs](https://readthedocs.io). In this example, we will show you how to build your documentation every time that a new commit is pushed to your Codeberg repository.
 
-<picture>
-  <source srcset="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-2.webp" type="image/webp">
-  <img src="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-2.jpg" alt="Open the admin settings on ReadTheDocs">
-</picture>
+<img src="/images/advanced/using-webhooks/using-webhooks-readthedocs-2.jpg" alt="Open the admin settings on ReadTheDocs">
 
 1. Login into your _Read the Docs_ account and **select the project** you want to add a webhook to.
 2. Click on the **Admin** button.
 3. In the left side menu, click on **Integrations**.
 
-<picture>
-  <source srcset="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-3.webp" type="image/webp">
-  <img src="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-3.jpg" alt="Open the admin settings on ReadTheDocs">
-</picture>
+<img src="/images/advanced/using-webhooks/using-webhooks-readthedocs-3.jpg" alt="Open the admin settings on ReadTheDocs">
 
 4. Click on the button **Add Integration**.
 5. Select **GitHub incoming webhook**. (GitHub, GitLab or BitBucket incoming webhooks, all work equally well and generate the needed webhook URL)
 
-<picture>
-  <source srcset="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-4.webp" type="image/webp">
-  <img src="/assets/images/advanced/using-webhooks/using-webhooks-readthedocs-4.jpg" alt="Open the admin settings on ReadTheDocs">
-</picture>
+<img src="/images/advanced/using-webhooks/using-webhooks-readthedocs-4.jpg" alt="Open the admin settings on ReadTheDocs">
 
 6. A **webhook address** will be displayed to you. Write it down and keep it safe!
 
@@ -59,19 +50,13 @@ Now go to your Codeberg repository.
 1. Go to your repository and click on **Settings**.
 2. In the top menu, click on **Webhooks**.
 
-<picture>
-  <source srcset="/assets/images/advanced/using-webhooks/using-webhooks-codeberg-1.webp" type="image/webp">
-  <img src="/assets/images/advanced/using-webhooks/using-webhooks-codeberg-1.jpg" alt="Open the admin settings on ReadTheDocs">
-</picture>
+<img src="/images/advanced/using-webhooks/using-webhooks-codeberg-1.jpg" alt="Open the admin settings on ReadTheDocs">
 
 3. Click on **Add Webhook** and choose **Forgejo**.
 4. Paste the **webhook address** provided by _Read the Docs_ into the **Target URL** field.
 5. You can select when the webhook should be triggered using the **Trigger On** setting. For illustrative purposes, we will select **Push Events**; this will trigger the webhook every time that someone pushes to your repository.
 
-<picture>
-  <source srcset="/assets/images/advanced/using-webhooks/using-webhooks-codeberg.webp" type="image/webp">
-  <img src="/assets/images/advanced/using-webhooks/using-webhooks-codeberg.jpg" alt="Open the admin settings on ReadTheDocs">
-</picture>
+<img src="/images/advanced/using-webhooks/using-webhooks-codeberg.jpg" alt="Open the admin settings on ReadTheDocs">
 
 In this example, we do not need to use any other fields to make the webhook work. For your personal reference, here are some explanations as to what these other fields do:
 

content/ci/actions.md

@@ -38,10 +38,7 @@ You can add Runners to your account, organization, or repository. Choosing where
 
 5. Copy the registration token.
 
-<picture>
-    <source srcset="/assets/images/ci/actions/create-new-runner.webp" type="image/webp">
-    <img src="/assets/images/ci/actions/create-new-runner.png" alt="Create new Runner">
-</picture>
+<img src="/images/ci/actions/create-new-runner.png" alt="Create new Runner">
 
 ## Installing Forgejo Runner
 
@@ -306,10 +303,7 @@ jobs:
 
 The runner seeks action recipes from `.forgejo/workflows`, so make sure your file is in the required path.
 
-<picture>
-    <source srcset="/assets/images/ci/actions/demo-workflow.webp" type="image/webp">
-    <img src="/assets/images/ci/actions/demo-workflow.png" alt="Demo workflow running successfully">
-</picture>
+<img src="/images/ci/actions/demo-workflow.png" alt="Demo workflow running successfully">
 
 ## References
 

content/codeberg-translate/getting-started.md

@@ -26,10 +26,7 @@ You now see your new project with no components at all. Now let's add a Componen
 
 1. First click on the "Add new translation component" Button. You should see this Page.
 
-<picture>
-  <source srcset="/assets/images/codeberg-translate/getting-started/add-component.webp" type="image/webp">
-  <img src="/assets/images/codeberg-translate/getting-started/add-component.png" alt="Image the add component page">
-</picture>
+<img src="/images/codeberg-translate/getting-started/add-component.png" alt="Image the add component page">
 
 2. Now enter the following:
 
@@ -40,10 +37,7 @@ You now see your new project with no components at all. Now let's add a Componen
 
 Leave the rest as it is and click "Continue". Weblate will now scan your Repo and you should see something like this:
 
-<picture>
-  <source srcset="/assets/images/codeberg-translate/getting-started/add-component-choose.webp" type="image/webp">
-  <img src="/assets/images/codeberg-translate/getting-started/add-component.choose.png" alt="Image the add component page">
-</picture>
+<img src="/images/codeberg-translate/getting-started/add-component-choose.png" alt="Image the add component page">
 
 Weblate have searched your Repo for common translation structures and presents you what was found. If you select one, Weblate will set some settings automatically. You can change them later or fully configure
 the component manually. Please note, that one Component only works with one translation system in one directory. If you have multiple, you need to add multiple components.

content/collaborating/create-organization.md

@@ -22,19 +22,13 @@ Details about the roles involved (owner, admin, member, etc) are given in the se
 
 On your Dashboard, click on the `+` next to your avatar and select `New Organization`:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/new-orga.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/new-orga.png" alt="new-orga">
-</picture>
+<img src="/images/collaborating/create-organization/new-orga.png" alt="new-orga">
 
 In the new page, choose a name for your organization (here we choose `PolarClub`) and select its visibility. Finally, choose what the administrators of repositories can do; if the box is ticked, repository administrators will be able to grant any team access to the repository (see [Access rights](#access-rights) below for details on repository administrators).
 
 Confirm by clicking `Create Organization`:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/create-orga.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/create-orga.png" alt="create-orga">
-</picture>
+<img src="/images/collaborating/create-organization/create-orga.png" alt="create-orga">
 
 You're now directed to the organization's dashboard.
 
@@ -42,26 +36,17 @@ You're now directed to the organization's dashboard.
 
 On the dashboard, click on the avatar on the left and select the context (personal account or organization) you want to work with. Alternatively, switch between your repositories or your organizations tabs on the right side.
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/dashboard.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/dashboard.png" alt="dashboard">
-</picture>
+<img src="/images/collaborating/create-organization/dashboard.png" alt="dashboard">
 
 ## View organization
 
 The organization's dashboard gives you an overview of the organization:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/view-orga.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/view-orga.png" alt="view-orga">
-</picture>
+<img src="/images/collaborating/create-organization/view-orga.png" alt="view-orga">
 
 If you click on the `View [organization]` (here `PolarClub`, you'll be directed to the organization's page:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/orga.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/orga.png" alt="orga">
-</picture>
+<img src="/images/collaborating/create-organization/orga.png" alt="orga">
 
 From here, you can access all repositories (there's currently none here) and create new ones. There's a list of all the members (`People`) and teams; in this example, there is only one member (Knut the polar bear), and one team (`Owners`) with one member (yourself) and no repositories.
 
@@ -69,17 +54,11 @@ From here, you can access all repositories (there's currently none here) and cre
 
 The cog next to the organization's name will lead you to its settings:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/cog.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/cog.png" alt="cog">
-</picture>
+<img src="/images/collaborating/create-organization/cog.png" alt="cog">
 
 This is where you can change general settings related to your organization, such as its name, avatar, website or visibility. You can also delete your organization, and access more advanced settings like organization webhooks:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/orga-settings.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/orga-settings.png" alt="orga-settings">
-</picture>
+<img src="/images/collaborating/create-organization/orga-settings.png" alt="orga-settings">
 
 The `Name` of the organization is the name that will define the URLs of the organization and of all its repositories; it is recommended to keep it short. This name will also appear on the member's profiles (see [People](#people)). On the other hand, the `Full Name` is the name that will appear on the organization's home page.
 
@@ -91,19 +70,13 @@ In the top right corner, you have access to the members and teams of your organi
 
 The `Teams` tab gives you an overview of all the teams, their members and their number of repositories. You can also join a team from here if you have the permission to do so:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/teams.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/teams.png" alt="teams">
-</picture>
+<img src="/images/collaborating/create-organization/teams.png" alt="teams">
 
 When you create an organization, a team `Owners` is created and you are automatically added to this team. Members of the Owners' team have all permissions (see [Access rights](#access-rights) below for details).
 
 Click the `+ New Team` button to create a new team. Now, in the new page, you can set its name, permissions, and accessible repositories.
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/new-team.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/new-team.png" alt="new-team">
-</picture>
+<img src="/images/collaborating/create-organization/new-team.png" alt="new-team">
 
 You can choose whether members of the team can only access some repositories explicitly added to the team, or whether they can access all repositories of the organization.  
 You can also allow members to be able to create new repositories on behalf of the organization.  
@@ -113,10 +86,7 @@ See the section [Access rights](#access-rights) below for details.
 
 If you belong to the team `Owners`, you can edit teams. To do this, go to the `Teams` tab and click on the team you want to edit:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/team-settings.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/team-settings.png" alt="team-settings">
-</picture>
+<img src="/images/collaborating/create-organization/team-settings.png" alt="team-settings">
 
 Click on `Settings` to edit the team as shown above for the creation of a team.  
 This is also where you can add or remove members to/from a team, and assign repositories to them.
@@ -125,19 +95,13 @@ This is also where you can add or remove members to/from a team, and assign repo
 
 On the `People` tab, you can get an overview of all the people who belong to your organization:
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/people.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/people.png" alt="people">
-</picture>
+<img src="/images/collaborating/create-organization/people.png" alt="people">
 
 Somewhat counter-intuitively, this is not where you can add members; this is done in the `Teams` tab (see [Teams](#teams) above). However, you can remove members from the `People` tab.
 
 The visibility of the members can also be edited here; `Hidden` means that the members' memberships will not be shown on their profiles, while `Visible` makes the avatar of the organization appear in the info card on their profile, as shown in the screenshot below. Note that your membership will always be visible to you on your profile; this visibility setting is for other users only.
 
-<picture>
-  <source srcset="/assets/images/collaborating/create-organization/profile.webp" type="image/webp">
-  <img src="/assets/images/collaborating/create-organization/profile.png" alt="profile">
-</picture>
+<img src="/images/collaborating/create-organization/profile.png" alt="profile">
 
 Shown here is also whether or not each member has activated two-factor authentication (2FA, see [Setting up Two-factor Authentication](/security/2fa)).
 

content/collaborating/invite-collaborators.md

@@ -17,21 +17,12 @@ It is important to understand that only registered Codeberg users can contribute
 
 To add a user to a repository as a collaborator, first go to the settings of your repository.
 
-<picture>
-  <source srcset="/assets/images/collaborating/invite-collaborators/settings.webp" type="image/webp">
-  <img src="/assets/images/collaborating/invite-collaborators/settings.png" alt="settings">
-</picture>
+<img src="/images/collaborating/invite-collaborators/settings.png" alt="settings">
 
 Then navigate to the `Collaborators` tab and search for the user you want to add, then click on `Add Collaborator`.
 
-<picture>
-  <source srcset="/assets/images/collaborating/invite-collaborators/add-collaborator.webp" type="image/webp">
-  <img src="/assets/images/collaborating/invite-collaborators/add-collaborator.png" alt="add-collaborator">
-</picture>
+<img src="/images/collaborating/invite-collaborators/add-collaborator.png" alt="add-collaborator">
 
 Once added, you can define the access rights by clicking on the shield: `Read`, `Write` or `Administrator` (see [Repository Permissions](/collaborating/repo-permissions) for details). This is also where you can remove collaborators.
 
-<picture>
-  <source srcset="/assets/images/collaborating/invite-collaborators/collaborator-rights.webp" type="image/webp">
-  <img src="/assets/images/collaborating/invite-collaborators/collaborator-rights.png" alt="collaborator-rights">
-</picture>
+<img src="/images/collaborating/invite-collaborators/collaborator-rights.png" alt="collaborator-rights">

content/collaborating/pull-requests-and-git-flow.md

@@ -21,7 +21,7 @@ Let's say, you would like to contribute to our "examples" project [knut/examples
 
 First, fork the project you would like to work on, by clicking the `Fork` button in the top-right corner of the project page:
 
-![Fork a project](/assets/images/collaborating/pull-requests-and-git-flow/fork-button.png)
+![Fork a project](/images/collaborating/pull-requests-and-git-flow/fork-button.png)
 
 Then, clone it onto your local machine. We assume that [you have set up your SSH keys](/security/ssh-key). This has to be done only once:
 
@@ -47,7 +47,7 @@ git push
 
 Now you can create a pull request by selecting your feature branch, and clicking on the pull request button:
 
-![Create a pull request](/assets/images/collaborating/pull-requests-and-git-flow/pull-request-button.png)
+![Create a pull request](/images/collaborating/pull-requests-and-git-flow/pull-request-button.png)
 
 ### Keep it up-to-date: rebase pull requests to upstream
 

content/collaborating/repo-permissions.md

@@ -20,10 +20,7 @@ The visibility of your repositories will depend on the visibility of your profil
 
 The visibility of your profile can be changed in the [Privacy settings](https://codeberg.org/user/settings). Be careful when you set your profile's visibility to "Limited"; Even if a repository is public, users that are _not logged in_ will get a [404 error](https://en.wikipedia.org/wiki/HTTP_404) if they try to access your repository — it will seem as if it does not exist at all!
 
-<picture>
-  <source srcset="/assets/images/collaborating/repo-permissions/user-settings-privacy-limited.webp" type="image/webp">
-  <img src="/assets/images/collaborating/repo-permissions/user-settings-privacy-limited.jpg" alt="Privacy Settings in Codeberg's User Settings" width="50%">
-</picture>
+<img src="/images/collaborating/repo-permissions/user-settings-privacy-limited.jpg" alt="Privacy Settings in Codeberg's User Settings" width="50%">
 
 ## Collaborators
 

content/collaborating/resolve-conflicts.md

@@ -156,7 +156,7 @@ index 616dc84,088249f..0000000
 --- a/README.md
 +++ b/README.md
 @@@ -1,3 -1,3 +1,7 @@@
-  ![](https://docs.codeberg.org/assets/images/getting-started/knut.svg)
+  ![](https://docs.codeberg.org/images/getting-started/knut.svg)
 
 ++<<<<<<< HEAD
   +An example repository for [Codeberg Docs](https://docs.codeberg.org).
@@ -214,7 +214,7 @@ index 616dc84,088249f..0000000
 --- a/README.md
 +++ b/README.md
 @@@ -1,3 -1,3 +1,3 @@@
-  ![](https://docs.codeberg.org/assets/images/getting-started/knut.svg)
+  ![](https://docs.codeberg.org/images/getting-started/knut.svg)
 
 - An example repository for [Codeberg Docs](https://docs.codeberg.org).
 - An example repository to use with the Codeberg Documentation.

content/getting-started/first-repository.md

@@ -22,17 +22,11 @@ To create a new repository, you need to log in to your account on Codeberg.
 
 When you're logged in, you can use one of the two buttons shown in the two following screenshots to create a new repository:
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/create-repo.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/create-repo.png" alt="Creating a Repository">
-</picture>
+<img src="/images/getting-started/first-repository/create-repo.png" alt="Creating a Repository">
 
 This will lead you to this page below.
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/create-repo-2.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/create-repo-2.png" alt="New Repository Form">
-</picture>
+<img src="/images/getting-started/first-repository/create-repo-2.png" alt="New Repository Form">
 
 Here's an explanation of the form's fields:
 
@@ -66,10 +60,7 @@ After filling out the fields, click the green "Create Repository" button on the
 
 You should now see a screen similar to the one below. If you haven't chosen to generate `LICENSE`, `README` and `.gitignore` the screen might show instructions instead, which will vanish after [your first commit](#making-your-first-commit).
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/create-repo-3.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/create-repo-3.png" alt="Repository Main View">
-</picture>
+<img src="/images/getting-started/first-repository/create-repo-3.png" alt="Repository Main View">
 
 Here's what the most important buttons here do:
 
@@ -118,10 +109,7 @@ knut@iceberg:~/repositories$
 
 To clone your newly created repository, execute `git clone` with the URL that is shown in your repository:
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/repo-url.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/repo-url.png" alt="Repository Clone URL">
-</picture>
+<img src="/images/getting-started/first-repository/repo-url.png" alt="Repository Clone URL">
 
 ```bash
 knut@iceberg:~/repositories$ git clone https://codeberg.org/knut/foobar
@@ -334,10 +322,7 @@ When connecting via HTTPS, Git will ask you for your username and password, whic
 
 After refreshing the repository page, you should now see something similar to this:
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/hello-world.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/hello-world.png" alt="Hello World from first commit">
-</picture>
+<img src="/images/getting-started/first-repository/hello-world.png" alt="Hello World from first commit">
 
 Congratulations - you've just made your first source code contribution on Codeberg!
 
@@ -352,10 +337,7 @@ In the badge generator you can edit how the badge should appear. Mainly this is:
 - **Background**: Change the background color of your badge to fit to your site.
 - **PNG width**: The width of your badge, the generate will automatically scale it with correct proportions.
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/badge-settings.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-repository/badge-settings.jpg" alt="Settings in Codeberg's badge generator">
-</picture>
+<img src="/images/getting-started/first-repository/badge-settings.jpg" alt="Settings in Codeberg's badge generator">
 
 Just add the following line as markdown to the site you want to link from:
 
@@ -375,10 +357,7 @@ or in HTML:
 This will result in a badge like this:
 
 <a href="https://codeberg.org/Codeberg/Documentation">
-<picture>
-  <source srcset="/assets/images/getting-started/first-repository/badge.webp" type="image/webp">
-  <img src="https://codeberg.org/Codeberg/GetItOnCodeberg/raw/branch/main/get-it-on-blue-on-white.svg" alt="Get It On Codeberg" style="border:0px" width="250">
-</picture>
+<img src="https://codeberg.org/Codeberg/GetItOnCodeberg/raw/branch/main/get-it-on-blue-on-white.svg" alt="Get It On Codeberg" style="border:0px" width="250">
 </a>
 
 Now, you should [learn more about issue tracking](/getting-started/issue-tracking-basics).

content/getting-started/first-steps.md

@@ -30,10 +30,7 @@ If you like a project on Codeberg, consider **giving it a star** and/or **follow
 
 After successfully registering on Codeberg, you should see something similar to this screen:
 
-<picture>
-  <source srcset="/assets/images/getting-started/first-steps/dashboard.webp" type="image/webp">
-  <img src="/assets/images/getting-started/first-steps/dashboard.png" alt="Dashboard">
-</picture>
+<img src="/images/getting-started/first-steps/dashboard.png" alt="Dashboard">
 
 An explanation of the highlighted elements above:
 

content/getting-started/index.md

@@ -7,7 +7,7 @@ eleventyNavigation:
 description: This article shows you how to get started with Codeberg
 ---
 
-<img src="/assets/images/getting-started/knut.svg" style="float: right; width: 150px; border: none; margin-left: 25px; margin-bottom: 25px;" alt="Knut the Polar Bear">
+<img src="/images/getting-started/knut.svg" style="float: right; width: 150px; border: none; margin-left: 25px; margin-bottom: 25px;" alt="Knut the Polar Bear">
 
 Hello there!
 

content/getting-started/install-git.md

@@ -59,10 +59,7 @@ For some Git clients (see [below](#git-clients)), e.g. [RStudio](https://rstudio
 If you want to install Git as a standard user, just log in with your user account and run the installer.
 To install with administrator permissions, run the installer as administrator. Right-click on the installer, select `Run as administrator` and enter your credentials:
 
-<picture>
-  <source srcset="/assets/images/getting-started/install-git/win-run-as-admin.webp" type="image/webp">
-  <img src="/assets/images/getting-started/install-git/win-run-as-admin.png" alt="win-run-admin">
-</picture>
+<img src="/images/getting-started/install-git/win-run-as-admin.png" alt="win-run-admin">
 
 From here, follow the steps in the setup wizard. It is okay to just accept the defaults, when in doubt.  
 Here are some important steps:
@@ -70,34 +67,22 @@ Here are some important steps:
 1. Choose your editor:<br>
    By default, [Vim](https://www.vim.org/) will be used for Git. If you prefer to use another editor, select it here.
 
-<picture>
-  <source srcset="/assets/images/getting-started/install-git/win-editor.webp" type="image/webp">
-  <img src="/assets/images/getting-started/install-git/win-editor.png" alt="win-editor">
-</picture>
+<img src="/images/getting-started/install-git/win-editor.png" alt="win-editor">
 
 2. PATH environment:
    This ensures that Git can be used by 3rd party software ([Git clients](#git-clients)). PATH adjustment is recommended (and the default).
 
-<picture>
-  <source srcset="/assets/images/getting-started/install-git/win-path.webp" type="image/webp">
-  <img src="/assets/images/getting-started/install-git/win-path.png" alt="win-path">
-</picture>
+<img src="/images/getting-started/install-git/win-path.png" alt="win-path">
 
 3. Choose credential helper:  
    From Git 2.29.0 onwards, the `Git Credential Manager Core` will be used by default. The `Git Credential Manager` can still be installed and used, but is now deprecated. When using either of these, your Git/Codeberg credentials will be stored in Windows' [Credential Manager](https://support.microsoft.com/en-us/help/4026814/windows-accessing-credential-manager) when you enter them for your first pull/push (see [Clone & Commit via HTTP](/git/clone-commit-via-http)). Windows' Credential Manager is also where you'd go to change them. Follow the links on the setup wizard for more details.  
    If you'd prefer not to store your credentials in Windows but e.g. in a password manager, select the third option (`None`). You'll have to enter your credentials at every push/pull.
 
-<picture>
-  <source srcset="/assets/images/getting-started/install-git/win-cred-helper.webp" type="image/webp">
-  <img src="/assets/images/getting-started/install-git/win-cred-helper.png" alt="win-cred-helper">
-</picture>
+<img src="/images/getting-started/install-git/win-cred-helper.png" alt="win-cred-helper">
 
 > You may get the error message displayed below, saying that the release notes cannot be displayed. This can be safely ignored; you can find the release notes in `Start Menu → Git → Git Release Notes`.
 >
-> <picture>
->   <source srcset="/assets/images/getting-started/install-git/win-error-notes.webp" type="image/webp">
->   <img src="/assets/images/getting-started/install-git/win-error-notes.png" alt="win-error">
-> </picture>
+> <img src="/images/getting-started/install-git/win-error-notes.png" alt="win-error">
 
 ### Run
 

content/getting-started/issue-tracking-basics.md

@@ -13,10 +13,7 @@ direction, ask questions and much more.
 
 ### The Issue Tracker
 
-<picture>
-  <source srcset="/assets/images/getting-started/issue-tracking-basics/issues-list.webp" type="image/webp">
-  <img src="/assets/images/getting-started/issue-tracking-basics/issues-list.png" alt="Issues List">
-</picture>
+<img src="/images/getting-started/issue-tracking-basics/issues-list.png" alt="Issues List">
 
 You can access the issue tracker of a project by clicking its "Issues" tab **(1)**.
 

content/getting-started/wiki.md

@@ -36,20 +36,14 @@ No further stylesheets are needed. The Markdown files are automatically rendered
 After you have enabled the wiki you are prompted to create the initial page `Home.md`.
 
 The web UI in your browser is currently limited to adding, updating, and deleting pages; you can't manage assets like images this way.
-<picture>
 
-   <source srcset="/assets/images/getting-started/wiki/wiki_pageview.png" type="image/png">
-   <img src="/assets/images/getting-started/wiki/wiki_pageview.png" alt="Wiki home page with edit buttons">
-</picture>
+<img src="/images/getting-started/wiki/wiki_pageview.png" alt="Wiki home page with edit buttons">
 
 ### Adding external images via web
 
 If you cannot [use a local Git client](#adding-external-images-via-web), linking to _external_ assets like images is still possible.
 
-<picture>
-   <source srcset="/assets/images/getting-started/wiki/wiki_editview.png" type="image/png">
-   <img src="/assets/images/getting-started/wiki/wiki_pageview.png" alt="Web editor with an arrow pointing at the "Insert Image" button">
-</picture>
+<img src="/images/getting-started/wiki/wiki_pageview.png" alt="Web editor with an arrow pointing at the "Insert Image" button">
 
 Clicking on the "Insert Image" button will make the following text appear in your text editor: `![](https://)`
 

content/git/clone-commit-via-web.md

@@ -22,28 +22,19 @@ If you want to download a copy of a specific state of the repository without its
 
 {% endadmonition %}
 
-<picture>
-  <source srcset="/assets/images/git/clone-commit-via-web/clone.webp" type="image/webp">
-  <img src="/assets/images/git/clone-commit-via-web/clone.png" alt="clone">
-</picture>
+<img src="/images/git/clone-commit-via-web/clone.png" alt="clone">
 
 ## Edit
 
 Click on the file you want to edit from the list of files in the repo. Let's try it here with the `README.md` file.
 The pencil tool (`Edit File`) will open a new window.
 
-<picture>
-  <source srcset="/assets/images/git/clone-commit-via-web/edit1.webp" type="image/webp">
-  <img src="/assets/images/git/clone-commit-via-web/edit1.png" alt="edit1">
-</picture>
+<img src="/images/git/clone-commit-via-web/edit1.png" alt="edit1">
 
 Here, you can edit the file as you wish.
 The `Preview` tab shows you how the file will look like when rendered, and `Preview Changes` will highlight the changes you've made to the file (red for deletions and green for additions).
 
-<picture>
-  <source srcset="/assets/images/git/clone-commit-via-web/edit2.webp" type="image/webp">
-  <img src="/assets/images/git/clone-commit-via-web/edit2.png" alt="edit2">
-</picture>
+<img src="/images/git/clone-commit-via-web/edit2.png" alt="edit2">
 
 ## Commit
 
@@ -51,10 +42,7 @@ A _commit_ is a record of your changes to the repository. This is like a snapsho
 
 The commit section is at the bottom of the edit window:
 
-<picture>
-  <source srcset="/assets/images/git/clone-commit-via-web/commit.webp" type="image/webp">
-  <img src="/assets/images/git/clone-commit-via-web/commit.png" alt="commit">
-</picture>
+<img src="/images/git/clone-commit-via-web/commit.png" alt="commit">
 
 A commit requires a commit message. A default message is added, but do not hesitate to edit it. Make sure your commit message is informative, for you, your collaborators and anyone who might be interested in your work. Some advice on how to write a good commit message can be found on countless websites and blogs!
 

content/git/using-tags.md

@@ -54,35 +54,23 @@ git push <remote target, probably "origin"> <tag name, e.g., "v1.2.3">
 
 To create a release on Codeberg, first go to the `Releases` tab of your repository, and click on `New Release`:
 
-<picture>
-  <source srcset="/assets/images/collaborating/citable-code/releases1.webp" type="image/webp">
-  <img src="/assets/images/collaborating/citable-code/releases1.png" alt="releases1">
-</picture>
+<img src="/images/collaborating/citable-code/releases1.png" alt="releases1">
 
 Here, enter a version number for your new release, select the branch that contains the code you want to release, and add a title and a description:
 
-<picture>
-  <source srcset="/assets/images/collaborating/citable-code/new-release.webp" type="image/webp">
-  <img src="/assets/images/collaborating/citable-code/new-release.png" alt="new-release">
-</picture>
+<img src="/images/collaborating/citable-code/new-release.png" alt="new-release">
 
 You can now either save it as a draft, or publish the release outright.
 
 You are then re-directed to the `Releases` tab of your repository. The newly created release is now listed there:
 
-<picture>
-  <source srcset="/assets/images/collaborating/citable-code/releases2.webp" type="image/webp">
-  <img src="/assets/images/collaborating/citable-code/releases2.png" alt="releases2">
-</picture>
+<img src="/images/collaborating/citable-code/releases2.png" alt="releases2">
 
 Here, you can edit the release if needed, and you can also download the source code in .zip or .tar.gz format.
 
 ## Finding and viewing releases in a repository
 
-<picture>
-  <source srcset="/assets/images/git/using-tags/tags.webp" type="image/webp">
-  <img src="/assets/images/git/using-tags/tags.png" alt="tags">
-</picture>
+<img src="/images/git/using-tags/tags.png" alt="tags">
 
 To view the release, go to the releases tab (1) in the repository. Then locate the release you want to view. As an example, we will be looking at the `Added Knut!` release (2). If you just want to access the files attached to the release, you can download it from the `Downloads` dropdown (3).
 If you want to see a snapshot of the source code at the time of the release, select a source code archive download (4) from the `Downloads` dropdown or click on the tag on the left side (5).