Optimise image loading times

[ivory scroll]

I'm working on an Angular app that displays movie/show data with a lot of images. The app structure has main Shows and nested SubItems (which only appear when clicking on a main Show). My current implementation is causing performance issues as I'm loading all images at once. Here's my data structure:

typescriptexport interface Show {
  id: string;
  url: string;
  rating?: number;
  subItems?: SubItem[];
}

interface SubItem {
  id: string;
  url: string;
  rating: number;
  prefix?: string;
}``````html
<div class="posters">
  @for (show of shows; track show.url) {
    <div class="poster" (click)="openDialog(show)">
      <img [src]="show.url || 'https://placehold.co/400x600/EEE/31343C'" title="{{ show.id }}" alt="{{ show.id }}" class="poster__image" />
      @if (show.rating) {
        <div class="poster__rating">
          <div class="text">{{ show.rating }}</div>
        </div>
      }
    </div>
  } 
</div>

I'm using TMDB image URLs directly, like:
https://media.themoviedb.org/t/p/w440_and_h660_face/kTzJ5PrPTZVjLoKeiiShl5Z8Owf.jpg
What's the best way to optimise image loading in this scenario to improve performance?

[signal veldt]

What do you can "performance issues". What are you observing, when doing what? If it just takes time to load the images, since you're not the one hosting them and thus count entirely on themoviedb to host and serve them for you, ther's not much you can do to optimize the images themselves (i.e. use more appropriate sizes or formats).
But you could at least mark the images as lazy loaded, so that they only start to load when they're about to become visible in the viewport (see https://web.dev/articles/browser-level-image-lazy-loading?hl=fr).

[ivory scroll]

I read about that and it also uses the [priority] property, but I don't know which index to give since the number of the displayed posters depends on the height of the viewport

[signal veldt]

priority is not an index. It's just a boolean. And I don't think you need to worry about it. Start by lazy-loading the images. Also, you haven't answered my questions.

[ivory scroll]

I'm doing a hard refresh with slow 4G network in Chrome and it takes a lot of times to load the website

https://github.com/byteshaman/my-tv-list this is the website

I get a score of 30 performance on lighthouse

[signal veldt]

By "loading the website", what do you mean? Do you mean "to see the application started and beginning to load all the images", or do you mean "to see all the images completely loaded"?
I mean, this page is composed of almost only images, and they are not loaded lazily, so of course it takes time to load them in slow 4G. If you have 50 images to load, each making 20KB, that amounts to 1MB. The download speed of slow 4G is 1.6Mb/s, or 0.2MB/s, so the very best you can expect is to have everything loaded in 5 seconds.
If your images were lazy, it would only load the visible ones first, and start loading the remaining ones later, when they're about to become visible.

[ivory scroll]

I have reduced the width of the images since TMDB allows that, also I referred to the second definition

And I've added lazy loading as well

But I dislike the fact that the posters of the "subitems" (e.g. if you click black mirror) load only when the popup opens and that they're not loaded after the rest

[signal veldt]

The weirdness, IMHO, mainly comes from the fact that you're not specifying the size of the images as you should, which causes the popup to open with a size that is too small to hold the images, and to resize once the images start loading.