Bilder webtauglich machen

[wubbi]

Hallo,
hier ein paar Tipps wie ihr eure Bilder am Besten auf eure Homepage einbindet. Ich benutze GIMP. Es ist ein Open-Source Programm und kann man sich kostenlos downloaden.

1. Bild fertig bearbeitet
Angenommen, das Bild ist nun fertig nachträglich bearbeitet. Bei mir hat das Bild eine Größe von 4,1 MB un eine Auflösung von 72dpi.



2. Bild skalieren
So, nun klicken wir auf Bild> Bild skalieren.



3. Einstellung für die Skalierung
Wir wählen jetzt die neue Bildgröße aus. ACHTUNG: Falls dpi größer als 72 ist, auf 72 runtersetzen. dpi steht für dots per inch und regelt vereinfacht gesagt die Druckqualität. Ab 300 dpi wäre das Bild drucktauglich, aber im Web reicht 72dpi völlig aus. Große dpi Werte machen auch die Datei groß.



4. Exportieren
Auf Datei und Exportieren klicken.



5. Den richtigen Namen wählen
Benutzt keine kryptische Namen für eure Bilder, sondern passende, die es gut beschreiben. Das hat den Vorteil, dass es besser bei Google von Usern gefunden werden kann.
Wählt als Dateiendung am Besten JPG/ JPEG (egal ob klein oder groß geschrieben). JPEG komprimiert am Besten. PNG kompriert verlustfrei, aber die Datein sind i.d.R. größer. Vorteil von PNG ist aber, dass es Transparenz kennt - JPEG nicht. Aber für ein normales Bild ohne Transparent wie dieses ist JPEG am Besten.



6. Exporteinstellungen wählen
Der entscheidene Faktor ist der Qualitätsregler. Hiermit muss man spielen um den besten Kompromiss zwischen Qualität und Größe zu bekommen. Pauschalisieren kann man das nicht. Ich habe bei mir einen Qulitätsfaktor von 60 eingestellt. Die anderen Einstellungen genauso wählen wie bei mir. Damit wird ebenfalls ein guter Kompromiss zwischen Qualität und Größe erreicht. Je nach Rechner kann das Speichern etwas dauern. Das liegt an de genaueren Fließkomma Berechnung.





Am Ende komme ich auf 67,5 KB. Für die Größe des Bildes durchaus akzeptabel. Als PNG hat es eine Größe von 1,41 MB. Hier nun das fertige Bild als JPEG:

Einbindung auf der Website
Hier nun noch einige Tipps, wie ihr das Bild am Besten auf der Website einbindet (ein paar HTML und CSS Kenntnisse von Vorteil).

Ein Bild wird mit folgendem Code auf der Website eingebunden:

<img src="verstaerker_mikrofonieren.jpg" />

Um dem Browser Arbeit zu erleichtern und die Seite schneller zu laden fügen wir die Größe des Bildes, die es auf der Website haben soll hinzu. Man kann auch eine andere Größe angeben wie z.B. style="width: 600px; height:400px;"

<img src="verstaerker_mikrofonieren.jpg" style="width:1200px; height:800px" />

Falls das Bild aus irgend einem Grund nicht geladen werden kann, fügen wir einen passenden Alternativ-Text hinzu:

<img src="verstaerker_mikrofonieren.jpg" alt="Verst&auml;rker mikrofonieren" style="width:1200px; height:800px" />

Zusätzlich kann man noch einen Title-Tag hinzufügen. Wenn man nun über das Bild geht mit der Maus und dort verweilt wird dieser Text angezeigt.

<img src="verstaerker_mikrofonieren.jpg" title="Mikrofonierung eines Verst&auml;rkers" alt="Verst&auml;rker mikrofonieren" style="width:1200px; height:800px" />

So das wars eigentlich auch schon Ich hoffe ich konnte euch damit ein wenig helfen
Wer mal überprüfen will, wie schnell seine Seite lädt hier ein Rechner: http://www.dsl-rechner.de/index.php
Die Ladegeschw. sollte bei DSL 1 MBit (DSL 1000) unter 2 sek liegen.

 

