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)

NEU im #klickkomplizen Blog: Sandy hat die erste aufgesetzt, die neue #GoogleAds Discovery Kampagne. Wie das geht u… https://t.co/P71MM6xRaK
NEU im #klickkomplizen Blog: #facebook wird immer persönlicher: ab sofort können Administratoren einer Seite direkt… https://t.co/oKp5eJqmlw
NEU im #klickkomplizen Blog: zusammen mit unseren neuen Nachbarn ZAROF wirkten wir am Projekt querdenken mit, um St… https://t.co/DBCAc3DfJ2
NEU im #klickkomplizen Blog: unser neuer Kollege Patrick lernt fleißig #GoogleAds und stellt euch hier einen oldie,… https://t.co/LcOmcn6PL8
NEU im #klickkomplizen Blog: Sabrina und Tomke waren auf dem alljährlich stattfindenden #seacamp in Hannover, um d… https://t.co/U6d9okx6nO
NEU im #klickkomplizen Blog: nach der Integration des #Instagram Postfachs in das FB Postfach kommt jetzt das Updat… https://t.co/LlDxMspasf
NEU im #klickkomplizen Blog: ☀ das Grau des Novembers hat uns schon ganz erfasst, aber Tina hatte sogar noch ein p… https://t.co/iSXgLFZDkv
NEU im #klickkomplizen Blog: 🤳 Anastasia hat sich mit einer neuen Platzierungsmöglichkeit des #Facebook Werbeanzeig… https://t.co/Vj6QpDPSm9
NEU im #klickkomplizen Blog: Seit einem Monat gibt es nun schon neue männliche Unterstützung im KK-Team: wir begrüß… https://t.co/76VWd912uE
NEU im #klickkomplizen Blog: es gibt News bei @LinkedInDACH ! Kerstin freut sich über das Event Feature. Vielleich… https://t.co/UF0Xl1pcI4
NEU im #klickkomplizen Blog: Vivien gibt #Ads Newbies ein paar Tipps an die Hand, woran sie denken müssen, wenn der… https://t.co/2fjKovqrC4
NEU im #klickkomplizen Blog: Sabrina & Anastasia haben auf der @OTMR_Konferenz dieses Jahr einen Vortrag zu Automat… https://t.co/15cgbKbYG3
NEU im #klickkomplizen Blog: habt ihr schon von Facebooks "Power 5" für Online Ads gehört? Fünf Stellschrauben, mit… https://t.co/YKaC6HSFJw
NEU im #klickkomplizen Blog: Peggy erklärt hier ein paar Tricks und Kniffe für #GoogleAds Einsteiger, die oft in de… https://t.co/ByaJGfhY5p
Sabrina & Anastasia haben heute eine Mission auf der #OTMR19. Stay tuned! https://t.co/UAWgHWRwIh
NEU im #klickkomplizen Blog: die zweite spannende Konferenz, auf der sich (wieder) Tomke herumgetrieben hat, war di… https://t.co/wUZjQVkuXW
NEU im #Klickkomplizen Blog: Im Herbst ist Bildungs-Saison. 🤓 Den Start macht Tomke auf der #InfluencerMarketing Ko… https://t.co/ni9xisPDvk