Merge pull request #6 from dimeloper/feature/further-optimize-lcp-image

Replace viewport logic with srcset utilisation.

Author: dimeloper

src/app/pages-optimized/pokedex-optimized/pokedex.component.html

@@ -1,7 +1,12 @@
 <!-- Main banner -->
 <div class="banner">
   <img
-    [ngSrc]="banner"
+    ngSrc="/assets/images/pokemon-banner-mobile.webp"
+    srcset="
+      /assets/images/pokemon-banner-mobile.webp     576w,
+      /assets/images/pokemon-banner-mobile-2x.webp  992w,
+      /assets/images/pokemon-banner.webp           1920w
+    "
     placeholder
     fill
     priority

src/app/pages-optimized/pokedex-optimized/pokedex.component.ts

@@ -1,17 +1,11 @@
-import { Component, Inject, inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { PokemonListComponent } from '../../components/pokemon-list/pokemon-list.component';
 import { MatDialog } from '@angular/material/dialog';
 import { PopupComponent } from '../../components/popup/popup.component';
 import { FormComponent } from '../../components/form/form.component';
-import {
-  isPlatformBrowser,
-  NgOptimizedImage,
-  provideImgixLoader,
-} from '@angular/common';
+import { NgOptimizedImage, provideImgixLoader } from '@angular/common';
 import { BannerGridComponent } from '../../components/banner-grid/banner-grid.component';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
   selector: 'app-pokedex',
@@ -29,66 +23,10 @@ import { DeviceDetectorService } from 'ngx-device-detector';
     provideImgixLoader('https://ng-pokedex-optimization.netlify.app/'),
   ],
 })
-export class PokedexComponent implements OnInit {
+export class PokedexComponent {
   public hideForm = true;
 
-  public banners = {
-    mobile: '/assets/images/pokemon-banner-mobile.webp',
-    desktop: '/assets/images/pokemon-banner.webp',
-  };
-  // initialising the banner with a default value
-  public banner = this.banners.mobile;
-
-  private breakpointObserver = inject(BreakpointObserver);
   private dialog = inject(MatDialog);
-  private deviceService = inject(DeviceDetectorService);
-
-  private isUserAgentMobile = this.deviceService.isMobile();
-
-  constructor(@Inject(PLATFORM_ID) private platformId: any) {}
-
-  public ngOnInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      if (!this.isUserAgentMobile) {
-        this.banner = this.banners.desktop;
-      }
-
-      // if mobile, skip the banner overwrite and the breakpoint observer logic
-      if (this.isUserAgentMobile) {
-        return;
-      }
-
-      // if desktop we also set up breakpoint observers, so that we load the correct banners
-      // in case the user resizes the browser window
-      this.breakpointObserver
-        .observe([
-          Breakpoints.XSmall,
-          Breakpoints.Small,
-          Breakpoints.Medium,
-          Breakpoints.Large,
-          Breakpoints.XLarge,
-        ])
-        .subscribe(result => {
-          if (result.matches) {
-            if (result.breakpoints[Breakpoints.XSmall]) {
-              this.banner = this.banners.mobile;
-            }
-            if (result.breakpoints[Breakpoints.Small]) {
-              this.banner = this.banners.mobile;
-            }
-            if (result.breakpoints[Breakpoints.Medium]) {
-              this.banner = this.banners.desktop;
-            }
-            if (result.breakpoints[Breakpoints.Large]) {
-              this.banner = this.banners.desktop;
-            }
-            if (result.breakpoints[Breakpoints.XLarge]) {
-              this.banner = this.banners.desktop;
-            }
-          }
-        });
-    }
-  }
 
   openDialog(): void {
     const dialogRef = this.dialog.open(PopupComponent, {