TwitterFacebookCallback


Melanie Gerber
Art Direction
 
041 318 34 53
m.gerberbag.ch
Newsletter abonnieren

17.02.2016

Kategorie: Design & Interactive


Freude an Bildern – auch online

 

Ein Bild sagt bekanntlich mehr als tausend Worte. Doch wie bereitet man Bilder optimal fürs Web auf? Wie kann ich Bildausschnitte definieren, damit die Bilder auf jedem Endgerät gut aussehen? Und welches Dateiformat eignet sich am besten? Ein Leitfaden für Bildliebhaber und all jene, die es werden möchten.

 

Das Bildmaterial kennen

 

Um einem Bildslider die optimalen Parameter mitzugeben, ist es wichtig, das Bildmaterial zu kennen. Das heisst, wenn ich viel Bildmaterial habe, das bildrelevante Informationen zentriert abbildet, soll ein Slider entsprechend so programmiert sein, dass sich die Bilder zentriert ausrichten und das Bild von links und rechts gleichmässig beschnitten wird. Und was, wenn das Bildmaterial noch offen ist? Dann muss sich anschliessend das Bildmaterial der Programmierung anpassen. Über das mögliche Bildverhalten im Slider habe ich Ihnen in einem separaten PDF einen Auszug zusammengefasst.

 

 

 

Das relevante Sujet im Bild ist zentriert dargestellt und auf jedem Gerät ersichtlich.

 

Hoch- oder querformatige Bilder?

 

Grundsätzlich gilt im Web, dass sich querformatige Bilder besser eignen als hochformatige. Dies aus dem Grund, weil viele Bildslider querformatig oder sogar bildschirmfüllend gestaltet sind. Hochformatige Bilder können aber durchaus im Inhaltsbereich eingesetzt werden.

 

Datenmenge

 

Die Bildgrösse hat Einfluss auf die Datenmege. Bilder im Megabyte-Bereich haben auf einer Website nichts zu suchen, da diese eine viel zu hohe Ladezeit verursachen. Gerade auf Smartphones ist das problematisch, da hier nicht immer eine gute Internetverbindung zur Verfügung steht. Daher ist es wichtig, die Bilder auf eine vernünftige Grösse zu komprimieren, denn ein Inhaltsbild, das 500 Px breit dargestellt wird, braucht man nicht 1500 Px breit abzuspeichern. Um Bilder optimal zu komprimieren, spielt auch das Dateiformat eine zentrale Rolle.

 

Das passende Dateiformat wählen

 

In welches Dateiformat speichere ich nun mein bearbeitetes Bild ab? Drei gängige Bildformate, die sich optimal fürs Web eignen.


JPG: Bilder mit umfangreichen Farben werden optimal als JPG abgespeichert, da dieses Dateiformat einen sehr hohen Farbumfang hat. JPG-Bilder kann man komprimieren, um die Datengrösse zu vermindern. Eine Richtlinie für die optimale Komprimierung gibt es aber nicht, weil diese auch vom Bildmotiv abhängig ist.


PNG: Die Datenmenge kann bei PNG-Bildern sehr tief gehalten werden, da das Format nur 256 Farben speichert. Daher eignen sich vor allem Grafiken und Logos mit geringem Farbumfang für dieses Format. Ein weiterer Vorteil von PNG ist, dass man Transparenzen mitspeichern kann, was bei JPG nicht möglich ist.


SVG: «Scalable Vector Graphics» wird im Web immer gängiger. Bestehende Vektorgrafiken z.B. aus Adobe Illustrator kann ich als SVG abspeichern. Das «Bild» wird dann nicht in Pixel umgerechnet, sondern behält die Informationen der Vektorgrafik. Das heisst: Egal, welches Endgerät (mit unterschiedlichen Bildschirmauflösungen) diese Datei anzeigt, die Grafik wird immer scharf dargestellt, da diese nicht pixelbasiert ist. Ein durchaus spannendes Dateiformat.

 

 

 

 

Viel Spass!

 

Für ein tolles Bild im Web spielen viele Faktoren zusammen: optimale Grösse, bestmögliche Komprimierung, passendes Dateiformat und zu guter Letzt ein aussagekräftiges Bildmotiv, welches auf jeglichen Endgeräten Freude bereitet. In diesem Sinne: viel Freude beim Aufbereiten der Bilder fürs Web!

Kommentare (0)


Zur ÜbersichtMehr Artikel dieses AutorsMehr Artikel dieser Kategorie

Teilen Sie uns Ihre Meinung oder Anfrage mit


Gerne ergänzen wir unsere Beiträge mit Ihren Meinungen und Kommentaren.