Verarbeitung von Foto-Bilddateien für das Internet Übungen mit der Software Irfan-View

Transkript

1 November 2017 V1.0 / LTh Verarbeitung von Foto-Bilddateien für das Internet Übungen mit der Software Irfan-View 1. Bilder im Internet Bilddateien Vorbereitung von Bildern Bild Freistellen mit IrfanView Bild bearbeiten mit IrfanView Batch(Stapel)-Konvertierung/Umbenennung Alpenverein Internet CMS weblication Was ist IrfanView? Zitat von IrfanView ist ein schneller und KOSTENLOSER (für nicht kommerzielle Verwendung) Bildbetrachter für Windows 9x/ME/NT/2000/XP/2003/Vista/Windows 7/Windows 8/Windows 10. Das Programm versucht einfach für Anfänger und gleichzeitig leistungsstark für Profis zu sein. IrfanView war der erste Windows Bildbetrachter WELTWEIT mit Unterstützung für animierte GIFs. Einer der ersten Bildbetrachter WELTWEIT mit MultipageTIF Unterstützung. Der erste Bildbetrachter WELTWEIT mit Multiple ICO Unterstützung. In dieser Dokumentation werden die Arbeitsschritte mit Version 4.50 beschrieben. Download der aktuellsten Version von IrfanView: Seite - 1 -

2 1. Bilder im Internet Bilder sind wesentliche Bestandteile eines Internet-Auftrittes. Sie transportieren Emotionen, unterstreichen und ergänzen Inhalte, dienen als optische Ankerpunkte, geben einem Auftritt Identität (Logos), werden von den Personen, die den Internet- Auftritt besuchen gerne betrachtet und schnell und z.t. unbewusst wahrgenommen, und und Werden Bilder im Internet verwendet, gibt es u.a. fotoinhaltliche Aspekte, rechtliche Aspekte (Urheberrecht ) und auch technische Aspekte, die berücksichtigt werden sollen. In dieses Dokument geht es um folgende Aspekte: Technische Aspekte rund um Bilddateien o Unterschiedliche Arten, Bilder in Seiten des Internet-Auftrittes anzuzeigen o Bilddateiformate im Internet o Benennung von Bildern im Internet o Breite und Dateigröße von Bildern Vorbereitung von Foto-Bilddateien für die Verwendung im Internet o Bildbearbeitung (Zuschneiden u.a.) o Batch(Stapel)-Konvertierung/Umbenennung Alpenverein-Internet mit CMS weblication o Bilder auf den Internet-Server hochladen o Bilder im Auftritt verwenden Seite - 2 -

3 2. Bilddateien Zu den Arten der Bilderanzeige in Internetauftritten am Beispiel der Seite ein paar Beispiele (von links oben nach rechts unten): Links oben sind neben Akademie und Alpenvereins-Shop kleine Bilddateien verwendet, die die Wiedererkennung fördern Rechts oben ist das Logo der Sektion, die den Auftritt betreibt In der linken Spalte werden Bilddateien mit Links verwendet das Bild hilft den Inhalt zu erkennen, der dann beim Anklicken des Links dargestellt wird oder es bietet einen optischen Ankerpunkt, damit der Link besser wahrgenommen wird. o Edelweiss im Hintergrund der MITGLIED-werden Box o Jugend-Edelweiss und alpenvereinsjugend-logo als Links auf die Seiten der Alpenvereinsjugend o Bild eines Shopprodukts mit Link auf die Shopseite o Alpenvereinaktiv.com-Logo als Link auf den Auftritt Rechts in der Mitte: Bild als Erläuterung zum Text Unten breit: Bildersammlung als Gallerie in Form von durchlaufenden Bildern Seite - 3 -

