Schnellanleitung: Bilder für das Internet optimieren

Transkript

1 Inhaltsverzeichnis Inhaltsverzeichnis... 1 Schnellanleitung: Bilder für das Internet optimieren... 1 Bilder für das Internet optimieren... 2 Auflösung bei Grafiken für Printmedien... 2 Auflösung bei Grafiken für Screendesign... 2 Grafiken für das Internet optimieren... 3 Die Bildgröße nachträglich ändern... 4 Die Routine Datei > für Web speichern... 6 Die Dateigröße ändern... 7 Dateitypen für Pixel-Grafiken... 7 Dateityp wählen... 7 Für verschiedene Ladezeiten optimieren... 9 Schnellanleitung: Bilder für das Internet optimieren 1. Schritt - Dateigröße entwerfen Das Resultat der neuen Grafik entwerfen Maße: groß: 400 x 300 Pixel für eine Bildschirmauflösung von 800 x 600 Pixel Dateigröße: weniger als 500 kb für ausführliche Grafiken, je kleiner desto schneller die Ladezeit 2. Schritt - Die zu optimierende Grafik öffnen 3. Schritt - Die Routine Datei > Für Web speichern aufrufen 4. Schritt - Dateigröße hier ändern (anwenden klicken) 5. Schritt - Dateityp und Qualität der Grafik ändern 6. Schritt - Die optimierte Version in dem gewünschten Zielordner speichern. Dr. Viola Vockrodt-Scholz 1

2 Bilder für das Internet optimieren Für die Veröffentlichung für Grafiken im Internet ist es wichtig, dass die Ladezeiten über das Internet verringert werden und die Grafiken dennoch optimal aussehen. Das Problem liegt in der Technik für Grafiken am Computer. Eine Grafik besteht aus Pixeln, also aus kleinsten Bildpunkten. Je höher die Auflösung des Bildes, umso mehr Pixel sind in ihm enthalten, um so höher ist auch die Qualität des Bildes. Auflösung bei Grafiken für Printmedien In Photoshop werden Grafiken häufig für Printmedien erstellt. Hierbei ist eine besonders hohe Auflösung wichtig. Wenn Sie eine neue Datei erstellen können Sie hier die Auflösung des Bildes einstellen. Bei Auflösung steht 300 Pixel/Inch oder auch DPI. Als Bildgröße werden 24,9 MB für ein Bild im DIN A4-Format geschätzt. Das ist für das Internet wesentlich zu groß. Auflösung bei Grafiken für Screendesign Die Computerbildschirme lösen höchstens 72 dpi auf, so dass für Bildschirmgrafiken eine wesentlich geringere Auflösung reicht als für Printmedien. Zusätzlich sind die Maße in der Regel wesentlich kleiner als DIN A4. Wenn ein Bildschirm 800 Pixel breit und 600 Pixel hoch ist, dann reicht für ein relativ großes Bild schon ein Maß von z. B. 400 x 300 Pixel. Dr. Viola Vockrodt-Scholz 2

3 Wird diese Grafik in Photoshop vorbereitet, verbraucht sie wesentlich weniger Speicherplatz. Photoshop schätzt hier die Größe 352 K. Auch diese Größe ist für die Nutzung im Internet noch relativ groß. Aus diesem Grund gibt es in Photoshop eine Optimierungsfunktion für Grafiken für das Web. Grafiken für das Internet optimieren Jede Grafik, egal wie groß und wofür erstellt kann für das Internet optimiert werden. Dabei sind einige wenige Schritte notwendig, um die Dateigröße auf eine gewünschte Größe für einen möglichst schnellen Ladevorgang im Internet zu optimieren. Je nach gewünschter Grafikgröße und qualität können verschiedene Zielvorgaben für die Dateigrößen gemacht werden. Rein funktionelle Grafiken wie für einfache Schaltflächen oder Schriften sollten kleiner als 10 KB sein. Fotos und Computergrafiken, die einen Anspruch an die Grafik an sich stellen können etwas größer sein, jedoch möglichst nicht größer als 1 MB. Dann werden die Ladezeiten, speziell bei Modemnutzern, doch zu lang. Eine Dateigröße von weniger als 500 KB ist hier durchaus erstrebenswert. Als Beispiel soll ein gescanntes Bild für das Internet optimiert werden. Die Originalgrafik ist KB groß, also mehr als 94 MB. Bei so großen Dateien ist eine Optimierung von verschiedenen Faktoren abhängig. Dr. Viola Vockrodt-Scholz 3

4 Starten wir die einfache Optimierung mit Datei > Für Web speichern so wird vor der Optimierung gewarnt, weil die Datei effektiv zu groß für dieses Tool ist. Die Bildgröße nachträglich ändern Bei so großen Bildern lässt sich die Bildgröße und auch die Auflösung des Bildes nachträglich verringern. Dr. Viola Vockrodt-Scholz 4

5 An dieser Stelle beginnen die Optimierung und das Spiel zwischen optimaler Dateigröße und Qualität. Speichern Sie die Datei auf jeden Fall bevor Sie die Optimierung beginnen unter einem anderen Namen neu, da diese Änderungen ggf. nicht mehr rückgängig zu machen sind. Mit dem Befehl Bild > Bildgröße können Sie die verschiedenen Daten des Bildes ändern. Achten Sie darauf, dass Sie Proportionen erhalten aktivieren, damit die Grafik in den Proportionen erhalten bleibt. Im Beispiel bewirkt die Änderung von 300 Pixel/Inch auf 72 Pixel/Inch, dass die Datei wesentlich kleiner wird (1191x842 Pixel) und nun in die Optimierungsfunktion übernommen werden kann. Anstelle der DPI können auch die Maße des Bildes geändert werden, falls bestimmte Details bei einer höheren DPI-Zahl besser erhalten bleiben. Das hängt von der Qualität und einzelnen Beschaffenheit jeder Grafik oder jeden Fotos ab. Dieser Vorgang kann ein je nach Rechnerleistung einige Zeit dauern. Wenn Sie die Datei jetzt unter einem neuen Namen speichern, können Sie feststellen, dass die Datei nun wesentlich weniger Speicherplatz braucht als vorher. Dr. Viola Vockrodt-Scholz 5

