Grundlagen der Webprogrammierung: Meine erste Website

Bilder anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie sollten auf die Auflösung Ihrer Bilder achten, da große Datenmengen zu längeren Ladezeiten führen. Je nachdem, welchen Zweck ein Bild erfüllen soll, muss es bestimmten Anforderungen gerecht werden.
09:07

Transkript

Hier habe ich nun Bilder zusammengetragen, die ich eventuell für meine Website verwenden möchte. Jetzt muss ich drauf achten wie groß diese Bilder sind und ob sie dann auch geeignet für eine Website sind. Wenn ich jetzt, zum Beispiel, mir den Bauerngarten anschaue, so kann ich mit der rechten Maustaste auf das Bild klicken, ich bin hier auf einem Windows-Rechner, und mir die Eigenschaften des Bildes angeben lassen. Und unter "Details" finde ich jetzt Einiges an Informationen, was mich interessieren könnte, nämlich auf der einen Seite die Breite und Höhe des Bildes in Pixeln und die Auflösung. Die Auflösung ist insofern wichtig, weil ich für eine Darstellung auf einem Bildschirm gar keine so hohe Auflösung brauche. Da reichen diese 72 dpi eigentlich normalerweise aus. Die Zeiten wären zwar strenger, und mit immer größeren Auflösungen wird es eventuell nur noch kurze Zeit so gültig haben, aber noch nehme ich es als gültig. Und das Bild hat eben eine angenehme Größe, was über 2000 Px ist, und auch von der Auflösung her passt es für mich ganz gut. Ich habe noch ein anderes Bild hierher unten, den Winter. Wenn ich mir den Winter jetzt näher anschaue und auf die Details gehe, dann merke ich, dass er zwar von den Abmessungen her nicht ganz so groß ist wie mein Bauerngarten, dafür aber von der dpi-Zahl her ziemlich gewaltig. Beides erzeugt auf seine Art eine große Datenmenge. Große Datenmengen sind ungeeignet fürs Web, denn je größer die Datenmenge ist, die ich da hochlade, umso länger wird dieses Bild dann brauchen, um im Browser des Betrachters geladen zu werden. Also versuchen wir alles nur Denkliche, um Bilder in eine vernünftige Größe zu bekommen. Und das ist jetzt davon anhängig, was Sie mit einem Bild tatsächlich wollen. Wenn ein Bild als Bildschirm umfassender Hintergrund erscheinen soll. Dann müssen Sie natürlich schauen, dass es von der Bildgröße, von den Dimensionen her nach wie vor sehr groß bleibt. Wenn ich jetzt, zum Beispiel, hier wieder den Winter nehme, so ist er mit seinen Drehdosen 72 Px durchaus schon von ansprechender Größe. Ich kann jetzt mit unterschiedlichen Bildbearbeitungstools versuchen, die Datengröße noch zu verringern oder das Bild noch zu optimieren. Das bleibt mir überlassen. Ich bin hier auf einem Windows 10 Rechner. Und wenn ich da mit einem Doppelklick auf das Bild gehe, dann bekomme ich eine eigene Ansicht, in der ich das Bild auch so geringfügig bearbeiten kann. Wenn ich nämlich hierher oben auf "Bearbeiten" klicke, bekomme ich dann unterschiedliche Vorschläge, was ich mit diesem Bild machen kann. Ich könnte es verbessern. Das, glaube ich, braucht dieses Bild aber nicht. Oder ich kann einen Filter auswählen, den ich dann über dieses Bild lege, oder ich kann es auch noch zuschneiden und drehen. Ich gehe jetzt mal auf "Zuschneiden" und "Drehen" und bekomme hier jetzt eben die Möglichkeit, dass ich Aktionen setze. Das ist jetzt also eine gute Möglichkeit, um mit Bordmitteln, sozusagen, mich etwas um das Bild zu kümmern. Ich könnte sie jetzt, wie gesagt, noch insofern verkleinern, als dass ich einen bestimmten Ausschnitt dieser Bilder nehme. Ich mache das jetzt aber mit "Zuschnitt zurücksetzen". Wieder rückgängig und schließe diese Vorschau. Falls Sie nicht selbst über ein Bildbearbeitungsprogramm verfügen, so gibt es auch online die Möglichkeit, wenigstens so minimale Veränderung in einem Bild durchzuführen zu können. Eine der Möglichkeiten ist der PIXLR EDITOR. Den finden Sie, wenn sie im Browser die Adresse "pixlr.com/editor" aufrufen. Und hier haben Sie die Möglichkeit, dass Sie eben Bildbearbeitung durchführen, die etwas weiter ist. Ist das das, was ich gerade gezeigt habe. Ich werde zuerst gefragt, ob ich ein neues Bild erzeugen möchte. Nein, ich möchte ein Bild vom Computer öffnen. Und da gehe ich in meinen Projektordner. Hier habe ich meine Bilder hinterlegt. Und ich nehme jetzt zuerst den Bauerngarten und öffne ihn und habe hier jetzt noch diverse Bearbeitungsmöglichkeiten, die können Sie dann mal in einer stillen Stunde ausprobieren, habe aber hier jetzt die Möglichkeit, dass ich die Bildgröße verändere. Ich bekomme im Moment das Original angegeben, und ich möchte den Bauerngarten aber, zum Beispiel, gar nicht als bildumfassenden Hintergrund nehmen, sondern ich möchte ihn ganz gerne zu einem Beitrag dazutun, das heißt, ich werde mit 1000 Px völlig ausreichend versorgt sein. Das heißt, ich gebe hier 1000 Px ein. Nachdem das Häkchen "bei Proportionen beibehalten" gesetzt ist, bleibt auch das Seitenverhältnis unverändert. Ich klicke auf "OK" und habe jetzt meine Bauergarten. Hier unten kann ich sehen mit 1000x666 Px. Und jetzt kann ich sagen "Datei" "Speichern" und habe hier die Möglichkeit, noch etwas am Qualitätsrate zu drehen. Das ist eine Möglichkeit, um mit der Datenmenge noch weiter nach unten zu gehen, denn das JPG-Format ist eines, das Bilder komprimiert, und da sehen Sie dann sozusagen die Rechenmenge, mit der gearbeitet wird. Ich lasse jetzt mal die Qualität bei 80 %. Hier könnten Sie noch andere Bildformate wählen, aber mit JPG bin ich für ein Foto ganz glücklich. Und hier unten sehe ich jetzt die Datengröße. Das will ich jetzt geschrumpft auf 222 KB. Das gefällt mir sehr gut. Und ich sage "OK". Ich lande jetzt gleich in dem Ordner, wo das Bild her ist. Und um es vom ursprünglichen Bauerngarten zu unterscheiden, gebe ich jetzt noch einen Unterstrich ein und mache noch kl dazu für klein. Okay. So, das ist eine Möglichkeit, wenn Sie das Bild eventuell auch sonst noch bearbeiten wollen. Hier gibt es die Möglichkeit, rote Augen zu entfernen, einfach noch ein paar Tricks anzuwenden. "pixlr.com" ist eine sehr angenehme und so kostenfreie Möglichkeit. Sie können sich dann auch einloggen und haben noch mehr Möglichkeiten zur Verfügung. Eine andere Möglichkeit, wenn Ihnen das Format zwar gefällt, aber eben von der Datenmenge her noch zu groß ist, so gibt es als eine Möglichkeit eine Website, die heißt "tinypng.com". Und hier gibt es die Möglichkeit, Bilder hochzuladen und sie dann klein schrumpfen zu lassen. Sie haben keinen Einfluss drauf, was hier passiert. Aber es passiert ziemlich effektiv. Ich klicke wieder drauf, nehme jetzt das Winterbild, das im Moment über 1715 KB verfügt, und sage "Öffnen", und sofort beginnt das Komprimieren des Bildes. Und jetzt ist er fertig und hat das Bild reduziert auf 348 KB. Das heißt, er hat es geschafft, über 80 % zu minimieren. Und ich klicke jetzt wieder auf "Download", damit ich mein Bild zurückbekomme. Und dieses Bild ist in meinem Download-Ordner gelandet, sieht noch immer sehr manierlich aus, ist aber von der Datenmenge geschrumpft. Und genau das war unser Ziel. Das heißt, wenn Sie also schon wissen, welche Bilder Sie auf Ihrer Website zum Einsatz bringen wollen, dann ist jetzt der Zeitpunkt gekommen, wo Sie sich die Datenmenge der einzelnen Bilder anschauen, und überlegen, wie groß brauchen Sie das Bild tatsächlich für Ihre Website: Soll es bildschirmüberspannend sein oder reicht es einfach als Beibild zu einem Beitrag? Dann können Sie nämlich mit anderen Dimensionen arbeiten. Und entweder Sie bearbeiten das Bild noch oder Sie wählen eine Quelle wie "tinypng", um das Bild klein rechnen zu lassen.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!