Datenschutz, kurz und ehrlich. Wir messen nur anonym, welche Seiten ankommen. Cookieless, ohne Werbe-Cookies, ohne Tracker, ohne Weiterverkauf. Du entscheidest, ob die Statistik mitläuft. Details in der Datenschutzerklärung.

    Glossar / Begriff

    Image-Optimization, im Tech-Kontext.

    Image-Optimization heißt: richtiges Format, richtige Maße, richtige Priorität. Bilder sind auf den meisten Seiten der größte Posten im Datenvolumen.

    Image-Optimization umfasst vier Entscheidungen pro Bild: Format, Maße, Kompression und Ladepriorität. AVIF und WebP liefern bei gleicher Bildwirkung deutlich kleinere Dateien als JPEG. Über srcset und sizes bekommt jedes Gerät die passende Auflösung, statt ein Bild in Rechnerbreite auf dem Telefon herunterzurechnen. Breite und Höhe im Markup reservieren den Platz und verhindern Layout-Sprünge. Das Bild im ersten Bildschirm wird sofort und mit hoher Priorität geladen, alles Weitere lazy. In der Praxis ist das der schnellste Hebel für LCP, weil das größte sichtbare Element fast immer ein Bild ist. Automatisieren lässt sich das in der Build-Pipeline oder über einen Bilddienst am CDN.

    Beispiele aus dem Mittelstand

    • Ein Hero-Foto von mehreren Megabyte wird zu einer WebP-Datei im niedrigen dreistelligen Kilobyte-Bereich, ohne sichtbaren Unterschied.
    • Eine Referenzseite liefert dem Telefon eine 800 Pixel breite Fassung, dem großen Bildschirm eine mit 1600 Pixeln.
    <picture>
  <source type="image/avif" srcset="/hero-800.avif 800w, /hero-1600.avif 1600w" sizes="100vw" />
  <source type="image/webp" srcset="/hero-800.webp 800w, /hero-1600.webp 1600w" sizes="100vw" />
  <img src="/hero-1600.jpg" width="1600" height="900" fetchpriority="high" alt="Empfang der Praxis" />
</picture>
    Der Browser wählt Format und Auflösung selbst, das img bleibt die Rückfallebene.
    # Die schwersten Bilder im fertigen Build finden
du -h dist/assets/*.webp dist/assets/*.jpg 2>/dev/null | sort -h | tail -10

    Folge-Fragen

    AVIF oder WebP?

    AVIF komprimiert stärker, WebP ist breiter unterstützt und schneller zu erzeugen. Mit picture lassen sich beide gleichzeitig ausliefern.

    Wie groß darf ein Hero-Bild sein?

    Als Arbeitsgrenze der niedrige dreistellige Kilobyte-Bereich. Alles darüber ist auf Mobilfunk direkt im LCP zu sehen.

    Warum brauche ich Breite und Höhe im Markup?

    Damit der Browser den Platz vor dem Laden reserviert. Ohne die Angaben springt das Layout und der CLS-Wert steigt.

    Lohnt ein Bilddienst am CDN?

    Sobald Redakteure selbst Bilder hochladen. Dann entstehen Format und Größe automatisch, statt von Disziplin abzuhängen.

    Image-Optimization in der Praxis.

    Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.

    SEO-Performance