Webdesign

Tipps zur Bildbearbeitung fürs Web

Tipps zur Bildbearbeitung fürs Web

Bei der Verwendung von Bildern bzw. Grafiken auf Webseiten oder Blogs muss man – im Idealfall bereits beim Erstellen – so einige Dinge berücksichtigen, um den Besuchern die Bedienbarkeit so angenehm wie möglich zu gestalten. Die wichtigsten Hinweise haben wir kurz und knapp zusammengefasst.

Bildqualität und Auflösung

jpg-optionenDerzeit sind hochauflösende, bildschirmfüllende Bilder im Internet sehr im Trend – schick sieht das allemal aus. Doch was oft vergessen wird: Obwohl viele Nutzer über eine 16.000-er DSL-Leitung verfügen, sind noch lange nicht alle Menschen so schnell im Web unterwegs. Durch schöne Bilder bedingte lange Ladezeiten führen im ungünstigsten Fall dazu, dass die Seite verlassen wird, bevor sie überhaupt vollständig angezeigt ist.

Anders als im Printbereich kann man deshalb im Web die Qualität der Bilder durchaus geringer halten. Bei fotografischen Aufnahmen genügt hier meist eine mittlere Qualität der JPGs. Bei einfachen Bildern mit wenigen Details oder Artworks kann man die Qualität in Photoshop auf „Niedrig“ setzen. Über die Vorschau sieht man direkt, wie das Bild für das Web optimiert aussehen wird. Mit diesem Vorgehen kann man einigen Nutzern die Wartezeit im Netz  verkürzen.

Thumbnails statt XXL-Bilder

Wenn man dennoch nicht darauf verzichten möchte, auf der eigenen Internetseite Bilder im großen Format zu präsentieren, sollten Vorschaubilder erstellt werden, um von diesen ausgehend auf große Grafiken zu verlinken. Der Nutzer kann so selbst entscheiden, welche Bilder er anklicken und vergrößert anschauen möchte.

GIF oder PNG?

Sowohl GIFs als auch PNGs eignen sich dazu, Grafiken mit Transparenz (zum Beispiel Logos oder freigestellte Bilder) für das Web abzuspeichern. GIF-Grafiken können jedoch maximal 256 Farbtönen wiedergeben. Damit dienen sie in den meisten Fällen nur noch als Dateiformat für Animationen. Nicht animierte, freigestellte Grafiken sollten unbedingt als PNG abgespeichert werden, da dieses Dateiformat ein größeres Farbspektrum und somit auch eine bessere Qualität hat.

CMYK oder RGB?

FarbmodusIm Printbereich ist der CMYK-Farbmodus (Cyan, Magenta, Yellow, Black) Standard. Bei diesem Farbmodus werden die Farben aus 4 Farbtönen gemischt. Im Webbereich sind RGB-Farben (Red, Green, Blue) gefragt. Man kann zwar Grafiken auch für den Online-Bereich im CMYK-Farbmodus abspeichern, jedoch benötigen diese Dateien deutlich mehr Speicherplatz, was wiederum die Ladezeit der Bilder verlängert. Außerdem kann es in einigen Browsern vorkommen, dass die Farben der Bilder ein wenig verfälscht werden. Im RGB-Farbmodus abgespeicherte Bilder sorgen für Farbechtheit.

Habt Ihr noch mehr Hinweise, die man unbedingt beherzigen sollte?

The following two tabs change content below.

Mario

Hallo, mein Name ist Mario. Als Praktikant habe ich von Februar bis Juli 2013 meine ersten Praxiserfahrungen im Bereich Online Marketing gesammelt. Hier gibt es alles zu lesen, was ich bei den Klickkomplizen gelernt habe - von Suchmaschinenmarketing bis Social Media Marketing.

Neueste Artikel von Mario (alle ansehen)

Auch wir gehören schon lange zur Upstalsboom Familie <3 https://t.co/aWASBiK7L4
NEU im #Klickkomplizen Blog: 👉📸 Tomke hat euch kurz notiert, wie man Instagram Beiträge speichert und was es dem Un… https://t.co/AkJ2KWwfTs
RT @sejournal: How to Overcome the 3 Biggest Blogging Challenges via @jamarketer: https://t.co/83ltha680lhttps://t.co/57xpBbCuyz
NEU im #Klickkomplizen Blog: Vivien hat sich mit dem Begriff #newwork befasst und ihre Gedanken zusammen geschrieb… https://t.co/PZ8RFsaBFr
NEU im #Klickkomplizen Blog: unsere #Grafikerin Katja gibt euch mal wieder wertvolle Tipps. Diesmal: geht es um Far… https://t.co/MEt5TjTO8e
NEU im #Klickkomplizen Blog: ✌😎✌ Anastasia stellt euch 4 coole Apps vor, mit denen ihr eure #instagram #stories noc… https://t.co/IAroCAAVuC
NEU im #Klickkomplizen Blog: Sport frei! Diesmal hatten die Klickies eine sportliche Premiere: wir stellten zum ers… https://t.co/B6HYTtpTKZ
Immer wieder montags ... ✍ geht's bei uns in das wöchentliche Meeting. Wie gestaltet ihr eure interne Meeting-Kommu… https://t.co/ScIAt3dC2H
NEU im #Klickkomplizen Blog: die Kunst der Landing-Pages. 🔎📣🔎 Tina hat ihre Schatzkiste geöffnet und gibt Tipps, we… https://t.co/b8EZDTAJ0s
NEU im #Klickkomplizen Blog: Vivi hat alle Tipps & Tricks unseres Büro-Umzuges gesammelt und euch aufbereitet:… https://t.co/ZFouQaDnE5
NEU im #Klickkomplizen Blog: Achtung, Announcement! 📣📣📣Zum 01.08. hält #Facebook einige Änderungen bereit, die eure… https://t.co/ll2t9LrjqG
NEU im #Klickkomplizen Blog: Peggy stellt euch ein neues Feature des #Facebook Werbeanzeigenmanagers vor, mit dem a… https://t.co/W9i0Sml9AX
Hey, Monday! Es gibt diese Tage, da fällt einem einfach kein witziger Aufhänger für einen Post oder eine Kontaktauf… https://t.co/RPtVAIJzeG
NEU im #Klickkomplizen Blog: wir begrüßen ein neues Gesicht im Team! Niklas ist als einziger Mann im Hause eine Ve… https://t.co/35U0IKtp3E
NEU im #Klickkomplizen Blog: Tomke erklärt uns mal wieder den heißesten Sch*** von #instagram. 👉 What's new: der Ch… https://t.co/p9zDE1FaF7
NEU im #Klickkomplizen Blog: Bist du auch schon ein Top Fan einer #facebook Seite geworden? Sabrina erklärt euch di… https://t.co/ebSYqdKrDW
RT @basicthinking "Ohne Prinzipien wie Eigenverantwortung, gegenseitiges Vertrauen oder Selbstorganisation wäre in… https://t.co/JeFih3aAY1
NEU im #Klickkomplizen Blog: Vivien hat einen neuen Freund. Er heißt #novi und versorgt sie täglich mit den frische… https://t.co/m3KMiJoGEo
War euch das Wochenende zu kurz? Forscher solle die perfekte Menge an Freizeit berechnet haben ... lest selbst: (Sp… https://t.co/G4BbjG5T3Q