Fix image on exercise page

Author: Mateus Medeiros

src/webapp/src/app/listen-and-write/news-image/news-image.component.html

@@ -3,11 +3,11 @@
         @if (!imageLoadFailed()) {
             <img class="news-image" 
                 [ngSrc]="imageBaseId"
-                ngSrcset="512w, 1024w"
+                ngSrcset="320w, 512w, 640w, 1024w"
                 [loaderParams]="imageLoaderParams"
                 fill
                 priority
-                sizes="(max-width: 600px) 92vw, 500px"
+                sizes="(max-width: 600px) 92vw, (max-width: 900px) 520px, 500px"
                 alt="News image"
                 (error)="onOptimizedImageError()">
         } @else {

src/webapp/src/app/listen-and-write/news-image/news-image.component.ts

@@ -18,7 +18,7 @@ import { minioVariantImageLoader } from '../../shared/image-loaders/minio-varian
 export class NewsImageComponent {
 
   proposition = input<Proposition | null>();
-  readonly imageLoaderParams = { defaultWidth: 1024 };
+  readonly imageLoaderParams = { defaultWidth: 640 };
   imageLoadFailed = signal(false);
 
   imageBaseId = computed(() => this.getImageBaseId(this.proposition()?.imageFileId));
@@ -39,6 +39,7 @@ export class NewsImageComponent {
       return null;
     }
     const lastDot = imageFileId.lastIndexOf('.');
-    return lastDot > 0 ? imageFileId.slice(0, lastDot) : imageFileId;
+    const baseId = lastDot > 0 ? imageFileId.slice(0, lastDot) : imageFileId;
+    return baseId.replace(/_w\d+$/, '');
   }
 }