CMS-Bildoptimierung: WebP, AVIF, srcset

· CMS AliothPress
Ein Screenshot des Tabs Medienbibliothek im AliothPress Admin Panel.

AliothPress optimiert jedes Bild beim Hochladen. Ein Upload erzeugt responsive WebP- und AVIF-Varianten in vier Breiten, einen 1200×630-Zuschnitt fürs Teilen in sozialen Netzwerken, einen Platzhalter in der dominanten Farbe und eine saubere öffentliche URL. EXIF-Metadaten werden entfernt, die Ausrichtung wird korrigiert, und SVG-Dateien werden bereinigt. Dokumente liegen in einem eigenen File-Manager mit kurzen Download-URLs, und die Favicon-Verwaltung generiert aus einem einzigen Quellbild jede benötigte Icon-Größe. Alles läuft auf deinem eigenen Server, und kein Bild passiert je ein externes CDN.

Was beim Hochladen eines Bildes passiert

Die Verarbeitungspipeline läuft bei jedem Upload automatisch:

  1. Auto-Rotation. Die Ausrichtungsdaten der Kamera werden angewendet, Fotos stehen also überall richtig.
  2. EXIF-Bereinigung. Standort-, Geräte- und Zeitstempel-Metadaten werden aus der veröffentlichten Datei entfernt. Besucher laden das Bild herunter, nie die GPS-Koordinaten deiner Kamera.
  3. Skalierung auf die konfigurierte Maximalgröße.
  4. Responsive Varianten. WebP- und AVIF-Versionen entstehen in 400, 800, 1200 und 1920 Pixeln Breite, abgestimmt auf den optimalen Punkt von Qualität zu Dateigröße jedes Formats.
  5. Social-Zuschnitt. Ein mittiger 1200×630-Zuschnitt wird in WebP, AVIF und JPG erzeugt, für Link-Vorschauen in sozialen Netzwerken und Messengern.
  6. Extraktion der dominanten Farbe. Die Durchschnittsfarbe des Bildes wird zum CSS-Platzhalter. Das Layout reserviert also den richtigen Platz in der richtigen Farbe, bevor das Bild ankommt. Das schützt direkt den Cumulative-Layout-Shift-Wert.

AVIF und WebP über picture und srcset

Öffentliche Seiten binden Bilder über picture-Elemente mit vollständigen srcset-Attributen ein. Jeder Browser wählt die beste Kombination, die er unterstützt: AVIF wo verfügbar, WebP als nächste Wahl, und genau die Breite, die der Viewport braucht. Ein Handy im Mobilnetz lädt das 400px-AVIF, ein 4K-Desktop bekommt die 1920px-Variante. Der Server bereitet alles einmal beim Upload vor. Die Auslieferung kostet keine Laufzeitverarbeitung.

Saubere öffentliche URLs

Jedes Bild erhält eine kurze slug-basierte URL an der Wurzel der Website:

/sunset.jpg          das verarbeitete Original

/sunset-800w.webp    800px-WebP-Variante

/sunset-1200w.avif   1200px-AVIF-Variante

/sunset-og.jpg       1200×630-Social-Zuschnitt

Diese kurzen URLs werden durchgängig verwendet: im Seiten-HTML, in Open-Graph-Tags, in den Strukturdaten, in der Sitemap und in den RSS-Feeds. Interne Speicherpfade tauchen nie in öffentlichem Markup auf, und ein Rechtsklick auf jedes Bild kopiert eine saubere Adresse.

SVG-Sicherheit

Hochgeladene SVG-Dateien werden auf dem Server bereinigt: Skript-Tags, Event-Handler, javascript:-URLs und externe Referenzen werden entfernt, bevor die Datei gespeichert wird. SVG bleibt ein vollwertiges Format für Logos und Icons, ohne zum Angriffsvektor zu werden.

Metadaten und Organisation

Jedes Bild trägt Titel, Bildunterschrift, Beschreibung und Alternativtext, editierbar in der Bibliothek. Die Rasteransicht bietet Suche und Seitennummerierung, und ein gemeinsamer Bildauswähler stellt die ganze Bibliothek in Beiträgen, Seiten und im Page Builder bereit.

File-Manager für Dokumente

Dokumente und Downloads haben eine eigene Verwaltung, getrennt von den Bildern. Sie akzeptiert PDF, DOC, DOCX, XLS, XLSX, ZIP, RAR, TXT und CSV, jeweils mit Titel und Beschreibung. Dateien werden über kurze Slug-URLs ausgeliefert, etwa deineseite.de/jahresbericht.pdf. PDF, TXT und CSV öffnen direkt im Browser. Archiv- und Office-Formate werden heruntergeladen. Die Listenansicht zeigt Dateityp-Icons und lesbare Größen, mit Suche und Seitennummerierung.

Favicon-Verwaltung

Lade ein Bild hoch, und AliothPress generiert den kompletten Favicon-Satz: eine favicon.ico in mehreren Größen (16, 32 und 48 Pixel), PNG-Icons in 96, 192 und 512 Pixeln für Android und PWA, ein apple-touch-icon.png mit 180 Pixeln für iOS und ein Web-Manifest. Eine SVG-Quelle wird bereinigt und als Vektor-Favicon neben den generierten Rastergrößen ausgeliefert. ICO-, PNG- und SVG-Quellen werden alle akzeptiert.

Die wichtigsten Funktionen der Bild- und Dateiverwaltung in AliothPress

Das Mediensystem von AliothPress deckt den ganzen Lebenszyklus der Website-Assets ab: automatische WebP- und AVIF-Varianten in vier Breiten, Social-Zuschnitte, Platzhalter in der dominanten Farbe, EXIF-Bereinigung, SVG-Sanitizing, saubere Slug-URLs, eine Dokumentenverwaltung mit kurzen Download-Links und Favicon-Generierung aus einem Upload. Alles wird auf deiner eigenen Domain verarbeitet und ausgeliefert.

Häufig gestellte Fragen

Welche Bildformate generiert AliothPress?
WebP- und AVIF-Varianten in 400, 800, 1200 und 1920 Pixeln Breite, plus einen 1200×630-Social-Zuschnitt in WebP, AVIF und JPG. Der Browser wählt das beste unterstützte Format und die passende Größe über picture und srcset.
Entfernt AliothPress EXIF-Daten aus Fotos?
Ja. Standort-, Geräte- und Zeitstempel-Metadaten werden bei der Upload-Verarbeitung aus jedem veröffentlichten Bild entfernt, und die Kamera-Ausrichtung wird vor der Entfernung angewendet, damit Fotos richtig stehen.
Ist das Hochladen von SVG-Dateien sicher?
Ja. SVG-Dateien werden beim Upload auf dem Server bereinigt: Skript-Tags, Event-Handler, javascript:-URLs und externe Referenzen werden vor der Speicherung entfernt.
Welche Dateitypen akzeptiert der File-Manager?
PDF, DOC, DOCX, XLS, XLSX, ZIP, RAR, TXT und CSV. Jede Datei erhält eine kurze Slug-URL wie deineseite.de/jahresbericht.pdf, mit Titel und Beschreibung als Metadaten.
Wie entstehen Favicons in AliothPress?
Ein Bild in der Favicon-Verwaltung hochladen. AliothPress generiert die favicon.ico in mehreren Größen, PNG-Icons in 96, 192 und 512 Pixeln, das 180-Pixel-iOS-Icon, ein Web-Manifest und ein bereinigtes SVG-Favicon, wenn die Quelle SVG ist.
CMS CMS features SEO