Gerade beim digitalen Einladungsmanagement kommt es auf jede Sekunde Ladezeit an. Bilder auf deiner Event-Seite, in der Einladung oder beim Ticketdesign müssen nicht nur gut aussehen, sondern auch performant sein. Durch gezielte Bildoptimierung sorgst du für:
• eine schnelle Darstellung auf allen Geräten,
• eine bessere Google-Platzierung (SEO)
• und eine reibungslose User Experience – auch beim Check-in oder RSVP.
Vorteil | Beschreibung |
---|---|
Schnellere Ladezeiten | Reduzierte Bildgrößen beschleunigen den Seitenaufbau. |
Mehr Sichtbarkeit (SEO) | Optimierte Bilder helfen in Google & Bildersuche. |
Weniger Datenvolumen | Besonders wichtig bei mobilen Teilnehmern oder Event-Apps. |
Professioneller Eindruck | Hochwertige, passende Bilder ohne Ladeverzögerung erhöhen die Conversion. |
Barrierefreiheit | Alt-Texte machen Inhalte auch für Screenreader nutzbar. |
Passe die Größe an die tatsächliche Anzeige an:
Einsatzbereich | Empfohlene Größe (B x H) |
---|---|
MUDS Eventbanner | 1280 px x 400 bis max. 720 px Höhe |
MUDS Mailheader und Sujet Eintrittskarte | 800 x 250 px (verpflichtend) |
Module | Templates: Landscape (Querformat) | 640 x 480 px (Mindesthöhe 200 px) |
Module | Templates: Portrait (quadratisch) | 640 x 640 px (Mindesthöhe 300 px) |
• Für Web völlig ausreichend: 72 oder 96 dpi (schnell ladbar, kleine Datei)
• 300 dpi ist NUR für den Druck notwendig
Auflösung beschreibt, wie viele Bildpunkte (Pixel) auf einer bestimmten Fläche dargestellt werden – meist in dpi (dots per inch) oder ppi (pixels per inch). Sie sagt nicht, wie groß ein Bild in Pixeln ist, sondern wie dicht diese Pixel im Verhältnis zur Fläche angeordnet sind.
Format | Einsatzbereich |
---|---|
JPG | Fotos, Hintergründe, große Motive |
PNG | Transparente Grafiken, z. B. Logos |
WEBP | Kompaktes Format mit bester Qualität |
SVG | Vektorlogos, Icons, verlustfrei skalierbar |
Nutze Online-Tools oder Plugins, um die Dateigröße drastisch zu verringern, ohne die Qualität zu ruinieren:
TinyPNG, Squoosh, ImageOptim, ShortPixel
Format | Bildgröße (px) | Auflösung | Verwendungsart | Dateigröße (ca.) |
---|---|---|---|---|
JPEG | 1280 × 720 px | 300 dpi | Druck | ~2–3 MB |
JPEG | 1280 × 720 px | 72 dpi | Weboptimiert | ~150–250 KB |
PNG | 1280 × 720 px | 300 dpi | Druck | ~3–5 MB |
PNG | 1280 × 720 px | 72 dpi | Weboptimiert | ~200–350 KB |
JPEG | 800 × 250 px | 300 dpi | Druck | ~1–2 MB |
JPEG | 800 × 250 px | 72 dpi | Weboptimiert | ~100–200 KB |
PNG | 800 × 250 px | 300 dpi | Druck | ~2–3 MB |
PNG | 800 × 250 px | 72 dpi | Weboptimiert | ~120–220 KB |
Selbst bei identischer Bildgröße in Pixeln führt die hohe Druckauflösung zu deutlich größeren Dateien. Für den Webeinsatz in MUDS sind 72 dpi völlig ausreichend – das spart bis zu 90 % Speicherplatz und Ladezeit.
• 80 Mbit/s = 10 MB/s
• Ladezeit = Dateigröße / 10 MB/s
Bildgröße (px) | Auflösung | Format | Dateigröße (ca.) | Ladezeit (ca.) |
---|---|---|---|---|
1280 × 720 px | 300 dpi | JPEG | ~2–3 MB | ~0,2–0,3 s |
1280 × 720 px | 72 dpi | JPEG | ~150–250 KB | ~0,015–0,025 s |
800 × 250 px | 300 dpi | JPEG | ~1–2 MB | ~0,1–0,2 s |
800 × 250 px | 72 dpi | JPEG | ~100–200 KB | ~0,01–0,02 s |
Gute Bildnamen sind nicht nur für Ordnung wichtig – sie bringen auch SEO-Punkte!
Regeln für die Vergabe von Dateinamen:
• Nur kleine Buchstaben
• Bindestriche statt Leerzeichen oder Unterstriche
• Keine Umlaute oder Sonderzeichen
• Dateinamen mit relevanten Keywords
DO’s | DON’ts |
---|---|
einladung-business-event-2025.jpg | IMG_0023.jpg |
checkin-app-interface.png | Screenshot_neu_final2.png |
vip-ticket-muster-530-jahre.jpg | Bild test weiß.jpg |
Barrierefreiheit und SEO profitieren gleichermaßen von Alt-Texten. Sie beschreiben das Bild, falls es nicht geladen wird – oder für Screenreader.
Beispiel (HTML):
<img src=“event-checkin-graz.jpg“ alt=“Check-in-Situation beim Event mit QR-Code-Scan“>
Ob Business-Event, Gala oder Mitarbeiterversammlung – digitale Einladungen leben von starken Bildern. Aber nur gut optimierte Bilder sorgen dafür, dass alles reibungslos läuft: von der Einladung über das RSVP bis zur mobilen Check-in-App. Wer auf Bildoptimierung setzt, spart Ladezeit, erhöht die Sichtbarkeit und wirkt professionell auf allen Ebenen.
#MUDS #Eventmanagement #Veranstaltungsplanung #Einladungsmanagement #CheckinApp #Benutzerfreundlichkeit #KeepItSimple #Eventorganisation #Eventsoftware #Innovation #OnlineEvents #Hybridevents #Eventplanner #Veranstaltungen #SmartesTeilnehmermanagement #Checkliste #Bildoptimierung
MUDS | innovatives Einladungsmanagement und Datenmanagement
Wir sind fest davon überzeugt, dass das Internet für alle verfügbar und zugänglich sein sollte, und setzen uns dafür ein, eine Website bereitzustellen, die für das größtmögliche Publikum zugänglich ist, unabhängig von den Umständen und Fähigkeiten.
Um dies zu erreichen, streben wir an, den Web Content Accessibility Guidelines 2.1 (WCAG 2.1) des World Wide Web Consortiums (W3C) auf der AA-Ebene so streng wie möglich zu entsprechen. Diese Richtlinien erklären, wie Webinhalte für Menschen mit einer Vielzahl von Behinderungen zugänglich gemacht werden können. Die Einhaltung dieser Richtlinien hilft uns sicherzustellen, dass die Website für alle Menschen zugänglich ist: blinde Menschen, Menschen mit motorischen Einschränkungen, Sehbehinderungen, kognitiven Behinderungen und mehr.
Diese Website nutzt verschiedene Technologien, die darauf abzielen, sie jederzeit so zugänglich wie möglich zu machen. Wir verwenden eine Barrierefreiheitsschnittstelle, die es Personen mit spezifischen Behinderungen ermöglicht, die Benutzeroberfläche (UI) der Website anzupassen und sie an ihre persönlichen Bedürfnisse anzupassen.
Zusätzlich verwendet die Website eine auf künstlicher Intelligenz basierende Anwendung, die im Hintergrund läuft und ständig die Barrierefreiheitsstufe optimiert. Diese Anwendung korrigiert das HTML der Website, passt ihre Funktionalität und ihr Verhalten für Bildschirmlesegeräte, die von blinden Benutzern verwendet werden, und für Tastaturfunktionen, die von Personen mit motorischen Einschränkungen verwendet werden, an.
Wenn Sie eine Fehlfunktion gefunden haben oder Verbesserungsvorschläge haben, freuen wir uns über Ihr Feedback. Sie können die Betreiber der Website über die folgende E-Mail-Adresse erreichen: office@muds.at
Unsere Website implementiert die ARIA-Attribute (Accessible Rich Internet Applications) Technik sowie verschiedene Verhaltensänderungen, um sicherzustellen, dass blinde Benutzer, die mit Bildschirmlesegeräten besuchen, die Funktionen der Website lesen, verstehen und genießen können. Sobald ein Benutzer mit einem Bildschirmlesegerät Ihre Website betritt, erhält er sofort eine Aufforderung, das Bildschirmleserprofil zu aktivieren, damit er Ihre Website effektiv durchsuchen und bedienen kann. Hier ist, wie unsere Website einige der wichtigsten Anforderungen für Bildschirmleser abdeckt, zusammen mit Konsolen-Screenshots von Code-Beispielen:
Optimierung für Bildschirmleser: Wir führen einen Hintergrundprozess aus, der die Komponenten der Website von oben nach unten erlernt, um die laufende Konformität auch bei Aktualisierungen der Website sicherzustellen. In diesem Prozess bieten wir Bildschirmlesegeräten bedeutungsvolle Daten mittels der ARIA-Attribute. Zum Beispiel stellen wir genaue Formularbeschriftungen bereit; Beschreibungen für Aktionssymbole (Social-Media-Symbole, Suchsymbole, Warenkorbsymbole usw.); Validierungsanweisungen für Formulareingaben; Elementrollen wie Schaltflächen, Menüs, modale Dialoge (Popups) und andere. Zusätzlich scannt der Hintergrundprozess alle Bilder der Website und bietet eine genaue und bedeutungsvolle Bild-Objekt-Erkennungs-basierte Beschreibung als ALT-Tag (Alternativtext) für nicht beschriebene Bilder. Es wird auch eingebettete Texte innerhalb des Bildes extrahieren, indem eine OCR (Optische Zeichenerkennung) Technologie verwendet wird. Um die Bildschirmleser-Anpassungen jederzeit zu aktivieren, müssen Benutzer lediglich die Tastenkombination Alt+1 drücken. Bildschirmleser-Benutzer erhalten auch automatische Ankündigungen, um den Bildschirmleser-Modus zu aktivieren, sobald sie die Website betreten.
Diese Anpassungen sind mit allen gängigen Bildschirmlesegeräten kompatibel, einschließlich JAWS und NVDA.
Optimierung der Tastaturnavigation: Der Hintergrundprozess passt auch das HTML der Website an und fügt verschiedene Verhaltensweisen mittels JavaScript-Code hinzu, um die Website mit der Tastatur bedienbar zu machen. Dies umfasst die Fähigkeit, die Website mit den Tab- und Shift+Tab-Tasten zu navigieren, Dropdowns mit den Pfeiltasten zu bedienen, sie mit Esc zu schließen, Schaltflächen und Links mit der Eingabetaste zu aktivieren, zwischen Radio- und Checkbox-Elementen mit den Pfeiltasten zu navigieren und sie mit der Leertaste oder Eingabetaste auszufüllen. Darüber hinaus finden Tastaturbenutzer Schnellnavigations- und Inhaltsüberspringen-Menüs, die jederzeit durch Drücken von Alt+1 oder als erste Elemente der Website beim Navigieren mit der Tastatur verfügbar sind. Der Hintergrundprozess steuert auch ausgelöste Popups, indem er den Tastaturfokus sofort darauf verschiebt und nicht erlaubt, dass der Fokus außerhalb davon driftet.
Benutzer können auch Tastenkombinationen wie „M“ (Menüs), „H“ (Überschriften), „F“ (Formulare), „B“ (Schaltflächen) und „G“ (Grafiken) verwenden, um zu bestimmten Elementen zu springen.
Wir bemühen uns, die größtmögliche Auswahl an Browsern und unterstützenden Technologien zu unterstützen, damit unsere Benutzer die am besten geeigneten Werkzeuge mit möglichst wenigen Einschränkungen auswählen können. Daher haben wir sehr hart daran gearbeitet, alle wichtigen Systeme zu unterstützen, die über 95 % des Marktanteils ausmachen, einschließlich Google Chrome, Mozilla Firefox, Apple Safari, Opera und Microsoft Edge, JAWS und NVDA (Bildschirmleser).
Trotz unserer besten Bemühungen, es jedem zu ermöglichen, die Website an seine Bedürfnisse anzupassen, kann es immer noch Seiten oder Abschnitte geben, die nicht vollständig barrierefrei sind, sich im Prozess der Barrierefreiheit befinden oder keine ausreichende technologische Lösung zur Verfügung steht, um sie barrierefrei zu machen. Dennoch verbessern wir ständig unsere Barrierefreiheit, fügen Optionen und Funktionen hinzu, aktualisieren und verbessern sie und entwickeln und übernehmen neue Technologien. All dies soll das optimale Maß an Barrierefreiheit erreichen, entsprechend den technologischen Fortschritten. Für jegliche Unterstützung wenden Sie sich bitte an office@muds.at
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen