Lazy load team pictures

On the public scoreboard page, all team pictures are loaded on page
load. Similar to the affiliation logos, these should be lazy-loaded
on-demand. Also change from `id` to `class`, as there should not be
multiple elements with the same `id` on a page.

Author: Kevinjil

webapp/public/style_domjudge.css

@@ -400,7 +400,7 @@ tr.ignore td, td.ignore, span.ignore {
     margin-right: auto;
 }
 
-#teampicture {
+.teampicture {
     width: 100%;
     border: 1px solid black;
 }

webapp/templates/jury/team.html.twig

@@ -182,7 +182,7 @@
     {% set teamImage = teamId | assetPath('team') %}
     {% if teamImage %}
         <div class="col">
-        <img id="teampicture" src="{{ asset(teamImage) }}" alt="Picture of team {{ team.name }}"
+        <img loading="lazy" class="teampicture" src="{{ asset(teamImage) }}" alt="Picture of team {{ team.name }}"
              title="Picture of team {{ team.effectiveName }}">
         </div>
     {% endif %}

webapp/templates/partials/team.html.twig

@@ -60,7 +60,7 @@
     {% set teamImage = teamId | assetPath('team') %}
     {% if teamImage %}
         <div class="col-lg-{{ size | default(4) }}">
-        <img id="teampicture" src="{{ asset(teamImage) }}" alt="Picture of team {{ team.effectiveName }}"
+        <img loading="lazy" class="teampicture" src="{{ asset(teamImage) }}" alt="Picture of team {{ team.effectiveName }}"
              title="Picture of team {{ team.effectiveName }}">
         </div>
     {% endif %}