Bild bearbeiten im Media-Manager
Bild anklicken → Vorschau erscheint → Stift-Symbol
Bearbeitungsoberfläche öffnet sich.
Grundregel (immer merken)
Bilder dürfen niemals größer sein als die maximale Anzeigegröße im Template.
Alles darüber ist reine Ladezeit-Verschwendung.
1. Zuschneiden (Crop)
Beispiel
Foto: messe.jpg 4000 × 3000 px
Ziel: Artikelbild Querformat 16:9
Vorgehen
- Rahmen mit Anfassern ziehen
- Pixel manuell setzen:
Breite: 1600
Höhe: 900
SpeichernErgebnis:
Server: /images/artikel/2026/messe.jpg
Neue Größe: 1600 × 900 px
Frontend: https://joomla6.rneuhoff.de/images/artikel/2026/messe.jpg
Wichtig:
Original wurde überschrieben.
2. Resize (Größe ändern)
Beispiel
Mitarbeiterfoto zu groß: anna.jpg 2400 × 3200 px
Ziel: Profilbild 400px
Eingabe:
Breite: 400
Höhe: automatisch Qualität: 82%
Ergebnis:
kleine Datei → schneller Seitenaufbau
3. Rotate (Drehen)
Beispiel
Handyfoto steht quer: produkt.jpg
Optionen
Buttons: 90° links 90° rechts 180°
oder manuell:
Angle: 90
Speichern → Bild korrekt ausgerichtet
Was tatsächlich passiert
Der Media-Manager arbeitet direkt auf der Datei:
| Aktion | Ergebnis |
|---|---|
| Crop | Bild wird neu gespeichert |
| Resize | Pixel reduziert |
| Rotate | EXIF wird korrigiert |
| Qualität | JPG neu komprimiert |
Kein Verlauf, kein Undo → Backup vorher sinnvoll.
Typische Anfängerfehler
| Problem | Ursache |
|---|---|
| Bild unscharf | mehrfach resized |
| Original verloren | direkt überschrieben |
| Frontend riesig | nie verkleinert |
| 404 Fehler | falscher Ordner |
| Upload verboten | Dateityp nicht erlaubt |
Typische Anzeigegrößen (Cassiopeia-extended)
Du kannst dich an diesen realistischen Maximalbreiten orientieren:
| Bereich | Maximale Anzeige | Sinnvolle Bildgröße |
|---|---|---|
| Header / Titelbild | ~1200 px | 1600 px |
| Artikelbild groß | ~900 px | 1200 px |
| Blog-Vorschau | ~400 px | 600 px |
| Sidebar Bild | ~300 px | 400 px |
| Thumbnail / Liste | ~150 px | 300 px |
| Logo | ~250 px | exakt 250 px |
| Mitarbeiterfoto | ~250 px | 400 px |
| Galerie groß | ~800 px | 1200 px |
Warum größer speichern? → wegen Retina-Displays.
Optimale Dateigröße
| Bildtyp | Ziel-Dateigröße |
|---|---|
| Headerbild | 120–250 KB |
| Artikelbild | 70–150 KB |
| Blog-Teaser | 40–80 KB |
| Thumbnail | 10–25 KB |
| Logo | < 25 KB |
| Icons | < 10 KB |
Wenn ein Artikelbild 2–5 MB hat → extrem schlecht.
Optimales Format
| Zweck | Format |
|---|---|
| Fotos | JPG |
| Grafiken mit Transparenz | PNG |
| Logos / einfache Grafiken | SVG |
| Moderne Websites | WebP (wenn möglich) |
Wichtig:
PNG für Fotos ist der häufigste Anfängerfehler → 10× größere Dateien.
Qualitäts-Einstellung (JPG)
Im Media-Manager beim Resize: Qualität: 80–85 %
| Qualität | Ergebnis |
|---|---|
| 100% | riesige Datei |
| 90% | unnötig groß |
| 80% | optimal |
| 60% | sichtbar schlecht |