6 Die Routine Datei > für Web speichern Eine Datei der nun erzeugten Größe kann in die Routine Datei > Für Web speichern eingegeben werden und für das Internet sowohl in den Maßen als auch in der Dateigröße erheblich reduziert werden. Zusätzlich kann durch die Wahl eines Dateitypes eine optimale Qualität des Bildes erzeugt werden. Dr. Viola Vockrodt-Scholz 6

7 Die Dateigröße ändern Die Grafik ist in den Ausmaßen noch zu groß für das Internet. Sie wählen im rechten Bereich des Dialogfeldes Bildgröße, aktivieren Sie Proportionen erhalten und geben Sie die neue Breite des Bildes ein. Im Beispiel habe ich 750 Pixel eingegeben. Bestätigen Sie mit Anwenden. Sie erhalten eine exakte Vorschau der neuen Grafik. Im unteren linken Bereich des Dialogfeldes finden Sie die neue Dateigröße für einen bestimmten Dateityp. Im Beispiel Gif, 284,4 KB und eine Ladezeit von 52 Sek bei einem gängigen Modem mit 56,6 Kbit/s Geschwindigkeit. Dateitypen für Pixel-Grafiken Im Internet können drei Dateitypen für Pixel-Grafiken versandt werden: 1. JPG (JPEG) Joint Photographs Expert Groups ein Komprimierungsstandard der viele Farben enthalten kann, also für Fotos gut geeignet ist. 2. GIF (Graphics Interchange Format) ein Grafikaustauschformat, das 256 Farben maximal enthalten kann, also für einfache Grafiken wie Diagramme oder Schaltflächen geeignet ist. Das Gif-Format unterstützt transparente Pixel und Animationen. 3. PNG (Portable Network Graphic) PNG-Format ist ein freies Format, das die meisten Grafikprogramme erzeugen können. Das Programm Fireworks von Macromedia erzeugt png-grafiken direkt. Es unterstützt ebenfalls Transparenz und Animationen und ist höchst kompatibel zu Flash. Zusätzlich unterstützt es die Farbqualitäten von jpg und gif. Dieses Format ist bis heute relativ selten im Internet zu finden. Dateityp wählen Die bisher erzielte Dateigröße von 284,4 KB und die Qualität der Grafik, die per Augenschein festgestellt wird, kann durch die Wahl des richtigen Dateityps erheblich verbessert werden. Dr. Viola Vockrodt-Scholz 7

8 Weil es sich um eine Grafik mit vielen Farben handelt, wird die JPG-Komprimierung gewählt. Dabei können verschiedene Qualitätsstufen ausgewählt werden. Bei einer Qualität von 0 wird das Bild unscharf, weil zu wenig Pixel enthalten sind. Dafür braucht es bloß 37,47 KB Speicherplatz. Bei Erhöhung der Qualität verbessert sich das Bild und die Dateigröße wird zusätzlich bei dem Typ JPG geringer. Bei einer Qualität von 75% braucht es zwar 201,7 KB Speicherplatz, dies ist aber immer noch erheblich weniger als beim Dateityp Gif und hat eine hervorragende Qualität. Die Ladezeit beträgt noch 37 sec bei einem gebräuchlichen Modem. Ggf. kann durch Qualitätsminderung die Dateigröße weiterhin reduziert werden. Das hängt jetzt sehr vom Ziel der Website ab und von der Notwendigkeit, dass die Bilder schnell geladen werden müssen, wie z. B. bei kommerziellen Seiten. Wenn Sie mit der Vorschau zufrieden sind und auch mit der Bildgröße zufrieden sind, können Sie die Datei speichern. Sie werden aufgefordert einen neuen Spei- Dr. Viola Vockrodt-Scholz 8

9 cherort und einen neuen Dateinamen zu geben. Am einfachsten wählen Sie den Ordner der Website, an der Sie arbeiten oder einen Ordner, aus dem Sie Grafiken per versenden wollen. Beachten Sie bei Dateityp: Nur Bilder. Sie können hier zusätzlich eine HTML-Datei für das Bild speichern. Für verschiedene Ladezeiten optimieren Die Geschwindigkeitsangabe für ein herkömmliches Modem kann in der Routine Für Web speichern geändert werden. Sie können im Kontextmenü des Bereichs der Angaben für Ladezeiten (rechte Maustaste) und Zoom verschiedene Ladezeiten für verschiedene Bandbreiten einstellen und testen. Dies ist nur dann wichtig, wenn Sie die Zielgruppe kennen und z. B. wissen, dass diese alle DSL verwenden. Ansonsten ist die Voreinstellung für ein 56,6 Kbit/s-Modem in Deutschland eine günstige Einstellung. Photoshop hat als Voreinstellung das 28,8 Kbit/s-Modem. So ein langsames Modem ist heute relativ selten. Quelle zu Dateitypen: Dr. Viola Vockrodt-Scholz 9