Friedrich Siever

7. Januar 2024

Die Astro Image Komponente - Einfach Genial

von: Friedrich Siever | Last Updated: 14.01.24

Die Astro.js Bildkomponente ist für mich ein Game-Changer für statische Webseiten. Mit der einfachen Integration, automatischen Optimierung und responsiven Designmöglichkeiten macht sie die Verwaltung von Bildern zu einer mühelosen Aufgabe. Erlebe die Zukunft der Bildintegration mit der Astro.js Bildkomponente und verleihe deinen statischen Webseiten eine neue Dimension!

Hintergrund

Ursprünglich plante ich, meine Website mit Next.js zu erstellen. Als großer Anhänger eines echten Serverless-Ansatzes und statischer Websites, schätze ich nicht nur die Umweltfreundlichkeit durch den Verzicht auf laufende Server, sondern auch die Kostenersparnis durch erschwingliches Hosting. Trotz des erheblichen Entwicklungsaufwands, den Next.js in die Bildkomponente investiert hat, war ich von den Ergebnissen des statischen Exports enttäuscht.

Entweder musste ich selbst einen Loader programmieren oder auf externe Tools zurückgreifen. Zwar funktioniert die Bildkomponente gut mit Vercel Hosting, doch finde ich, dass die Bindung an bestimmte Hosting-Services dem Grundgedanken von Open Source und der allgemeinen Freiheit im Internet widerspricht. Nicht zuletzt aufgrund dieser Überlegungen und der beeindruckenden View Transitions habe ich mich entschieden, zu Astro zu wechseln. Und, wie soll ich es ausdrücken? Es war Liebe auf den ersten Blick.

Die Astro Bild Komponente im Einzelnen

Die Astro Image Komponente revolutioniert die Integration von Bildern in statische Webseiten. Mit ihrer klaren und intuitiven API versetzt sie Entwickler in die Lage mühelos hochwertige Bilder einzubinden. Die Komponente abstrahiert komplexe Prozesse und ermöglicht es, den Fokus auf die visuelle Gestaltung zu legen. Hier möchte ich nicht zu sehr auf technische Details und die einfache Implementierung eingehen, da die Astro Docs bereits hervorragende Arbeit leisten.

Für einen umfassenden Überblick

Abhängig von deinen Anforderungen an die Speicherung und Verarbeitung deiner Bilder stehen verschiedene Möglichkeiten zur Verfügung:

  • Im src-Ordner: Diese Option überlässt Astro die Transformation, Optimierung und das Bündeln der Bilder.

  • Im public-Ordner: Speichere deine Bilder einfach im Public-Ordner, wenn du keine Verarbeitung durch Astro wünschst.

  • Remote Bilder: Selbstverständlich kannst du auch Remote-Bilder, beispielsweise aus deinem Headless CMS (wie Strapi), verwenden.

Fortgeschrittener Anwendungsfall

Die Astro Image Komponente übertrifft alle Erwartungen, wenn es um die Integration von Bildern in statische Webseiten geht. Es gibt vielleicht kleinere Einschränkungen, insbesondere im Bezug auf TypeScript und das dynamische Laden von Bildern. Dennoch bietet die Komponente eine beeindruckende Leistung und erlaubt sogar die Nutzung von srcset für optimale Performance. Das ermöglicht, das letzte Quäntchen Leistung aus den Bildern zu extrahieren und gleichzeitig auf die optimierten Bilder mit reinem JavaScript aufzubauen.

Für die Website-Demo Immersive - Grid to Fullscreen habe ich die 3D-Performance für Business-Seiten untersucht und dieses Feature intensiv genutzt. Eine speziell angepasste Bildkomponente im Frontend ermöglicht hierbei das dynamische Laden von Bildern und passt die Größen an verschiedene Layouts an.

---
import { Image } from "astro:assets";

