Optimierung von Grafiken

Damit das digitale Rubbellos auf dem Gerät von Teilnehmenden schnell geladen werden kann (besonders über mobiles Internet), sollten alle Grafiken auf eine kleine Dateigröße hin optimiert werden. Möchtest du die Grafiken selbst vorbereiten, geben wir dir hier ein paar Tipps, mit welchen Mitteln du das selbst umsetzen kannst und worauf zu achten ist.

Bei der Auswahl des Dateityps achte auf folgende Richtwerte:
Bei einer Grafik mit wenigen Farben > Verwende eine PNG-Grafik
Bei einer Grafik mit wenigen Farben und mit Transparenz (z.B. Gewinngrafik, Logo) > Verwende eine PNG-Grafik
Bei einer Grafik mit vielen Farben, ohne Transparenz (z.B. Los-Hintergrund, Rubbelfläche) > Verwende eine JPG-Grafik

Achte bei der Erstellung der Bilddatei auf die Auflösung. Diese sollte zwar so hoch sein, dass das Bild scharf wirkt, aber nicht zu hoch, um unnötige Ladezeit zu vermeiden.

Verkleinern kannst Bilddateien sehr gut mit folgendem, kostenlosen Web-Tool: TinyPNG
Dieses Tool erreicht häufig bis zu 80% Dateigrößen-Reduzierung, ohne dass die Bildqualität leidet.

Bitte beachte: Verwende keine Leer- oder Sonderzeichen im Dateinamen deiner Bilder und Grafiken. Solche Dateien können nicht verarbeitet werden und führen zu Problemen bei der Darstellung.

Bei Gewinnsorten und auch einer Tombola-Los-Sorte kannst du jeweils eine eigene Grafik festlegen, die im Los freigerubbelt wird und in der Folge im Los und in der Benachrichtigungs-E-Mail bzw. -SMS sichtbar wird und die Gewinnsorte repräsentiert.

Optimal ist eine Grafik, die rund erscheint, da sie unter der Rubbelfläche eine sehr harmonische Optik bietet. Dafür legst du eine quadratische Grafik mit transparentem Hintergrund an. Auf diesen Hintergrund legst du ein kreisrundes Objekt auf dem alle anderen Bildinformationen untergebracht sind. Diese Vorlage speicherst du als PNG mit Transparenz.
Die Auflösung dieser Grafik beträgt möglichst 260x260px. Damit ist sie auch auf hochauflösenden Displays noch scharf, benötigt aber nicht unnötig Speicherplatz und damit Ladezeit.

Ein Beispiel findest du hier:

Weitere Vorlagen für die Erstellung der Los-Grafiken findest du außerdem hier.