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)

#Facebook zieht auf der eigenen Plattform nach und testet das Verbergen von Likes ähnlich wie bei #Instagram.… https://t.co/AqQd8gt6JS
#TikTok wird übersichtlicher und führt zur besseren Strukturierung der Inhalte die Möglichkeit der Playlists ein.… https://t.co/cXKDAqrZiS
Entdeckt bei @Zielbar_DE: #Twitter arbeitet an einer Gruppenfunktion. Ein spannender Ansatz, um sich besser zu vern… https://t.co/M2VvQQNzAC
Entdeckt bei @einfachDan. Ein spannender Test, fraglich ist jedoch, wie gut die Übersetzung im Endeffekt tatsächlic… https://t.co/e415C0HUDc
Gibt es bald ein schickes Outro für #Tiktok Videos? 🧐 https://t.co/54jFEwBUNe
💡Nutzt ihr Lead Ads auf #Facebook? Wenn nicht, dann werdet ihr auf unserem Blog fündig. Dort gibt's ein umfangreich… https://t.co/57TBX8cqPL
Wohin ist eigentlich der Hype um #Clubhouse verschwunden? 🤔#socialmedia https://t.co/2P5aipQmki
Spannende Erkenntnisse zum Nutzer:innenverhalten in #Google. #onlinemarketing https://t.co/wO3FSCui6M
Alles, was es zum Thema #CTA zu wissen gibt, erfahrt ihr kurz und knackig in diesem Artikel von @chimpify.… https://t.co/Li2G8NhZ3z
💡Du fragst dich jedes Mal aufs Neue, welche Bildgrößen du für #Instagram brauchst? Auf unserem Blog gibt's die Über… https://t.co/RejP1zgqFq
💡Responsive Displayanzeigen bei #GoogleAds auswerten? Mit dem Blogbeitrag von Sabrina kein Problem mehr. 👇https://t.co/u1LJDMvvLG
📭 Postfächer auf - der neue #Klickkomplizen Newsletter steht in den Startlöchern!Du hast ihn noch nicht abonnier… https://t.co/719cAvKJ4w
Nach dem ersten Hype geht die Entwicklung von #Clubhouse weiter. Diese Features sind nun neu dazu gekommen.… https://t.co/LfDLy8IGcQ
Habt ihr schon die Labels in eurer App? #facebook #socialmedia https://t.co/qPwon1o4Yy
Einen guten Start in die neue Woche wünschen wir. Möge der Kaffee mit euch sein.😎 #klickkomplizen https://t.co/XVdwrun68J
Ein Blick in die Zukunft der digitalen Zusammenarbeit - durch die VR-Brille. Mit einem faszinierenden Werbevideo.… https://t.co/rb6noQLNEp
Das klingt doch nach einem netten Feature für #WhatsApp. #socialmedia https://t.co/JFAjLOv6KB
Immer wieder Neuerung bei #Twitter: diesmal im Bereich #Spaces und dem Vorplanen von Beiträgen. #socialmedia https://t.co/GxLvUSufGY
💡How to do #Instagram #Reels? Auf unserem Blog erfahrt ihr, was ein gutes Reel ausmacht und bekommt ein paar Tipps… https://t.co/mhInOmeUqs