4 Sowohl Fotos als auch Grafiken werden durch Einbindung von Bilddateien Teil der dargestellten Seite. Dabei sind im Internet die Pixelgrafik-Dateiformate mit den Endungen.gif,.png (eher Grafiken) und.jpg (eher Fotos) am meisten verbreitet. In der Folge geht es in diesem Dokument um Foto-Bilddateien. Dafür wird meist das JPEG-Format verwendet, das die Bildinformation komprimiert bereitstellt. Komprimierung bedeutet, dass für ein Foto einerseits weniger Daten übertragen werden müssen, was zu einem schnelleren Seitenaufbau führt und andererseits dafür Qualitätseinbußen in Kauf genommen werden. Entsprechend gibt es unterschiedliche Komprimierungsstufen: je höher die Komprimierung desto geringer die Anzeigequalität. Jede Bilddatei braucht im Internet eine eindeutige Adresse (URL). Diese setzt sich u.a. aus dem Ordner, in dem die Datei abgelegt ist, und aus dem Namen der Datei zusammen. Die Wahl des Dateinamens ist primär eine redaktionelle Aufgabe. Die Verwendung der Bilder im Internet (unterschiedliche Anzeigegeräte mit unterschiedlichen Betriebssystemen) vereinfachen: Kurze und aussagekräftige Bildnamen Verwendung nur von Kleinbuchstaben (a-z) und Ziffern (0-9) ohne Umlaute Sinnvoll im Dateinamen sind zusätzlich das Minus-Zeichen und der Unterstrich Bitte NICHT verwenden: Leerzeichen, Sonderzeichen, national unterschiedliche Zeichen (ß,, ², ³, µ, á, à, ) Welche Breite in Anzahl Bildpunkte (Pixel) für das Internet sinnvoll ist, ergibt sich aus dem Design des Internet-Auftrittes und der im Design definierten maximalen Breite der Darstellung einer Bilddatei. Da manche Endgeräte zwei Bildpunkte für einen Internet-Längeneinheit px darstellen, macht es Sinn Bilder nicht kleiner zu machen als die doppelte maximale Breite laut Design. Bei Alpenverein-Auftritt beträgt aktuell das Doppelte der maximalen Breite 1.900px. Je nach Anzahl der Bildpunkte einer Bilddatei und der Komprimierungsrate des jpg- Formates unterscheiden sich die Größen der Dateien und damit die Übertragungszeiten sowohl beim Upload (Redakteur) oder beim Seitenaufbau (Besucher). Also Orientierung gilt: Foto-Bilddateien in der Größenordnung von ca Bytes oder 500 kbyte sind meist ausreichend für das Internet. Seite - 4 -

5 3. Vorbereitung von Bildern Die Vorbereitung von Foto-Bilddateien beginnt nach der Archivierung der Originalen Dateien aus der Kamera. Werden Bilder einzeln bearbeitet, kann mit dem Bildbearbeitungsprogramm die Bilddatei im Archiv geöffnet werden und unter dem zukünftigen Namen in einem Ordner für den Upload abgespeichert werden. Dann kann der Bildausschnitt freigestellt und ggf. eine Bildoptimierung vorgenommen werden BILD FREISTELLEN MIT IRFANVIEW Mit der Maus einen Ausschnitt markiern Rahmen ggf. verschieben. Im Menu: Bearbeiten. Freistellen Fertig Seite - 5 -

6 Die Breite des Ergebnis-Bildes in Pixel beachten und sicherstellen, dass diese Breite größer ist als die px maximale Breite. Sonst ist das Bild nur eingeschränkt verwendbar. Wenn das ganze Bild verwendet aber vor der Verwendung im Internet eine Verkleinerung erreicht werden soll, im Menu Bild. Größe ändern anwählen. Entweder kann eine fixe Breite eingestellt werden oder ein %- Satz von der Originalen Größe. Wichtig ist die Checkbox Proportional, damit keine Verzerrungen entstehen BILD BEARBEITEN MIT IRFANVIEW Im Menu: Bild. Farben ändern öffnet einen Dialog mit zwei Miniaturansichten des Bildes, in denen der urspüngliche und der geänderte Ansicht angezeigt wird: Mit Klick auf Auf Bild anwenden wird die Bearbeitung durchgeführt und das Bild angezeigt. Mit Menu: Bearbeiten. Rückgängig oder Taste Strg-Z wird der Stand vor der Bearbeitung wieder hergestellt. Seite - 6 -

