Alles rund um Bilder

Bilder spielen eine entscheidende Rolle für die visuelle Gestaltung deiner Spreadmind Plattform. Damit deine Bilder korrekt angezeigt werden, solltest du sie vor dem Upload in das passende Format bringen und darauf achten, dass die Perfomance (Ladezeit) nicht darunter leidet, indem zu große Bilder genutzt werden.

Diese Anleitung hilft dir dabei, die richtigen Bildformate für verschiedene Elemente deiner Spreadmind Plattform zu finden und wie du diese einfügen kannst.

Erlaubte Dateiformate

Standardmäßig erlaubte Dateiformate sind:

• JPEG/JPG: Optimal für Fotos und detaillierte Bilder.
• PNG: Geeignet für Bilder mit transparentem Hintergrund.
• GIF: Für animierte Grafiken.

Richtwerte für Dateigrößen

Damit deine Webseite schnell lädt, solltest du auf die Dateigröße der Bilder achten. Hier sind einige Richtwerte:

Allgemeine Richtwerte

• Kleine Bilder (Thumbnails, Icons): Maximal 50–100 KB.
• Mittlere Bilder (Blogbilder, Inline-Bilder): Maximal 200–300 KB.
• Große Bilder (Hero-Banner, Hintergrundbilder): Maximal 500–700 KB.

Die Optimierung deiner Bilder vor dem Hochladen ist essenziell, um die Ladezeit deiner Webseite zu minimieren. Eine zu große Dateigröße kann sich zudem auch negativ auf die Nutzererfahrung sowie das SEO-Ranking auswirken.

Wir empfehlen daher, deine Bilder vor dem Upload zu komprimieren:

• Nutze Komprimierungstools wie TinyPNG oder CompressPNG, CompressJPG.
• Passe die Auflösung an die tatsächlichen Anforderungen an (keine übergroßen Bilder).
• Web-freundliche Bilder haben eine Größe von 100–200KB

Bilder mit Canva gestalten

Canva ist ein benutzerfreundliches Online-Tool zur Erstellung und Bearbeitung von Grafiken. Mit Canva kannst du ohne Design-Vorkenntnisse ansprechende Bilder, Poster, Social-Media-Grafiken und vieles mehr gestalten. Es bietet dir:

• Vorlagen: Tausende von professionellen Vorlagen für verschiedene Formate wie Social Media, Blogbilder oder Banner.
• Anpassungsoptionen: Füge Texte, Formen, Icons und eigene Bilder hinzu und passe Farben sowie Schriftarten an.
• Export in verschiedenen Formaten: Speichere deine Designs als PNG, JPEG oder PDF. Web-optimierte Bilder können direkt exportiert werden!
• Teamarbeit: Arbeite gemeinsam mit anderen an deinen Designs, ideal für Unternehmen, kleinere Teams oder Projekte.

Canva hilft dir, Zeit zu sparen und professionelle Ergebnisse zu erzielen, selbst wenn du kein Experte im Grafikdesign bist. Es eignet sich perfekt, um Bilder für deine Spreadmind Plattform oder andere Plattformen wie Instagram, Facebook & Co. schnell zu erstellen und optimal anzupassen.

Wie füge ich ein Bild ein?

Grundsätzlich kannst du all deine Bilder im Backend unter "Medien" hinzufügen und danach später deinen Inhalten zuweisen. Der Upload ist auch direkt im Bearbeitungsmodus einer Seite, eines Kurses usw. möglich. Hierfür kannst du entweder über den Editor Bilder in deinen Inhalt einbinden oder du findest benutzerdefinierte Felder, wie bspw. beim Einfügen eines Kurs-Vorschaubildes (s.u.).

Weitere Anleitungen:

• Divi Theme: Wie füge ich ein Bild ein oder tausche es aus?

Bild Format für Inline-Bilder und Hintergründe

Inline-Bilder sind Bilder, welche direkt in deinen Inhalt (Text auf einer Produkt-, Kursseite, Blog-Artikel,...) eingebunden werden.

• Empfohlene Größe für Inline-Bilder: max. 800 Pixel Breite.

Ein Bild kann auch als Hintergrundbild in einem bestimmten Abschnitt hinzugeügt werden. In der Regel wird das Bild dabei auf die verfügbare Breite und Höhe automatisch skaliert. Daher sollten Hintergrundbilder grundsätzlich hochauflösender sein und eher ein 16:9 Verhältnis nutzen im Vergleich zu Inline-Bilder.

• Empfohlene Größen für Hintergründe: 1920 Pixel Breite.

Weitere Anleitungen:

• Divi Theme: Wie kann ich die Größe meiner Hintergrundbilder ändern?
• Divi Theme: Wie kann ich die Größe meiner Bilder ändern?

Bild Format für Online Kurse

• Empfohlene Größe für Kurs-Vorschaubild: 770 x 430 Pixel
• Empfohlene Größe für Kurs-Bannerbild (bei Community): 1350 x 350 Pixel

Weitere Anleitungen: Wie füge ich ein Kurs-Vorschaubild ein?

Bild Format für Video-Overlay

Bei Videos kannst du optional ein Bild als Overlay hinzufügen, welches beim Laden der Seite anstelle des ersten Videoframes angezeigt wird (Play Button weiterhin sichtbar). Dies ist vor allem dann sinnvoll, wenn dein Video mit einem Fadein startet und somit nur eine schwarze oder weiße Fläche mit Play Button zu sehen wäre.

• Empfohlene Größe für Video-Overlay Bild: 1280 x 720 Pixel oder 1920 x 1080 Pixel.
• Dateiformat: JPG

Bild Format für Community (Social E-Learning)

Das Communitytool (ab der Social E-Learning Lösung) erfordert spezielle Bildmaße für Profile, Coverbilder und Beiträge.

Mit welchem Format Spreadmind arbeitet:

• Profilbilder: 300 x 300 Pixel
• Coverbilder: 1350 x 350 Pixel
• Gruppen-Icons: 150 x 150 Pixel

Bild Format für Blog-Artikel

• Featured Images (Beitragstitelbild): 1200 x 628 Pixel (Generell: 16:9 Verhältnis)
• An allgemeine Vorgaben zur Dateigröße halten (Möglichst kleine Datei = schnellere Ladezeit = gut fürs Ranking)
• Bilder in einen Blogbeitrag einbinden geht so: Wie füge ich ein Beitragsbild hinzu oder tausche es aus und Bilder in den Beitrag einbinden (Kapitel 4.1)

Bild Format für Produkte

Das Featured Image bei Produkten wird standardmäßig auf der Kasse-Seite deiner Spreadmind Plattform quadratisch vor dem Produkttitel angezeigt. Daher solltest du darauf achten, keine wichtigen Informationen (Texte) zu integrieren.

• Produktbilder: 400 x 400 Pixel

Weitere Anleitungen: Wie kann ich ein Produkt-Bild hinzufügen?