interface Props {
  imagePath: string;
  alt: string;
  transitionName?: string;
  class?: string;
  style?: string;
  dataImgPath?: string;
  sizes: string;
}
const {
  imagePath,
  alt,
  transitionName,
  class: cssClass,
  style,
  sizes,
} = Astro.props;

const fullImagePath = "/src/assets/images" + imagePath;
const images = import.meta.glob("/src/assets/**/*.{jpeg,jpg,png,gif}");

const checkedImagePath = images[fullImagePath];
const widths = [540, 720, 1028];
---

{
  typeof checkedImagePath === "function" ? (

    <Image
      widths={widths}
      style={style}
      src={checkedImagePath()}
      sizes={sizes}
      alt={alt}
      transition:name={transitionName}
      class={cssClass}
    />
  ) : (
    <div class="text-red">Image with path {fullImagePath} not found</div>
  )
}

Dieser Ansatz gewährleistet, dass der Browser lediglich die Bildgröße lädt, die für die Anzeige erforderlich ist. Insbesondere bei der Umsetzung von 3D-Shadern wie bei Immersive konnte dieses Feature erfolgreich genutzt werden. Nach der Optimierung und Transformation der Bilder durch die Astro Image Komponente zu WebP wurde die src-Eigenschaft der optimierten Bilder verwendet. Bei einem Fullscreen-Effekt werden im JavaScript-Code die größtmöglichen Optionen im Hintergrund geladen, ohne die Ladezeiten und Core Web Vitals zu beeinträchtigen.

class WebGLImage {
  constructor(imagePath, containerId) {
    this.imagePath = imagePath;
    this.containerId = containerId;
    this.renderer = null;
    this.program = null;
    // ... (weitere Attribute)
  }

  initialize() {
    this.createRenderer();
    this.loadImages();
    this.addEventListeners();
  }

  async loadImages() {
    const html_images = [...document.querySelectorAll(".fx-initiator img")];
    for (let i = 0; i < html_images.length; i++) {
      const img = html_images[i];
      if (img instanceof HTMLImageElement) {
        const fullImage = document.createElement("img");
        fullImage.src = img.src;
        fullImage.addEventListener("load", () => {
          this.images[i] = fullImage;
          this.createTexture(fullImage, i);
          if (this.images.filter(Boolean).length === html_images.length) {
            this.onImagesLoad();
          }
        });
      }
    }
  }

  onImagesLoad() {
    this.createProgram();
    this.createScene();
    this.createPlane();
    // ... (weitere Initialisierung)
  }

  // ... (weitere Methoden)
}

Fazit

Die Astro Image Komponente revolutioniert die Integration von Bildern in statische Webseiten, indem sie mit ihrer klaren und intuitiven API Entwicklern ermöglicht, hochwertige Bilder vergleichsweise mühelos einzubinden. Die Komponente abstrahiert komplexe Prozesse und erlaubt es, sich auf die visuelle Gestaltung zu konzentrieren.

In fortgeschrittenen Anwendungsfällen ermöglicht die Komponente optimale Performance durch die Nutzung von srcset. Trotz kleinerer Einschränkungen im Zusammenhang mit TypeScript und dem dynamischen Laden von Bildern bietet sie beeindruckende Leistungsfähigkeit, wie man am Beispiel der Website-Demo Immersive sehen und live erleben kann.

Hierbei wurde eine maßgeschneiderte Bildkomponente erstellt, um dynamische Bilder zu laden und die Performance im 3D-Kontext zu optimieren, indem WebP-Bilder nach der Astro-Transformation verwendet werden. Dies gewährleistet, dass der Browser nur die benötigte Bildgröße lädt, insbesondere bei der Integration von 3D-Shadern. Die Fullscreen-Effekte werden im JavaScript-Code geladen, ohne die Ladezeiten und Core Web Vitals zu beeinträchtigen.

Insgesamt bietet die Astro Image Komponente eine innovative Lösung für die Bildintegration in statische Webseiten und eröffnet neue Dimensionen für Entwickler und moderne Website-Projekte.

0
0 Bewertungen

Jetzt selbst bewerten