Wer kennt das Problem nicht – Man schreibt fleißig an seinem Blogbeitrag mit WordPress und möchte die passenden Grafiken hochladen, muss dann aber leider feststellen, dass diese verschwommen angezeigt werden. Ein anderes Szenario, welches ebenfalls häufig auftritt, ist, dass die Bilder zwar ordentlich angezeigt werden, die Webseite aber ewig lädt. Dies kann sowohl an dem gewählten Format, als auch an den eingestellten Größen liegen. Doch wie für fast jedes Problem, gibt es auch hier Lösungen, die im Folgenden vorgestellt werden sollen.
Wir legen mal los…
JPG oder PNG?
Zu Beginn sollte man sich überlegen, ob die Grafik in im Format JPG oder PNG abgespeichert und hochgeladen werden sollte. JPG’s sind deutlich kleiner als PNG’s und tragen dazu bei, dass die Webseite schneller lädt. Eine PNG-Datei kann jedoch mehr Informationen speichern als eine JPG-Datei und begünstigt eine verlustfreie Komprimierung. Bei Logos, komplexen Grafiken etc. sollte daher auf PNG gesetzt werden, bei Bildern reicht zumeist das Format JPG aus.
Wie und wo verändere ich die Größe und das Format meiner Grafik?
In Bildbearbeitungstools, wie zum Beispiel Canva, besteht die Möglichkeit, das gewünschte Motiv in verschiedenen Pixelgrößen abzuspeichern. Über einen Regler kann die gewünschte Prozentzahl der Originalgröße eingestellt werden. Auch besteht dort häufig die Möglichkeit, vor dem Download zu entscheiden, ob die Grafik im Format PNG oder JPG abgespeichert werden soll.
Auf den Screenshots ist zu sehen, dass unter dem Menü „Dateityp“ ausgewählt werden kann, welches Format gewünscht ist. Zudem sind die bereits erwähnten Regler zu erkennen, mittels welchen sich sowohl die Größe, als auch die Qualität der Datei in Prozent anwählen lassen. Verändert man die Größe, bleibt das Bild von den Proportionen her gleich, es ändert sich lediglich die Pixelanzahl und damit auch das Volumen der Datei.
Und welche Pixelgröße wähle ich nun?
Um zu verdeutlichen, welchen Unterschied, die Wahl an Pixeln, bzw. die Höhe an Qualität hat, wird nun dieselbe Grafik in verschiedener Pixelanzahl und in den verschiedenen Formaten vorgestellt. Hier sollten die Unterschiede nun deutlich zu erkennen sein.
Grafik 1 (PNG):
Grafik 2 (PNG):
Grafik 3 (JPG):
Grafik 4 (JPG):
Und wie entscheide ich mich nun?
Wie bei den Beispielen deutlich zu erkennen ist, ist die Auflösung im PNG-Format schöner. Allerdings ist auch die KB-Zahl wesentlich höher. Letztendlich ist es hilfreich, ein wenig herumzuprobieren, bis man die bestmögliche Qualität, bei möglichst geringer KB-Zahl erreicht hat. Denn wie bereits erwähnt: Die Ladezeit einer Webseite, sollte man immer im Hinterkopf behalten. Dies ist für die usability von hoher Relevanz. Braucht eine Webseite zu lang, springen Nutzer:innen oft ab. Unnötig große Formate sollten daher also unbedingt vermieden werden. Es gilt also einen guten Mittelweg, zwischen der perfekten Auflösung und einer flotten Datenverarbeitung zu finden. Unnötig große Dateien sollten aber in jedem Falle vermieden werden.
Viel Spaß beim Ausprobieren!
Ps: Falls du mehr hilfreiche Tipps, zum Thema WordPress erhalten möchtest, ließ doch mal hier nach.
Isabel
Neueste Artikel von Isabel (alle ansehen)
- ChatGPT und die Auswirkung auf die Umwelt - 20. März 2024
- Die optimale Nutzung von ChatGPT zur Contenterstellung - 10. Januar 2024
- Das neue Visualisierungsprojekt von Google Trends - 2. August 2023