7 3.3. BATCH(STAPEL)-KONVERTIERUNG/UMBENENNUNG Die Batch- bzw. Stapel-Konvertierung ist dann sinnvoll, wenn mehrere Bilder auf gleiche Art und Weise vorzubereiten sind z.b. von mehreren Bildern aus der gleichen Kamera zu einer Veranstaltung für ein Fotoalbum im Internet. Für die Stapelverarbeitung bietet es sich an, dass alle zu bearbeitenden Bilder in einem Ordner gespeichert sind. Arbeitsannahme: Es gibt ein Verzeichnis E:\temp\fotoalbum, in dem die ausgewählten Bilder gespeichert sind. Alle Bilder sollen umbenannt und auf eine Breite von 1900 px verkleinert werden. Schritt Öffnen eines Bildes in dem Verzeichnis: Rechte Maustaste auf Datei Öffnen mit Irfan View Seite - 7 -

8 Schritt Starten der Batch(Stapel)- Konvertierung/Umbennenung im Menue Datei Schritt Klick auf Alle hinzufügen damit die gewünschten Dateien im Auswahlfenster stehen (diese Dateien werden bearbeitet, sie können im Auswahlfenster sortiert oder umgeordnet werden) Schritt Klick auf Batch-Konvertierung + Umbennen Auswahl JPG als Zielformat Checkbox Spezial-Optionen anwählen Muster für den Namen eingeben: das #-Zeichen steht für eine fortlaufende Nummer (### geht dann von 000 bis 999) Seite - 8 -

9 Schritt Setzen der Spezialoptionen durch Klicken auf Setzen rechts neben der Checkbox. Im neuen Dialog anwählen: Größe ändern Neue Größe Eine oder beide Seiten setzen Breite: 1900 Schritt Zielverzeichnis setzen z.b. durch Klick auf Aktuelles Verzeichnis verwenden (geht nur wenn Bilder (auch) umbenannt werden). Sonst einen Unterordner anlegen und anwählen (kann NICHT mit Durchsuchen gemacht werden muss bereits vorbereitet sein) Schritt Mit Klick auf Starten öffnet sich ein Fenster in dem der Fortschritt der Konvertierung angezeigt wird. Nach Kontrolle Klick auf Batch beenden. IrfanView schließen Seite - 9 -

10 Das Ergebnis dann in der Ordner-Ansicht kontrollieren. Hier sieht man, dass die Bilder ca. 500kB groß sind und fortlaufend numeriert. Seite

11 4. Alpenverein Internet CMS weblication Damit die Bilddateien in einer Internet-Seite verwendet werden können, müssen sie zuerst auf den Internet-Server hochgeladen werden. Dazu in weblication anmelden und auf die Dateiverwaltung gehen (z.b. mit Klick auf Inhalte verwalten). Dann unter Häufig benötigt auf Bilder klicken /schulungnn_wassets/img wird angezeigt. Dann den Ordner auswählen in den die Bilder hochgeladen werden sollen und auf die Schaltfläche Hochladen klicken. In diesem neuen Fenster Dateien hochladen entweder auf Dateien zum Hochladen auswählen klicken oder die Dateien per Drag&Drop aus dem Windows-Explorer in das Fenster ziehen. Seite

12 Beim Hochladen werden die Bilder wie folgt bearbeitet: Ersetzen von ungültigen Zeichen aus den Dateinamen Testweise verkleinern auf max 1280 px Breite mit JPEG-Qualitat 80% - wenn die Ersparnis des Festplattenplatzes relevant ist, dann Verwendung der verkleinerten Version. ACHTUNG auf Entwicklungsserver gridtest.alpenverein.at ist bereits eingestellt: max px Breite und JPEG-Qualität 85%. In der Dateiverwaltung können Bilder auf noch direkt auf dem Server bearbeitet werden. (z.b. wenn ein Bild nicht gedreht wurde) Die Bilder können nun verwendet werden: z.b. als Bilderalbum (Standard mit Vorschaubilder): Seite

13 z.b. in einem Bericht Weblication sorgt automatisch für die richtige Bildgröße. Seite