[Be.eM]

Wir wählen jetzt die neue Bildgröße aus. ACHTUNG: Falls dpi größer als 72 ist, auf 72 runtersetzen. dpi steht für dots per inch und regelt vereinfacht gesagt die Druckqualität. Ab 300 dpi wäre das Bild drucktauglich, aber im Web reicht 72dpi völlig aus. Große dpi Werte machen auch die Datei groß.

Hallo Wubbi,

bei diesem Punkt stimmt etwas nicht, und das führt relativ häufig zu Missverständnissen.

1. Für's Web ist die Angabe "dpi" (dots per inch) sowieso unzutreffend. Das bezieht sich auf den Druckvorgang (dots = Punkte im Druck), müsste also korrekterweise ppi (pixel per inch) heißen. Und auch das funktioniert nicht, weil man dazu die reale Auflösung des Monitors kennen müsste, um zu wissen, wieviele Pixel pro Zoll der aufweist. Aber das ist noch kein Problem, und tatsächlich steht ja auch diese Angabe "dpi" im Dialogfeld, insofern ist hier die Fehlbezeichnung nachvollziehbar.

2. Eine dpi/ppi-Angabe selbst sagt noch überhaupt nichts über die Bildgröße. Ein 300 dpi-Bild mit 1200x800 Pixeln hat die gleiche Dateigröße wie ein 72 dpi-Bild mit 1200x800 Pixeln. Wenn ich die Auflösung (pro Zoll) verändere, dann ändert sich die dem Bild innewohnende Größe in Zoll bzw. Zentimetern, d.h. ein Herabsetzen der Auflösung vergrößert das Bild in Zentimetern, bei gleichbleibender Pixelanzahl. Und die Anzahl der Pixel ist es, die in die Datei geschrieben werden und selbige groß oder klein machen.

3. Bildauflösungen werden beim einfachen Platzieren eines Bildes auf einem Webserver bzw. einer HTML-Seite sowieso ignoriert, Bilder werden immer in Monitorauflösung dargestellt, es sei denn, man gibt dem HTML auch eine explizite Größenangabe mit. Und auch dann wird das Bild nur ggf. auf der HTML-Seite skaliert dargestellt, nicht aber, wenn man es alleine betrachtet (Rechtsklick: Bild anzeigen). Ansonsten werden solche Auflösungsangaben in der Regel nur durch DTP-Programme beim Bildimport direkt interpretiert.

4. Genau deshalb ist diese Information…

Um dem Browser Arbeit zu erleichtern und die Seite schneller zu laden fügen wir die Größe des Bildes, die es auf der Website haben soll hinzu. Man kann auch eine andere Größe angeben wie z.B. style="width: 600px; height:400px;"

… eigentlich auch unzutreffend. Ja, man kann eine Größe angeben, aber das Bild muss so oder so erstmal komplett durch die Leitung, und dann müsste der Browser selbiges Bild extra nochmal verkleinert rendern. Ist also eher mehr Last als weniger. Man merkt das daran, dass in so einem Fall der Klick auf's Bild (um es alleine anzuzeigen) völlig verzögerungsfrei erfolgt, das Bild also bereits in voller Größe geladen ist.

Sorry, wenn ich an dieser wohlgemeinten Anleitung Kritik äußere, aber ich gehöre zu den Leuten, die ständig von Kunden mit solchen Aussagen gequält werden… "wie groß brauchen Sie das "Bild?"… "Na, mindestens 300 dpi"… "Jaja, schon klar, aber wie groß bei 300 dpi?"… "Für den Druck in unserem Katalog"… "Und wie groß soll das Bild dann in dem Katalog erscheinen, in Zentimetern?"… "Oh, da muss ich erst nachfragen!" usw. usw. Ein leidvolles Thema für manche Dienstleister

Grüße,
Bernd