📝 Bildgrößen & Bildformate im WebBildgrößen & Bildformate im WebBildgrößen & Bildformate im Web

📐 Typische Bildgrößen im Webbereich

• Headerbild: Headerbild: 

• • ca. 2100 × 1100 Pixel, Dateigröße 150–350 KB
    ➜ Für vollflächige Startbilder mit Textüberlagerung geeignet
    
    

• Inhaltsbild (z. B. Text-Bild-Kombinationen): Inhaltsbild (z. B. Text-Bild-Kombinationen): 

• • 1000–1400 Pixel Breite, 100–250 KB
    ➜ Für Bilder im Fließtext oder unterhalb des Headers
    
    

• 3er-Block / Feature-Boxen: 3er-Block / Feature-Boxen: 

• • 600 × 400 Pixel oder 550 × 550 Pixel (quadratisch), 50–90 KB
    ➜ Für Vorteilskacheln, Kategorieboxen oder Schnellübersichten

📄 Bildformate – wann PNG, wann JPG?

JPG (JPEG):

• Ideal für Fotos und emotionale Bilder
  
  

• Kleine Dateigröße, gute Kompression
  
  

• Keine Transparenz möglich
  
  

PNG:

• Ideal für Logos, Icons, Grafiken oder Screenshots
  
  

• Transparenter Hintergrund möglich
  
  

• Höhere Dateigröße, aber verlustfrei
  
  

WebP:

• Modernes Format mit guter Qualität bei kleiner Dateigröße
  
  

• Eignet sich für Fotos und Grafiken
  
  

• Wird noch nicht in allen Tools unterstützt
  
  

Merksatz:

→ Fotos = JPG oder WebP

→ Grafiken & Logos mit Transparenz = PNG oder WebP

⚙️ Tipps für den Webeinsatz

• Bilder immer komprimieren (z. B. mit TinyPNG.com)
  
  

• Einheitliche Größen & Seitenverhältnisse verwenden
  
  

• Sprechende Dateinamen & Alt-Texte für SEO nutzen
  Beispiel: waermepumpe-tirol-header.jpg
  
  

• Auf Responsive Design achten: Bilder sollen auch auf Mobilgeräten gut aussehen
  
  

• Wenn möglich: Lazy Loading aktivieren (Bilder werden erst beim Scrollen geladen)