Joomla-konforme Bild-Praxis (kurz & wichtig)

⚙️ 1. Verwende WebP, wenn möglich

→ WebP ist kleiner und wird von modernen Browsern unterstützt.

⚙️ 2. Bildgröße vorher anpassen

Wenn dein Modul max. 800 px Breite braucht → hochladen = max. 800 px
→ Keine riesigen 4000 px Bilder hochladen.

Pfad im Backend: Inhalt → Medien → Bilder hochladen 

⚙️ 3. ALT-Text immer setzen

Warum?

✔ SEO
✔ Accessibility

Wenn du ein Bild hochlädst, trage: ALT = Aussage über das Bild 
z. B. „Joomla 6 Startseite Beispiel“

⚙️ 4. Verwende sinnvolle Dateinamen

Statt: DSC1234.jpg
Nutze: joomla6-seo-beispiel.webp 

→ besser für Google.

⚙️ 5. Responsive Bilder

Moderne Templates erzeugen meist srcset, aber du kannst es unterstützen:
<img src="..." srcset="..." sizes="...">
→ Browser lädt passende Größe.

Bearbeitung-Tools für Anfänger

Wenn du starten willst:

➡ Photopea + Squoosh.app
→ decken fast alles ab.

Für Farben:
➡ Coolors.co + ContrastChecker

Für lokale Arbeit:
➡ GIMP (Windows/Mac)

Photopea – kostenlos & online

👉 Photoshop-ähnliches Tool im Browser

Was du damit machen kannst:

✔ Zuschneiden
✔ Größenändern
✔ Farbkorrektur
✔ Ebenen / Text
✔ Export als JPG/PNG/WebP

➡ http://photopea.com

Warum nutzen?
Braucht keine Installation, arbeitet direkt im Browser, viele Funktionen wie Photoshop.

Squoosh.app – Bilder verkleinern + optimieren

👉 Sehr einfache Online-Optimierung

Funktionen:

✔ Kompression (Qualität reduzieren)
✔ Formatwahl (WebP, MozJPEG)
✔ Vorher/Nachher Vergleich

➡ https://squoosh.app

Perfekt für Joomla 6:
Gerade JPG/PNG stimmen → WebP für schnellere Ladezeit.

TinyPNG / TinyJPG – einfache Kompression

👉 Lädt Bilder, komprimiert stark

Unterstützt:

✔ PNG
✔ JPG

➡ https://tinypng.com

Canva – schneller Grafik-Editor

👉 Einfaches Drag & Drop

Nützlich für:

✔ Banner
✔ Social-Grafiken
✔ Buttons
✔ einfache Layouts

➡ https://www.canva.com

Nachteil:
Nicht so leistungsfähig wie Photopea, aber anfängerfreundlich.

GIMP (Offline) – Profi-Tool kostenlos

👉 Open-Source Programm

Funktionen:

✔ Ebenen
✔ Farbkorrektur
✔ Export als WebP/JPG/PNG

➡ https://www.gimp.org

Warum sinnvoll?
Volle Kontrolle über Bilder, gute Alternative zu Photoshop.

Spezial-Tools für Qualität & SEO

FileOptimizer (Windows)

➡ https://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer (Windows)

Was sie machen:
→ Bilder verlustfrei und stark komprimieren

Warum wichtig für Joomla SEO?
Kleinere Bilder = schnellere Ladezeit = besseres Ranking.

WebP Converter (online)

👉 Konvertiert Grafiken zu WebP

➡ https://convertio.co/de/webp-converter/

WebP spart oft 50 % Dateigröße bei guter Qualität.

Tools für Farben (Color Picker & Paletten)

Coolors.co – Farben generieren

👉 Palette automatisch erstellen

➡ https://coolors.co

Nutze es, um harmonische Farbpaletten für deine Website zu definieren.

Adobe Color – Farbregeln & Kontraste

👉 Farbrad, Farbregeln, Accessibility-Kontraste
➡ https://color.adobe.com/de/create

Damit findest du z. B. passende Akzentfarben zu deinem Design.

ColorZilla (Browser) – Pipette im Browser

👉 Color Picker direkt aus Webseiten. Browser-Erweiterung (Chrome/Edge)
➡ https://www.colorzilla.com

Du klickst eine Farbe an und bekommst den Farbcode.

Contrast Checker – Barrierefreie Farben

👉 Prüft Farbkontrast für Lesbarkeit ➡ https://contrastchecker.com

Google achtet auf ausreichenden Kontrast für Barrierefreiheit.