Banner innographix Werbeagentur

Bilder für das Web aufbereiten

von

Das World Wide Web unterlag in den vergangenen Monaten / Jahren einem großen Wandel. Durch HTML5, CSS3 sowie responsive Webdesign (für mobile Endgeräte) und Flatdesign (vereinfachtes Design ohne viele Effekte) wird auch an das verwendete Bildmaterial gewisse Anforderungen gestellt.

Speziell im Bereich responsive Webdesign, wo sich Webseiten dynamisch an die zur Verfügung stehenden Auflösungen anpass, sollten Bilder in einer geeigneten Auflösung zur Verfügung stehen. Durch sogenannte adaptive Images werden Bilder bei einigen Content Management Systemen automatisiert in verwendbarer Form zur Verfügung gestellt.

Die Google Webmaster Tools weisen bereits seit einiger Zeit darauf hin, wenn Bilder zu groß abgespeichert wurden oder durch eine Komprimierung noch kleiner werden könnten.

 

Ich bin kein Webdesigner, was nun?

Genau für diesen Fall ist dieser Beitrag gedacht. Für Web-Affine ist vielleicht der ein oder andere Programmhinweis interessant.

Grundsätzliche gilt: Versuchen Sie Bilder immer so klein wie möglich abzuspeichern und dennoch ohne Qualitätsverluste. Speziell neuere Webseiten basieren häufig auf einem mehrspaltigen Raster (960er Raster 1140er Raster) oder setzen auf Frameworks wie beispielsweise "Bootstrap". Sobald diese Webseite auf einem mobilen Endgerät angezeigt werden ordnen sich die Spalten dynamisch an und in einigen Fällen werden Bilder größer als in der Desktop-Version angezeigt. Damit diese nicht unscharf angezeigt werden, sollten Bilder in passender Auflösung zur Verfügung stehen, besonders wenn diese in einer Lightbox (ähnlich Pop-Up) angezeigt werden sollen. Es sollte an dieser Stelle erwähnt sein, dass Bilder direkt von einer Kamera ein wenig zu viel des Guten in Bezug auf die Auflösung sind. Somit gilt es Bilder bevor Sie auf die Webseite geladen werden, passend abzuspeichern.

 

Woran sollte ich mich nun orientieren?

Mit dieser Liste möchte ich Ihnen eine grobe Übersicht geben, die in einzelnen Fällen natürlich abweichen können. Sprechen Sie, sollten Sie sich nicht sicher sein mit Ihrer Agentur oder Ihrem Webdesigner.

  • Bilder sollten mit einem Bildbearbeitungsprogramm zugeschnitten werden (Programme siehe weiter unten)
  • Wenn möglich speichern Sie Bilder immer so ab, dass diese auch noch in einer Lightbox (Pop-Up) darstellbar sind. Mögliche Formate wären 800 px * 600 px (quer), 600 px * 800 px (hoch) oder 960 px * 640 px (quer) bzw. 640 px * 960 px (hoch). Über ein CMS (Content Management System) können Sie Bilder später auch verkleinert darstellen und erst nach einem Klick in einer Lightbox öffnen lassen.
  • Auch wenn dies häufig durch den Nutzer nicht zu sehen ist, geben Sie den Dateien sinnvolle Namen. Verzichten Sie hierbei auf mehr als den Punkt vor dem Dateiformat und ersetzen Sie Leerstellen durch Unterstriche oder Bindestriche. Bei den Dateiformaten sollten Sie primär auf JPG setzen, wenn Transparenzen gewünscht sind PNG und wenn Sie mit dem Einsatz vertraut sind sogar vektorbasierte SVG Grafiken.
  • Setzen Sie wenn möglich auf Erweiterungen / Plug-Ins wie "Adaptive Images" oder "Responsive Images", wodurch Bilder in mehreren Formaten gespeichert werden - sprechen Sie bei Bedarf mit dem Entwickler der Webseite.
  • Wenn Sie mit vielen Bildern auf Ihrer Webseite arbeiten, empfiehlt es sich diese in einer aussagekräftigen und der Webseitenstruktur angepassten Ordnerstruktur zu speichern.

 

Welche Programme sind hierfür geeignet?

Im folgenden Stelle ich Ihnen einige Programm vor, mit denen Sie Bilder bearbeiten können. Einige Programme sind für Einsteiger besser geeignet, für andere bedarf es ggf. einer Einarbeitungszeit. Ich bitte um Verständnis, dass an dieser Stelle Erklärung zum Zuschnitt von Bilder und dem Export für das Web nicht ausführlich beschrieben werden können. Orientieren Sie sich in diesem Fall an der oben aufgeführten Liste.

Viel Spaß beim Kennenlernen des ein oder anderen Programms, für Hinweise nutzen Sie bitte das unter diesem Beitrag eingefügte Kommentar-Formular. Mögliche Kosten für einige Programme werden aufgeführt, die Preise können zwischenzeitlich schwanken.

Paint.NET

Ein Open Source Programm zur Bearbeitung von Bildern. Das Programm ist nicht zu verwechseln mit dem Programm "Paint" welches seit einigen Jahren bereits auf Windows Systemen mit installiert ist.

Betriebssystem: Windows

Preis: kostenlos

Webseite: www.getpaint.net

Pixelmator

Bei Pixelmator handelt es sich um ein gutes und kostengünstiges Bildbearbeitungsprogramm welches für diverse Apple Geräte zur Verfügung steht. Das Programm kann 30 Tage kostenlos getestet werden.

Betriebssystem: iOS (Apple)

Preis: ca. 26,89 €

Webseite: www.pixelmator.com

IrfanView

Ein kleines unscheinbares Programm, welches jedoch alles mit sich bringt was für eine einfache Bildaufbereitung benötigt wird. Lassen Sie sich nicht von der einfach gehaltenen Webseite abschrecken, das Programm macht es wieder gut.

Betriebssystem: Windows

Preis: kostenlos

Webseite: www.irfanview.de

GIMP

Dieses Programm bietet alles was ein gutes Bildbearbeitungsprogramm mit sich bringen muss. Nicht ohne Grund wird es häufig als Photoshop (professionelle Adobe Software) bezeichnet. Ob dies stimmt, sollte bei einem Test selbst beurteilt werden.

Betriebssystem: die meisten

Preis: kostenlos

Webseite: www.gimp.org

Adobe Elements

Ein Programm der Firma Adobe, eine etwas vereinfachte Version von Adobe Photoshop welches häufig bei professionellen Bildbearbeitern zum Einsatz kommt. Für einen gewissen Geldbetrag bekommt man eine professionelle Software zur Bildbearbeitung.

Betriebssystem: Win & Mac OS

Preis: ca. 80 €

Webseite: www.adobe.com

Die oben aufgeführten Programme sollten Ihnen bei der Bearbeitung von Bildern helfen. Wenn Sie Ihre Bilder zusätzlich noch komprimieren wollen, empfehle ich Ihnen die folgenden Programme.

weitere themenverwandte Beiträge




Zurück

Einen Kommentar schreiben



Archive

Autor

Portrait Mirco Herzberg

Geschäftsführer der Werbeagentur innographix Mirco Herzberg schreibt in diesem Bereich über neue Projekte und rund um Technik & Trends der Werbebranche.

Pfeil Toplink