Dieser Artikel soll dir beim Hochladen von Bildern auf die Haiilo-Plattform helfen. Er beschreibt die erforderlichen Seitenverhältnisse, Pixelmaße (Breite x Höhe) und andere Spezifikationen für verschiedene Plattformfunktionen, die Bilder enthalten.
Allgemeine Hinweise zum Hochladen von Bildern
- Dateigrößenlimits: Die meisten Standardbild-Uploads haben ein Limit von 10 MB. Der Studio-Editor unterstützt Bilder bis zu 25 MB. Während einige Funktionen keine explizite Größenbeschränkung haben, empfehlen wir, Bilder wann immer möglich unter 10 MB zu halten, um eine schnelle Ladezeit zu gewährleisten. Größere Bilder benötigen mehr Zeit zum Laden.
- Unterstützte Formate: JPEG und PNG werden generell plattformweit unterstützt. Einige Funktionen können andere Formate unterstützen. GIFs werden nur in der Timeline oder im Rich-Text-Editor unterstützt.
- Vektorgrafiken: Für Branding (Logos/White Label App-Assets) wird SVG dringend empfohlen oder ist erforderlich, um sicherzustellen, dass die Benutzeroberfläche auf allen Bildschirmauflösungen scharf bleibt.
- Seitenverhältnis-Erzwingung: Wenn du ein Bild hochlädst, das nicht dem erforderlichen Seitenverhältnis für eine Funktion entspricht, aktiviert Haiilo ein Zuschneidewerkzeug, das dir hilft, den Fokus einfach anzupassen. Wenn das Bild bereits früher in der Datei-Bibliothek hochgeladen wurde, schneidet das System es automatisch so zu, dass es zum Seitenverhältnis des Elements passt, dem du das Bild hinzufügst.
- Kompression: Bilder, die zu Haiilo hochgeladen werden, werden aus Leistungsgründen und zur schnelleren Ladezeit auf kleinere Dateigrößen komprimiert. Die Bilder werden mit der Java ImageIO-Bibliothek konvertiert, wobei eine Kompressionsqualität von 85 % angestrebt wird. Das Ausgabeformat ist immer JPEG. Wenn du bemerkst, dass eines deiner Bilder unscharf ist, kannst du versuchen, ein größeres Bild hochzuladen, um zu sehen, ob das das Problem löst.
- Anzeigeauswirkung: Bilder werden herunterskaliert, um eine geeignete Bildgröße für ihren Anzeigebereich bereitzustellen. Zum Beispiel ist ein Benutzeravatar im Kommentarbereich sehr klein, daher zeigen wir ein XS-Bild. Diese Varianten sind in den folgenden Zielbreiten in Pixeln verfügbar: XS (40), S (80), M (160), L (400), XL (800), XXL (1200) und ORIGINAL für die Originalgröße deines hochgeladenen Bildes.
- Dateivorschauen: Für Informationen über unterstützte Dateiformate, die eine Vorschau erzeugen und direkt auf der Plattform geöffnet und angesehen werden können, lies Unterstützte Dateiformate für Vorschauen.
Benutzerprofile
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Profil-/Avatarbild | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | |
| Titelbild | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Seiten und Communities
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Profilbild für eine Seite oder Community | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | Mit Haiilo AVA kannst du Event-Bilder automatisch generieren. Mehr erfahren. |
| Titelbild (nur Seiten) | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Events
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Profilbild | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | Mit Haiilo AVA kannst du Veranstaltungsbilder automatisch generieren. Mehr erfahren. |
| Titelbild | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Studio
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Bild im Studio-Beitrag oder Newsletter | Beliebig | Beliebig | 25MB |
Unterstützte Bildformate im Studio sind JPEG, PNG, GIF, BMP, WebP und AVIF. Bilder behalten ihre Originalgröße beim Hochladen und können zentriert, links- oder rechtsbündig ausgerichtet werden. Für den Teaser kannst du einen Fokuspunkt für deine Bilder auswählen, um zu steuern, wie sie in Widgets, auf Digital Signage, in der Mobile App usw. angezeigt werden. |
Apps und Widgets
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Anmerkungen |
|---|---|---|---|---|
| Blog App Teaser Bild (Groß) | 1920 x 640 px 2400 x 800 px | 3:1 | - | Dieses Bild wird in Widgets (z. B. Neueste Blog-Beiträge) und in der Mobile App angezeigt. |
| Blog App Teaser Bild (Klein) | 1080 x 1080 px 3000 x 3000 px |
1:1 | - | Dieses Bild wird im Blog App Überblick, in Studio-Newslettern, beim Teilen des Blogs auf der Timeline und beim Lesen des Blog-Beitrags im Browser verwendet, falls ausgewählt. |
| Timeline | Beliebig | Beliebig | - | Bilder werden in einem flexiblen Raster angezeigt. Wenn mehrere Bilder hochgeladen werden, werden sie auf die gleiche Höhe skaliert, während ihre ursprünglichen Breiten beibehalten werden. Erfahre mehr in Anhänge & Links auf der Timeline. |
| Teaser Widget |
Breit: z. B. 1185 x 395 px Quadratisch: z. B. 860 x 860 px Benutzerdefiniert: Definiert durch feste Höhe |
Breit: 3:1 Quadratisch: 1:1 Benutzerdefiniert: Definiert durch feste Höhe |
- |
Die Größe „Benutzerdefiniert“ erlaubt eine manuelle Höhe; GIFs funktionieren nur im „Benutzerdefiniert“-Modus. Obwohl es keine spezifische Größenbegrenzung gibt, werden 10 MB für optimale Ergebnisse und schnellere Ladezeiten empfohlen. |
| Image Widget | Beliebig | Beliebig | - | Das Seitenverhältnis des Bildes bleibt erhalten, aber die Größe hängt von der Spalte ab, in die das Widget eingefügt wird; eine schmalere Spalte = ein kleineres Bild. Erfahre mehr in Widgets hinzufügen. |
| Media Widget | Beliebig | Beliebig | - |
Bilder im Media Widget sind in einem Raster angeordnet. Wenn du eine ungerade Anzahl von Bildern hast, wird das erste Bild im Verhältnis 2:1 angezeigt, während die restlichen Bilder im Verhältnis 1:1 dargestellt werden. Bei einer geraden Anzahl von Bildern erscheinen alle Bilder im Verhältnis 1:1. Beim Öffnen werden die Bilder in ihren Originalverhältnissen angezeigt. |
| Rich Text Editor Widget | Beliebig | Beliebig | - | Bilder können durch Ziehen an den Ecken oder durch manuelle Eingabe von Breite und Höhe in Pixeln in der Größe verändert werden. Erfahre mehr in Bilder und Videos im Rich-Text-Editor hinzufügen. |
Hero Teaser
| Funktion | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Slider Hero Teaser (Desktop) | 1920 x 640 px 2400 x 800 px | 3:1 | 10MB | |
| Slider Hero Teaser (Mobile) | 1024 x 768 px 1200 x 900 px | 4:3 | 10MB | |
| Cards Hero Teaser (Primäres Bild) | 2000 x 1000 px 2400 x 1200 px |
2:1 | 10MB | |
| Cards Hero Teaser (Sekundäre Bilder) | 800 x 1000 px 1080 x 1350 px |
4:5 | 10MB |
Plattform-Theme
| Feature | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Front-Logo (Login) | Min. 80 px (Höhe) | Variiert | - | |
| Navigationsleisten-Logo | Min. 100 px (Höhe) | Variiert | - | SVG-Format für Qualität empfohlen. |
| Favicon | 16 x 16 px | 1:1 | - | Muss im .ico-Format sein. |
| iOS Homescreen-Icon | 180 x 180 px | 1:1 | - |
PNG-Format. Wird verwendet, wenn die URL als Lesezeichen zum Mobile Homescreen hinzugefügt wird. |
Launchpad
| Feature | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Launchpad | 180 x 180 px | Beliebig, aber 1:1 empfohlen | - |
Ein Launchpad-Symbol wird automatisch von der URL abgerufen, die du für das Launchpad angibst. Du kannst es bei Bedarf manuell ersetzen. Das Symbol wird automatisch auf einem weißen Hintergrund platziert, was zu einem weißen Rand führt. Das Seitenverhältnis eines hochgeladenen Bildes bleibt erhalten, aber wir empfehlen ein 1:1-Verhältnis, um sicherzustellen, dass das Symbol sichtbar bleibt. |
Mobile App
| Feature | Beispielmaße | Seitenverhältnis | Max. Größenlimit | Hinweise |
|---|---|---|---|---|
| Bild/Banner für Mobile Dashboard |
Einzelbild: Min. 54 px (Höhe) Zwei Bilder: z.B. 1080 x 1080 px Masonry-Grid:
|
Einzelbild: Variiert Zwei Bilder: 1:1 Masonry-Grid:
|
10MB |