Einführung in die Leistung bei Bildern für Webseiten

1. Willkommen beim Kurs!: Als er jetzt auf einem Gerät im Internet surfte, genau so, was Sie wirklich wollen, um Gewicht auf ein großes Bild heruntergeladen werden, das auf einem großen Monitor verwendet werden sollte. Natürlich, für die, und hier ist das Problem. Verwendung einer kleineren Website Bilder bedeutet, dass dies viel schneller auf einem kleineren mobilen Gerät herunterladen wird . Wenn Sie auf den großen Bildschirm skalieren, kann es wirklich gestreckt und pixelig aussehen. Wenn wir den entgegengesetzten Weg gehen und mit einem großen Bild beginnen, kann es auf einem großen Monitor gut aussehen, aber es kann viel zu lange dauern, um auf einem mobilen Gerät herunterzuladen, meist schlechte Benutzererfahrung. Wie können wir effizient Bilder hinzufügen, während die Website für alle Bildschirmgrößen und Geräte geeignet ist? Wir könnten versuchen, ein Bild zu verwenden, das eine Art Mittelweg auf der Größe hat. Aber das wird in Bildschirmen viel schwieriger, wieder größer, und haben auch eine höhere Auflösung. Eine andere Möglichkeit, dies zu tun, besteht darin, die Vorteile der HTML-Teilchenelemente zu nutzen. Mit dem Bild können wir mehrere Größen desselben Bildes haben, und der Browser lädt die richtige basierend auf der Größe des Geräts. Also werfen wir einen Blick auf diese und verschiedene andere Techniken. Wir wollen auch sicherstellen, dass wir verschiedene Bilder basierend auf der Ausrichtung des Geräts, derArt der Bildformate, die der Browser unterstützt, und vieles mehr laden können verschiedene Bilder basierend auf der Ausrichtung des Geräts, der Art der Bildformate, die der Browser unterstützt, . Wir werden auch viel mehr nützliche Dinge werden gefragt Richtung, verschiedene Bildtypen und wie wir sie mit Komprimierung auf den verschiedenen Komprimierungsmethoden konvertieren können , mit Fallback-Bilder, Content-Delivery Netzwerke, faul Laden, und vieles mehr. Wenn Sie jede Art von HTML-Websites oder Anwendungen erstellen, dann ist dieser Kurs ideal für Sie. Du brauchst nicht viel Erfahrung, um diesen Kurs zu absolvieren. Es wurde entwickelt, um Anfänger freundlich zu sein. Obwohl einige HTML-Erfahrung von Vorteil sein wird, da ich davon ausgehen werde, dass Sie wissen, wie Sie eine grundlegende HTML-Seite einrichten. Ich hoffe, Sie sind interessiert und aufgeregt, diesen Kurs zu nehmen. Lassen Sie uns nun in die erste Lektion springen, in der wir die Effekt-Tab-Party-Größe Bilder und die Hälfte auf die Benutzererfahrung entdecken werden. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken . Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen Ich werde es mir nur ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. Starter-Dateien herunterladen: Bevor wir in unsere erste Lektion springen, finden Sie in diesem Kurs einige Starter Files, die Sie herunterladen und durcharbeiten können, während wir diesen Kurs durchlaufen. Jeder der Lektionen hat einen entsprechenden Ordner, und im Inneren haben wir einige grundlegende Starter-Dateien, zum Beispiel hat diese eine grundlegende HTML-Seite und auch einige Bilder, so dass wir direkt zu lernen über unsere Themen springen können. Um dies für den Kurs herunterzuladen, müssen Sie zu github.com gehen und dann in mein Profil, das chrisdixon161 ist. Dann ist das Repository die Bildelement-Startdateien. Sobald Sie sich im Repository befinden, müssen Sie nur auf diesen „Code“ -Button klicken und dann diese ZIP-Datei herunterladen. Für einfachen Zugriff habe ich meins auf dem Desktop gerade hier platziert, aber Sie können es überall platzieren, was Sie bevorzugen. Um diesen Kurs zu bearbeiten, verwende ich den Texteditor, der Visual Studio Code ist. Wenn Sie keines haben, können Sie das hier über Ihr Betriebssystem herunterladen. Es ist kostenlos zum Download und kostenlos für Mac, Windows und Linux zu verwenden. Sobald Sie das gesamte Setup und die Installation haben, müssen Sie nur über die Starter-Dateien in Visual Studio Code ziehen. Ich sehe dich im nächsten Video, wo wir an unserer ersten Lektion arbeiten werden. 4. Bilder mit falscher Größe verwenden: Anstatt mein Wort dafür zu nehmen, werfen wir jetzt einen Blick auf einige Beispiele dafür, wie schlecht große Bilder Ihr Projekt wirklich beeinflussen können. Für diesen Kopf über das Starter-Projekt und in den Dateien, gehen Sie in Lektion Nummer 1. In unserem Visual Studio-Code oder Ihrem Texteditor Kopf in den ersten Projektordner, werde jetzt mit der rechten Maustaste auf die Index-Seite kopieren, Pfad kopieren und dann in den Browser einfügen. Sie können auch auf die Index-Seite innerhalb des Projektordners doppelklicken, um, dies wird in Ihrem Standardbrowser geöffnet. Dafür werde ich Google Chrome verwenden, aber Sie können Firefox, Safari oder einen beliebigen großen Browser verwenden , den Sie bevorzugen. Zu Beginn werden wir einen Blick auf die Dateigrößen einiger bereitgestellter Bilder werfen und auch sehen, welche Auswirkungen dies auf die Download-Geschwindigkeit hat. Öffnen wir die Index-Seite und nebenbei haben wir einen Image-Ordner, der das gleiche Bild hat, aber in drei verschiedenen Größen haben wir die größte, die 5.311 Pixel breit ist und wir können auch die Größe unten bei die Unterseite. Wir haben eine 640 Pixel breite Version, und auch eine kleine, die 320 Pixel groß ist. Über zur Indexseite alles, was wir dafür tun werden , ist, drei separate Bildelemente einzurichten, sie mit allen drei dieser Bilder zu verknüpfen. Lassen Sie uns in den Bilderordner und den ersten springen , der der kleinste ist, und da dies ein Beispiel ist, werde ich diese alten Texte nur leer lassen. Duplizieren Sie diese zwei weitere Male und die nächste ist die 640 Version und wir werden die größte haben, das ist 5.311, speichern Sie diese und jetzt, wenn wir aktualisieren, sehen wir alle drei Bilder wie erwartet, und auch nur als Nebennotiz, Alle Bilder, die für diesen Kurs zur Verfügung gestellt wurden, wurden von unsplash.com heruntergeladen Wenn Sie sie also ändern oder Ihre eigenen herunterladen möchten, ist dies eine gute Ressource, nach der Sie suchen können. rechten Maustaste und öffnen Sie die Entwicklertools mit Inspect. Alle Browser haben auch die Entwicklertools, und sie sind in der Regel mit Rechtsklick und dem Element Inspect oder Inspect verfügbar. Hier fügen Sie in die Registerkarte Netzwerk und dann können wir den Browser aktualisieren, um alle drei dieser Bilder herunterzuladen. Wenn Sie dies ein wenig breiter machen, können wir die Größe jedes dieser Bilder sehen. Wie erwartet, geht es vom kleinsten zum größten und wahrscheinlich auch wie erwartet, können wir sehen, dass das kleinste Bild 27 Millisekunden ist, wir sehen 29 für die eine in der Mitte, dann 37 Millisekunden für die größte. Lassen Sie uns aktualisieren und versuchen Sie es erneut. Dies ist jedes Mal etwas anders, wenn wir die Seite aktualisieren, aber wir können im Allgemeinen sehen, dass das kleine Bild in etwa zwei Dritteln der Zeit des großen Bildes heruntergeladen wird . Dies kann einen echten Unterschied machen, wenn Sie viele Bilder auf unserer Website haben, zusammen mit der Download-Zeit, die Bildqualität ist auch eine große Überlegung, so ist es besser, dass wir sicherstellen können, dass alle drei unserer Bilder, sie bekamen den gleichen verfügbaren Platz. Wir können dies im Kopfbereich tun und dann wird er einige Stile hinzufügen und einfach für das Bildelement gehen und dann die Breite auswählen, dann diese zwei,100 Prozent. Wenn wir nun zum Browser zurückkehren und aktualisieren, werden alle drei unserer Bilder nun auf 100 Prozent der verfügbaren Breite dehnen. Wir können sehen, wenn wir uns das obere Bild ansehen, sehen wir einen Qualitätsverlust, da dieser etwas größer gestreckt wurde. In der Mitte wurde die Qualität verbessert, auf die Qualität auf dem dritten oder größten Bild ist viel besser als die beiden vorherigen. Wir sehen auch auf dieser speziellen Aktualisierung, dass die Download-Zeit für das große Bild viel langsamer ist, dies verstärkt auch, was wir im Intro-Video gesagt haben. Das Herunterladen großer Bilder dauert länger, was zu einer schlechten Benutzererfahrung führen kann und möglicherweise Benutzer von allen Websites verlieren kann. Es gibt auch viele Umfragen und Statistiken gibt, die sagen, verwendet Konversionsrate drastisch sinkt mit jeder Sekunde eine Seite nimmt die Last und auch die reichliche Rate steigt deutlich, während zu lange warten. Ich werde keine Statistiken da draußen werfen, da viele Umfragen unterschiedliche Ergebnisse zeigen, aber ich bin sicher, dass wir alle in der Vergangenheit dort waren. Wenn eine Seite zu lange dauert, um zu laden, innerhalb dieser Geduld und unsere Aufmerksamkeit bewegt sich auf etwas anderes. Auf der anderen Seite verlieren Bilder, die zu klein sind, eine erhebliche Menge an Qualität, wenn sie skaliert werden. Genau wie wir hier mit dem ersten Bild sehen können, also wenn Sie Bilder auf Ihrer Website verwenden, laden Sie nicht einfach ein, das gut aussieht und fügen Sie es dann einfach zu Ihrem Projekt hinzu, denken Sie zuerst über die Größe des Bildes nach. In den letzten Jahren verwendet der Bereich der Gerätegrößen eine Betrachtung unserer Websites auf, es ist nur immer größer und hier ist nur ein kleines Beispiel von Bildschirmgrößen, die wir zulassen müssen. Wie Sie sehen können, haben wir eine riesige Reichweite und einige bis zu über 7.000 Pixel breit, obwohl einige der größten Bildschirme und am häufigsten. Dies kann unsere Wahl der Bildgröße immer noch sehr schwierig lassen. Wenn wir diese Entscheidungen treffen, müssen wir aber auch nicht nur über die Größe der Geräte nachdenken, sondern auch darüber, wie unsere Website angelegt wird. Dies kann einen großen Einfluss auf unsere Entscheidungen haben. Sie könnten versucht sein zu denken: „Okay, ich sollte vielleicht nur auf die Mitte zielen und vielleicht 3.000 Pixel breit machen.“ Dies bedeutet jedoch nicht, dass wir alle Bilder so breit machen müssen. Beispielsweise können Sie planen, Vorbilder in derselben Zeile zu haben, genau so, und dies ist eine häufige Situation für eine Website oder sogar eine Galerieansicht mit mehreren Zeilen von Bildern. So oder so, der Punkt ist, dass wir jetzt plötzlich die Breite geteilt haben. Wir brauchen jetzt von unseren Bildern um drei, noch weniger, wenn wir den Raum um jedes dieser Bilder berücksichtigen. Jetzt sprechen wir über unsere Bilder, die nur rund 800 Pixel breit sein müssen, was zu einer großen Einsparung der Downloadzeit führen wird. Dasselbe gilt für zwei Bilder breit, vier Bilder und so weiter. All diese Einsparungen können sich wirklich summieren, wenn wir planen, welche Größe der Bilder wir zuerst benötigen, anstatt nur Downloads in der ersten Bildgröße, die verfügbar ist, in unserem Projekt geworfen, und vergessen Sie es. Manchmal ist es jedoch unvermeidlich, dass wir ein Bild in voller Breite verwenden müssen, wie ein Header-Bild oder ein Bild-Karussell und dies bringt uns wieder auf das Problem zurück , ob wir die Bildqualität oder die Download-Geschwindigkeit opfern. Nun, zum Glück gibt es einen Weg, wie wir damit umgehen können, also müssen wir keine Kompromisse eingehen und wir werden einen Blick darauf werfen, wie das im nächsten Video zu tun ist. 5. Den Browser entscheiden lassen: Um bei der Auswahl der richtigen Größe Bild für das Gerät oder den Browser zu helfen, verfügt das Bildelement über ein wirklich nützliches integriertes Attribut namens srcet. Srcet ermöglicht es uns, mehrere Bilder aufzulisten, die Sie möglicherweise verwenden möchten, und wir werden den Browser entscheiden lassen, welches am besten ist. Innerhalb unseres Lektion Two Ordners , der den Browser entscheiden lässt, haben wir zwei Elemente und eines ist die Indexseite, die wir verwenden werden. Wir können den Pfad kopieren. Das ist ziemlich leer. Wir werden den Inhalt in nur einem Moment hinzufügen, dann fügen Sie ihn in den Browser ein. Im Bilderordner haben wir sechs Versionen desselben Bildes. Wir haben eine Version, die 320 Pixel breit ist, wir haben 640, wir haben 1.500, und auch einige Bilder mit 1X, 2X und 4X zu, die wir einen Blick darauf werfen, was diese sehr bald sind. Genau wie wir es zuvor getan haben, wir innerhalb des Body-Abschnitts ein normales HTML-Bildelement einrichten. Dies möchte in den Bilderordner gehen und das Straßenbild auswählen, das 320 Pixel breit ist. Speichern und aktualisieren. Wie erwartet, sehen wir dieses kleine Bild geladen. Das ist also im Allgemeinen, was wir tun, um ein Bild innerhalb einer Website zu laden. Aber anstatt mit diesem einzigen Bild stecken zu bleiben, können wir das, was das srcet-Attribut genannt wird, verwenden. Es bietet einige alternative Bilder, abhängig von der Größe des Browsers. Um dies zu tun, gehen wir zurück zu unseren Bildelementen. Lassen Sie uns dies einfach für dieses Beispiel entfernen, und ich werde hier das srcet-Attribut hinzufügen. Dieses Attribut ermöglicht es uns, mehrere Bilder innerhalb unserer Bildelemente hinzuzufügen, die der Browser entscheiden kann, welches für die aktuelle Größe des Browsers am besten geeignet ist . Die erste, wieder in den Bilderordner, lassen Sie uns für die Straße gehen, Bindestrich, 640, und dann durch ein Komma getrennt, können wir mehrere Bilder hinzufügen. Wir haben auch ein Bild, das 1.500 Pixel breit ist. Also Straße, Bindestrich, 1.500, Punkt JPEG. Was hier geschieht, ist, dass wir die ursprünglichen Quellattribute verwenden , wenn das Quellsatzattribut im Chrome-Browser nicht unterstützt wird. Dies ist also im Grunde ein Fallback-Bild. Wenn wir keine dieser auswählen können, ist srcet in der Tat, ziemlich gut in allen gängigen Browsern unterstützt. Wenn Sie auf caniuse.com gehen und eine Suche nach srcet durchführen, können wir sehen, dass srcet in all diesen gängigen Browsern weit verbreitet ist. Das einzige Problem ist der ältere Internet Explorer. Dies wurde jedoch durch den neueren Edge-Browser ersetzt , der volle Unterstützung bietet. Das bedeutet also, dass srcet ziemlich gut unterstützt ist und wir sicher sind, es für unsere Projekte zu verwenden. Da geht unser Projekt. Probieren wir das aus. Aktualisieren. Wir sehen die Straße, Strich, 640 Bild, und wenn wir das nach unten verkleinern, sehen Sie immer noch die 640. Lasst uns das größer machen. Wenn wir diese über 1.500 Pixel bekommen, was die Größe des größeren Bildes war, können wir immer noch innerhalb der Entwickler-Tools sehen, dass wir immer noch die 640 Pixel-Version herunterladen. Der Browser wählt also nicht das alternative Bild aus. Dies liegt daran, dass der Browser herausfinden kann, welchen er wählen wird, wir ihm auch die Breite des Bildes mitteilen müssen. Es erkennt nicht automatisch, dass dies 640 ist und dieses ist 1.500, aber nach dem Dateipfad zum Bild, nur zu tun ist, um die Breite mit dem Bild in Pixel hinzuzufügen, mit einem W kurz danach. Das ist 640 Pixel breit, das ist 1.500 Pixel breit, und lassen Sie uns das ausprobieren. Zurück zum Browser, ich werde das auf eine kleine Größe verkleinern, aktualisieren. Wir sehen die 640 Pixel-Version. Lasst uns das größer machen. Wir sehen irgendwann die 1.500 Pixel Version geladen wurde. Versuchen wir es einfach noch einmal. 640. Ich möchte die Größe nur hier sehen. So 300 Pixel, oder, Mine ändert sich auf das große Bild um etwa 500 Pixel. Wie wir wissen, wird dies basierend auf dem Ansichtsfenster des Browsers ausgewählt, das ist der sichtbare Bereich des Browsers. Es ist auch die Wahl unter der Annahme, dass wir wollen diese Bilder die volle Breite des Ansichtsfensters haben. Dies ist jedoch nicht immer der Fall. Um dies zu kontrollieren, können wir das Größenattribut nach unserem srcet einrichten. Fügen wir das hier hinzu. Wenn wir dieses Größen-Attribut auslassen, wird davon ausgegangen, dass die Bilder die volle Breite des Ansichtsfensters oder des Browsers haben sollen , oder bei seiner grundlegendsten, können wir in einer Größe hinzufügen, die auf alle Bilder angewendet wird. Wenn wir beispielsweise möchten, dass alle Bilder nur 50 Prozent der verfügbaren Breite haben, wie bei CSS, könnten wir bei 50vw hinzufügen und diese auf die Hälfte der Ansichtsfensterbreite einstellen. Speichern Sie das. Obwohl unsere 640 Pixel Version geladen wurde, hat dies nur 50 Prozent der Browserbreite in Anspruch genommen. Wenn wir auf die größere Version gehen, gilt das gleiche weiterhin. Bei kleinen Bildschirmen ist es üblich, Bilder und Inhalte mit der gesamten verfügbaren Breite zu sehen , genau wie wir auf der linken Seite sehen, und dann dauert es vielleicht nur 50 Prozent der Breite auf einer größeren Bildschirmgröße. Wie würden Sie das mit dem Größen-Attribut machen? Wir tun dies, indem wir diese Größenattribute mit Medienabfragen kombinieren , um die Bilder an die Größe des Geräts anzupassen. An unserem Beispiel, da wir zwei verschiedene Bilder zur Auswahl haben, werden wir zwei verschiedene Werte hinzufügen, die durch ein Komma getrennt sind. Genau wie bei normalem CSS werde ich eine Medienabfrage hinzufügen und die maximale Breite auf 600 Pixel einstellen. Unter 600 Pixeln möchten wir dann unsere Bilder auf 100 Prozent der Breite des Ansichtsfensters einstellen . Andernfalls sollen diese 50 Prozent oder die Hälfte der verfügbaren Breite betragen. Dies ist also eine gute Möglichkeit, die Größe der Bilder mit verschiedenen Bildschirmgrößen zu steuern. Probieren wir das aus. Zuallererst müssen wir auf die kleinere Größe gehen und aktualisieren. Wir sehen, dass die Straße, Bindestrich, 640 wie erwartet geladen wird, und dass dies 100 Prozent der Breite des Ansichtsfensters ist. Da wir dies auf 600 Pixel setzen, wenn wir weitermachen, gibt es unser großes Bild jetzt heruntergeladen, und wenn wir das gerade über 600 Pixel nehmen, wegen des zweiten Wertes, sinkt das jetzt auf 50vw. Etwas, das Sie vielleicht bemerkt haben, ist in meinem Browser. Es springt auf das große Bild mit etwa 500 Pixeln. Sie haben vielleicht einen anderen Wert und wir werden sehen, warum sehr bald. Aber Sie denken vielleicht, dass 500 Pixel ein wenig zu klein sind, um auf das große Bild zu springen, wenn man bedenkt, dass es nicht einmal breiter ist als unser erstes Bild. Sicherlich wird die 640 Version besser geeignet sein. Nun, das ist eine sehr gültige Frage und etwas, das wir als Nächstes beantworten werden. 6. Einführung in Pixeldichte: Dieses Video geht in Lektion 3 der Starterdateien, öffnet die Indexseite und stellt sicher, dass wir auch die richtige im Browser geöffnet haben. Im letzten Video haben wir zuvor besprochen, dass die Bilder möglicherweise nicht zu den Zeiten wechseln, in denen wir sie erwarten. Wir sahen uns an, wenn wir den Browser auf die kleinste Größe innerhalb der Entwicklungstools verkleinern, sehen wir, dass das kleinere Bild geladen ist. dies nach oben skalieren, sehen wir um die 500-Pixel-Markierung, dass das größere Bild heruntergeladen wurde. Sie können denken, dass dieser Sprung zum größeren Bild ein wenig zu früh ist , da er noch unter dem 640 Pixel breiten Bild liegt. Nun, der Grund dafür ist, dass es nicht nur um die Breite des Bildes geht, sondern auch um die Pixeldichte des Displays geht. Hier verwende ich einen Retina-Bildschirm, so dass wir mehr Pixel pro Zoll als ein Nicht-Retina-Gerät drücken können . Dies führt zu einem gestochen scharferen, schärferen Bild. Wie funktioniert das alles? Nun, stellen Sie sich vor, wir hatten einen Bildschirm mit einer Auflösung von 1920 x 1080, 1920 ist die Breite des Bildschirms in Pixel. Nehmen wir an, wir haben einen Raum von 300 mal 300 Pixeln geschaffen , wo wir ein Bild darin platzieren wollten. vielen Jahren war das einfach. Wir haben ein Bild erstellt, das 300 Pixel breit und 300 Pixel hoch war , und es funktionierte einwandfrei. Nun, obwohl mit den Anforderungen an eine höhere Qualität, viele Bildschirme sind in der Lage, mehr Pixel in einen Raum zu drücken, gemeinhin als Pixel pro Zoll oder die Pixeldichte bezeichnet. Das bedeutet, wenn Sie ein 2-faches Display haben, werden Sie doppelt so viele Pixel in den gleichen Raum drücken. Das bedeutet, dass wir ein Bild mit doppelter Größe verwenden können, in unserem Fall 600 mal 600 Pixel, und es würde in den gleichen verfügbaren Platz auf dem Bildschirm. diesem Grund sehen die Netzhaut in Geräten mit höherer Pixeldichte viel schärfer aus. Bildschirme können sogar noch höher gehen, wie z. B. 3 oder 4x. Ich bin sicher, dass auch in naher Zukunft viel höher ist. Um ein Beispiel aus der realen Welt zu sehen, hat mein Laptop-Bildschirm eine Auflösung von 3.072 Pixel breit und 1920 hoch. Sie können denken, dass es Bilder mit einer Breite von bis zu 3.072 Pixeln aufnehmen könnte. Oben im Ordner Bilder haben wir auch das gleiche Straßenbild namens 1x, 2x und auch 4x. Das 1x-Bild ist 640 Pixel breit, und dies ist nicht für Retina-Bildschirme gedacht. Dies ist für normale Monitore gedacht, die eine regelmäßige Pixeldichte haben, 2x, dies ist doppelt so groß und hat eine Breite von 1280. Dann ist 4x 2.560 Pixel breit. Lasst uns das mal aussuchen. Wenn wir diese Bilder hier auskommentieren. Nun, dies erstellen Sie ein neues Bildelemente, und lassen Sie uns dies einrichten, um unser 1x-Bild anzuzeigen. Was wir hier tun wollen, ist, dieses Bild in zwei weiteren Malen zu kopieren und einzufügen. Speichern Sie diese und dann in den Browser, und schließen Sie die Entwicklertools. Wenn wir den Browser so ziemlich die volle Breite des Bildschirms dehnen, können wir sehen, dass wir nur die Breite für zwei dieser Bilder haben. Denken Sie daran, dass jedes dieser Bilder die 1x-Version ist, die 640 Pixel breit ist. Wir haben hier nur die Breite für etwa 1500 Pixel, obwohl wir gerade gesehen haben, dass die Bildschirmauflösung über 3.000 Pixel breit war. Dies liegt daran, dass ich gerade erwähnt habe, dass ich ein Retina-Display verwende. Ein Retina-Display bedeutet nicht, dass wir mehr Platz zum Spielen haben. Es bedeutet nur, dass wir ein Bild mit höherer Qualität bereitstellen können, und die Bilder werden dann auf den gleichen verfügbaren Platz gequetscht. Wenn wir darüber nachdenken, ist das völlig sinnvoll. Wir möchten, dass die physische Größe des Bildes die gleiche Menge an Platz auf jedem Bildschirm einnimmt. Wenn Sie eine Website erstellen, ein Bild, das ich entworfen, um die Hälfte der Breite des Bildschirms zu haben, wird ein Bild, das ich entworfen, um die Hälfte der Breite des Bildschirms zu haben,immer noch die halbe Breite für ein normales oder ein Retina-Display. Der einzige Unterschied besteht darin, dass ein Retina-Display ein größeres Bild verwenden kann, um in denselben verfügbaren Raum einzusetzen, was zu einer höheren Bildqualität führt. Wir können dieses Wissen auch mit den Quellsatzattributen verwenden. Dafür brauchen wir nur eines unserer Bildbeispiele, also lassen Sie uns zwei davon verschieben. Dies wird auch als die ursprüngliche 1x-Version für Nicht-Retina-Bildschirme gezählt. Danach legen Sie in das srcset, und dann mit einer Quelle können wir auch ein 2x bereitstellen, und auch einen Link zu unserem 4x Bild zu. Der Unterschied zum vorherigen Video, obwohl wir die Größe gefolgt von der w hinzugefügt . Dieses Mal kann das srcset auch eine Pixeldichte akzeptieren. Dazu fügen wir 2x hinzu, und dann fügen wir für das große Bild 4x hinzu. Kurz bevor wir dies überprüfen, können wir auch die Größe angeben, die das Bild angezeigt werden soll. Das bedeutet, dass wir unabhängig vom Bildschirm ein 640 Pixel breites Bild anzeigen möchten. Dies ist, was CSS Pixel genannt wird. Wenn der Browser dann entscheidet, dass er einen größeren verwenden möchte, wie den 2x oder den 4x, wird er dann in den gleichen Raum gedrückt. Lassen Sie uns dies eine speichern und über dem Browser, in die Entwickler-Tools, aktualisieren, in das Netzwerk. Nun, obwohl wir das Bild auf 640 Pixel breit eingestellt haben, hat der Browser jetzt erkannt, dass mein Monitor ein Retina-Bildschirm ist und sich dafür entschieden, das 2x-Bild anzuwenden, das 1280 breit ist, und dieses Bild wird dann in die gleiche verfügbarer Platz. Die Verwendung dieser zusätzlichen Bildattribute ist eine ziemlich gute Möglichkeit, zwischen Bildgrößen zu wechseln, abhängig vom Bildschirm oder der Pixeldichte. Oft brauchen wir nichts komplexeres als das zu tun. Wir setzen auch viel Vertrauen in den Browser, das ist, wenn wir mehr manuelle Steuerung oder noch flexiblere Optionen wollen. Dann werden wir als nächstes einen Blick darauf werfen, wie dies mit dem Pitch-Element zu tun ist. 7. Das Bildelement: Diese zusätzlichen Bildattribute, die wir uns angesehen haben, sind wirklich nützlich für die Auswahl der richtigen Art von Bild basierend auf der Breite des Browsers und auch der Pixeldichte. Wenn das alles ist, was wir brauchen, dann ist das völlig in Ordnung. Allerdings, wenn wir etwas feinere Kontrolle wollen, können wir verwenden, was das Bildelement genannt wird. Nun, diese Lektion Kopf in Nummer 4, die das Bildelement ist, und öffnen Sie dann die Seite index.html. Innerhalb des Browsers ist dies nur eine leere HTML-Seite und wir haben einige Bilder wie immer in dieser Lektion, die wirklich nützlich sein werden, um herauszufinden, was die Bildelemente zu bieten hat. Das Bildelement bietet mehr Flexibilität, wenn es erforderlich ist, indem wir Zugriff auf die volle Leistung von Medienabfragen, um unser Bild auszuwählen. Dies ist der manuelle Weg, um dem Browser mitzuteilen, welches Bild verwendet werden soll , anstatt Ihren Browser entscheiden zu lassen, wie wir es in früheren Videos getan haben. Das Bildelement ist einfach ein Wrapper für verschiedene Bilder genau so. Im Inneren des Körpers erstellen wir das Bild, öffnende und schließende Tag. Dieses Element stellt keine Bilder für sich bereit, wir müssen stattdessen in irgendeinem Inhalt innerhalb dieses Elements platzieren. Ebenso wie die Quelle, an der Sie sich in früheren Videos angeschaut haben, wird auch das Bildelement gut unterstützt. Wir haben volle Unterstützung in allen gängigen Browsern und wie bei den meisten Dingen haben wir ein Problem mit Internet Explorer, gut mit Microsoft-Systemen. Dies wurde durch den Edge-Browser ersetzt, so dass wir nicht zu viele Probleme mit diesem Element haben sollten. Zurück zum Texteditor und innerhalb des Bildelements und ich werde unser erstes Bild hinzufügen. Ich muss für den Bilderordner und den See gehen, der 640 Pixel wide.jpeg ist. Wie Sie erwarten würden, wenn wir dies speichern und aktualisieren, sehen wir jetzt, dass dieses Bild innerhalb des Browsers geladen wurde. Mit diesem Setup sind wir nicht weiter unten auf der Linie, als wir einfach ein reguläres Bildelement verwenden würden . Aber was wir tun können, wenn wir diese Bildelemente verwenden, ist, auch alternative Bilder innerhalb eines oder mehrerer Quellelemente bereitzustellen . Die Quellelemente haben nur ein öffnendes Tag. Da wir die Daten als Attribute hinzugefügt haben, sie verwendet, um Medienressourcen nicht nur für diese Bildelemente bereitzustellen, sondern Sie können auch dieses Quellattribut sehen, das mit dem Audio- oder Video-Wrapper verwendet wird. Wenn Sie es innerhalb der Bildelemente verwenden, wie wir es sind, werden die Quellattribute ignoriert. Der Grund dafür ist, dass das Quellattribut nicht benötigt wird , da wir bereits ein Fallback-Bild unten haben, aber was wir hinzufügen können, ist die Quellmenge. Dies wiederum nimmt die Bilder, die wir verwenden möchten, gefolgt von der Größe. Wir fügen zuerst den Dateipfad hinzu, so dass sich unser im Ordner Images befindet. Lassen Sie uns für die sun-640.jpeg gehen. Die Größe des Bildes 640w. Dann durch ein Komma getrennt, ist unser zweites Bild, das wir zur Auswahl erlauben werden die größere Version der Sonne, die sun-1,280.jpeg ist. Dann geben wir an, dass dieses Bild 1.280 Pixel breit ist und ich habe die beiden Sonnenbilder im Inneren von hier hinzugefügt , die sich von dem Fallback-Bild unterscheiden , nur damit wir deutlich sehen können, was im Browser vor sich geht. Wie im vorherigen Video können wir auch die Pixeldichte anstelle dieser Breite verwenden. Hier könnten wir zum Beispiel 2x und 4x hinzufügen, also wählen Sie, welche Option am besten zu Ihnen passt. Lassen Sie uns dies speichern und öffnen Sie dies im Browser, aktualisieren. Wir werden sehen, ob wir den Browser auf die kleinere Größe verkleinern , aber die sun-640 wird es aufblähen. Wir sehen den See nicht, da dies nur das Fallback-Bild ist, wenn die Quelle nicht unterstützt wird. Lass uns das ein bisschen größer machen. Ich gehe weiter und dann, wenn wir knapp 500 Pixel getroffen haben, sehen wir, dass die größere Version geladen wurde. Dies lässt uns in einer ziemlich ähnlichen Position wie in den vorherigen Videos, wo wir ein reguläres Bildelement hatten , und dann haben wir den Quellsatz hinzugefügt. Aber der Unterschied hier ist, dass wir auch Medienabfragen einführen können. Das bedeutet, anstatt den Browser entscheiden zu lassen, welches Bild angezeigt werden soll, können wir selbst einige strengere Bedingungen erfüllen. Wir können jede Medienabfrage verwenden, die wir wollen, genau wie wir es mit normalem CSS tun könnten. Ein gemeinsames Bild besteht darin, nur dann ein Bild anzuzeigen, wenn das Ansichtsfenster eine minimale oder maximale Breite hat. Wir fügen die Medienattribute hinzu und richten dann unsere Medienabfrage zwischen den Klammern ein. Dieser war bei der Mindestbreite 640 Pixeln und wir werden unser größeres Bild löschen. Was uns das hinterlässt, ist ein Quellattribut, das dieses Bild nur dann anzeigt, wenn der Browser größer als 640 Pixel ist. Wenn der Browser unter 640 Pixel liegt und diese Medienabfragebedingung nicht erfüllt ist, wird das Fallbackbild verwendet. Schauen wir uns das an. Bringen Sie dies auf die kleinste Größe und aktualisieren Sie sie. Wir sehen den See, der das Fallback-Bild ist, und jetzt dehnen wir es auf 640 Pixel oder höher. Dadurch wird nun auf das Sonnenbild gewechselt. Eine weitere nützliche Sache, die diese Medienabfrage für uns tut, ist, dass sie uns auch ermöglicht genau zu justieren, wann unsere Bilder umgeschaltet werden sollen. Früher, als der Browser sich entschieden hat, änderte er mein Bild knapp unter der 500 Pixel-Markierung. Sagen wir einfach, wir dachten, dass dies zu früh war, wir wollten dies auf 600 Pixel ändern, gut diese Medienattribute werden uns erlauben, dies auf jede Größe zu optimieren, die wir wollen. Um dies zu tun, werden wir unsere Quelle duplizieren, wir können unser großes Bild wieder einführen, das 1.280 war. Wir müssen auch die Breite hier einstellen, und dieses Mal, für das kleinere Bild, werden wir die maximale Breite auf 599 Pixel setzen und dann wollen wir, dass die größere Wirkung auf 600 Pixel. Sie könnten dies sogar höher machen, wenn Sie es wollten, aber diese Medienabfrage gibt uns jetzt volle Kontrolle darüber, wann wir zu unserem großen Bild wechseln. Probieren wir das aus. Wenn wir auf die kleinere Größe gehen, sehen wir die Sonne bei 640, und dann dauert es bis zu 600 Pixel und unser Bild wird jetzt durch die größere Version ersetzt werden, sowie die minimale oder die maximale Breite, die wir sind verwenden, kann jede gültige Medienabfrage verwendet werden. Obwohl wir nur eine einzige Bildquelle für jede Medienabfrage haben, können wir immer noch mehrere Quellen verwenden, die noch unter eine einzelne Medienabfrage fallen. Ein Beispiel könnte sein, wenn die Geräteausrichtung überprüft wird. Dies ist mehr für mobile Geräte und wir können überprüfen, ob das Gerät entweder Quer- oder Hochformat gedreht wird. Um dies in Aktion zu sehen, können wir die maximale Breite über die Ausrichtung ändern, und diese werden wir setzen dies eine Landschaft. Wir können dann die zweite in die Ausrichtung des Porträts ändern und jetzt werden wir unsere Bilder so einstellen, dass sie jedem entsprechen. Da die Landschaft breiter ist, gehen wir für unsere zwei breiten Bilder, die 1.280 und 2.400 sind. Ändern Sie sowohl die Bildquelle als auch die Breite. Lassen Sie uns dies kopieren, getrennt durch Komma die zweite, die für 2.400 ist. Als nächstes wird die Portraitansicht, so dass die Bilder schmaler werden und dafür haben wir eine 320 und eine 640 Version. Die erste Quelle von 320 dann durch ein Komma getrennt, können wir in der 640 Pixel breiten Version hinzufügen. Wenn wir dies nun im Hochformat testen, sollten nun unsere beiden kleineren Bilder angezeigt werden. Wenn wir dies auf Querformat umstellen, sollten wir dann unsere beiden großen Bilder anzeigen. Um dies zu simulieren, können wir zu den Entwicklertools gehen, und dann, wenn wir auf die Werkzeugleiste Toggle Gerät klicken, ermöglicht es uns dann, zwischen einer Desktop-Ansicht und einem mobilen Gerät zu wählen. Lassen Sie uns für iPhone 6 gehen, und wenn wir aktualisieren, sehen wir, dass dieses kleine Bild von 640 Pixeln geladen wurde. Dieses Symbol wird gerade hier die Ausrichtung auf Querformat umschalten, aktualisieren, und es ist jetzt eines der großen Bilder für die Landschaftsansicht ausgewählt. Denken Sie daran, dass Sie so viele dieser Quellelemente hinzufügen können, wie Sie möchten, um sicherzustellen, dass wir das beste Bild für jede Situation haben. Schließlich können wir auch diese Größenattribute verwenden, genau wie wir es in den vorherigen Videos getan haben. Denken Sie daran, dass, wenn kein Größenattribut hinzugefügt wird angenommen wird, dass alle diese Bilder die volle Breite für das Ansichtsfenster haben sollen. Wenn Sie beispielsweise eine Querformatausrichtung verwenden, möchten wir einige der größeren Bilder auf nur 50 Prozent der Bildschirmbreite beschränken . Obwohl genau wie früher, legen Sie die Größen fest. Dies wird mit einer Medienabfrage kombiniert, bei der wir die maximale Breite auf 1.280 Pixel einstellen. Von Null bis 1.280 wollen wir, dass die Bilder die volle Breite des Gerätes mit 100vw und dann nur 50 Prozent Breite auf den größeren Bildschirmen haben. So und lassen Sie uns das testen. Wenn wir den Browser noch breiter dehnen, werden wir keinen Unterschied sehen, da das iPhone eine feste Größe hat. Wenn wir etwas Größeres wie ein iPad Pro auswählen, hat das Bild beim ersten Auswählen in der Portray-Ansicht die volle Breite des Bildschirms. Dies liegt daran, dass es unter die maximale Breite von 1.280 Pixel fällt, wo wir die Breite auf 100 Prozent einstellen. Alternativ, wenn wir dies in Querformat umstellen, sollte es nun das Bild um 50 Prozent abschalten. Lassen Sie uns das versuchen, und das funktioniert jetzt wie erwartet. Der Schlüssel zum Mitnehmen ist, wenn Sie möchten, dass der Browser entscheiden, welches Bild ausgewählt werden soll, verwenden Sie das Bild kombiniert mit dem Quellsatz oder einfach so, wenn Sie viel flexibler steuern möchten, ist das Bildelement eine großartige Option. Ein weiterer großer Nutzen für das Bildelement ist es, auch die Kunstrichtung von Bildern zu ändern und wir werden im kommenden Video erläutern, wie dies zu tun ist. 8. Kunstrichtung: Die Beispiele, die wir bisher betrachtet haben, konzentrieren sich hauptsächlich auf die Pixeldichte und auch auf die Auflösung. Obwohl das Tonhöhlenelement auch einen anderen großen Anwendungsfall hat, und dies ist, das Bild anzupassen, basierend auf der so genannten Kunstrichtung. Gehen wir dazu zu unseren Starter-Dateien und in Lektion Nummer Fünf. Von hier aus öffnen Sie den Ordner Art Direction, öffnen Sie die Indexseite, und lassen Sie uns dies öffnen, innerhalb des Browsers, wir kopieren den Dateipfad zu diesem und ersetzen dann den aus dem letzten Video. Ich klicke auch einfach auf die Geräte-Symbolleiste , um dies wieder in die vollständige Desktop-Ansicht zu setzen. Alle unsere Bilder haben bisher nur unterschiedliche Größen, und es ist toll, eine kleinere und eine größere Version desselben Bildes zu haben, aber manchmal passen bestimmte Bilder einfach nicht zu einer bestimmten Bildschirmgröße. Im Ordner Bilder, innerhalb von Lektion fünf, wir zuerst einen Blick auf die Querformat Version. Hier sehen wir jemanden, der mit einem weiten Landschaftshintergrund springt, und das wird meiner Meinung nach auf einem großen Monitor gut aussehen, wo Sie alle Hintergrunddetails sehen können. Wir können die Sonne sehen, wir können die Berge sehen, wir können den Boden sehen, aber stellen Sie sich dies auf einem kleinen Gerät wie einem Telefon vor, da die Person springt nur einen kleinen Prozentsatz der Gesamtbreite des Bildes einnimmt , ist fokussierten Punkt dieser Person kann wirklich klein aussehen. Für das mobile Gerät, anstatt eine kleinere skalierte Version dieses Bildes zu liefern, kann es besser sein, eine abgeschnittene Version dieses Fokuspunkts bereitzustellen, genau wie wir in der Portraitversion sehen. Hier sehen wir eine vertikale Version, die sich auf diese Person konzentriert, und wir sehen auch weniger Hintergrund. heißt, diese Person nimmt einen größeren Prozentsatz der Gesamtbreite ein. Daher wird es auf einem mobilen Gerät größer aussehen. Probieren wir das aus. Oben auf der Indexseite, innerhalb des Body-Abschnitts, haben wir hier nur einen leeren Starter. Auch hier, um dies zu nutzen, werden wir das Bildelement verwenden. Dann werden wir im Inneren von hier zwei Quellelemente liefern, die auf diese beiden Bilder verweisen werden. Wir wissen, dass wir eine Medienabfrage als Attribut hinzufügen können, dann innerhalb der Klammern, die erste, die wir die maximale Breite einrichten 799 Pixel. Dann werden wir für diese kleinere Ansicht das Bild mit den srcset-Attributen festlegen, so dass dies auf den Ordner Images verweist. Dann das Bild, das wir brauchen, da dies das kleinere Gerät ist, werden wir die Porträt-Version verwenden. Dies hat eine Punkt-JPEG-Erweiterung. Jetzt können wir das duplizieren. Dieser wird ausgelöst, wenn die minimale Breite 800 Pixel und höher ist. Nach diesem, da wir mehr Platz haben, wechseln wir in die Landschaftsansicht. zwischen unseren beiden Bildern so wechselt, wenn man eine bestimmte Zoomstufe ist oder eins eine abgeschnittene Version des Bildes ist, wird dies als Kunstrichtung bezeichnet. Da wir nicht mehrere Größen dieser Bilder haben, werden wir einige CSS an der Spitze einrichten. Wir beschränken das Bild einfach auf eine maximale Breite von 100 Prozent, und dies verhindert, dass sich die Bilder zu breit dehnen. Auch dieses Pitch-Element zu tun, müssen wir einen Bildplatzhalter hinzufügen, der als Standard fungiert, und auch die Elementpositionen platzieren diese Bilder im Inneren. Die Quelle, dies wird für den Fallback sein, würde nur in der Landschaftsversion platziert. Geben Sie dies ein Speichern, und stellen Sie sicher, dass über im Browser, wir sind innerhalb der Nummer fünf Ordner. Lassen Sie uns dies zunächst auf die kleinste Ansicht verkleinern. Da wir uns auf der kleineren Ansicht befinden, die unter 799 Pixel liegt, werden wir eine Porträt-Version sehen, die auf diese Person springt. Lassen Sie diese auf über 800 Pixel skalieren. Da gehen wir hin. Dann über 800 Pixel, sehen wir die Volllandschaftsversion mit mehr von der Hintergrundlandschaft. Diese künstlerische Richtung gibt uns wirklich etwas zum Nachdenken, um zu versuchen, den Fokus auf einen einzelnen Teil des Bildes zu setzen. Oder genau wie in diesem Fall, wo wir versuchen, das Schlüsselteil nicht zu klein zu machen. Als Nächstes konzentrieren wir uns auf die verschiedenen verfügbaren Bildtypen. 9. Bildtypen und Kompression: Ein weiterer äußerst wichtiger Teil der Optimierung unserer Bilder für das Web ist die Betrachtung des Bildformats. Es gibt viele Bildformate zur Verfügung, und ich bin sicher, dass Sie auf einige davon gestoßen sind, wie JPEG, PNG, GIF oder GIF, je nachdem, wie Sie es aussprechen, und auch SVG, um einige zu nennen. Dies sind alle üblich und wenn wir ein Bild online herunterladen und unsere Projekte nutzen, haben wir nicht immer Wahl, in welchem Format das Bild sein wird. Es gibt Wege, wie wir das ändern können, was wir uns bald ansehen werden. Aber bevor wir die Bildformate ändern, müssen wir zunächst verstehen, was die wichtigsten Unterschiede sind und warum wir überhaupt Formate ändern sollten. Es gibt mehrere Hauptgründe, warum das Format wichtig ist. Das große ist, dass verschiedene Formate unterschiedliche Dateigrößen haben. Dasselbe Image in einem anderen Format könnte die Dateigröße verringern, wodurch die Downloadzeit für den Endbenutzer verkürzt wird. Diese Zeitersparnis könnte wenig oder riesig abhängig von einigen der Faktoren, die wir in nur einem Moment betrachten werden. Neben der Dateigröße kann die tatsächliche Bildqualität auch bei verschiedenen Formaten unterschiedlich sein. Es gibt Überlegungen, wie zum Beispiel, ob das Bild Transparenz und auch die Anzahl der unterstützenden Farben unterstützen kann . Außerdem müssen wir darüber nachdenken, ob wir das Bild nach oben oder unten skalieren müssen. Da, wie wir uns in anderen Videos angesehen haben, kann das Hochskalieren von JPEG-Bildern die Bildqualität verringern. Andere Dateitypen wie SVG bleiben jedoch unberührt. Dies geschieht, weil sowohl diese SVG als auch JPEG in zwei verschiedene Kategorien fallen. Ein Rasterbild ist wie ein traditionelles Foto. Es besteht aus winzigen Pixeln. Abhängig von der Größe des Bildes kann es Millionen von Pixeln geben, und jeder stellt eine Farbe dar. Da es so viele Pixel in einem Foto gibt, sind sie in der Regel nicht erkennbar durch das menschliche Auge, es sei denn, wir skalieren die Bilder nach oben, und dies ist, wenn sie beginnen, die Qualität zu verlieren und werden pixelig, da der Bildschirm versucht, die gleiche passen Anzahl von Pixeln in einen größeren Bereich. Bildformate wie JPEG und PNG fallen in diese Kategorie. Eine andere Kategorie ist Vektorgrafiken Diese werden auf Computerprogrammen erstellt und werden mit Elementen wie Kurven, Linien und Formen erstellt. Sie können ohne Qualitätsverlust nach oben oder nach unten skaliert werden. Wir können auch vorhandene Vektorgrafiken bearbeiten. Programme wie Adobe Illustrator, Sketch, Inkscape und Figma können sie erstellen und sie können in Format wie SVG gespeichert werden. Ein weiterer Unterschied zu einem SVG ist, dass es auch im Code dargestellt wird. Eine SVG-Datei enthält einen Code , den wir direkt in ein HTML-Dokument einfügen können. bedeutet, dass wir nicht immer einmal auf eine Bilddatei verlinken müssen, wenn wir diesen Ansatz bevorzugen. Die klaren Unterscheidungen zwischen diesen beiden Gruppen machen es leicht zu entscheiden, was wir verwenden müssen. Wenn Sie qualitativ hochwertige Fotos benötigen, z. B. eine Website, die ein Fotoportfolio ist, sind Rasterbilder wie JPEG ideal. Gut für Grafiken, Logos und Symbole, ein Vektor oft eine bessere Wahl, besonders wenn das Bild skaliert wird. Obwohl wir die Raster-Kategorie als bessere Auswahl an Dingen wie Fotos haben, bedeutet dies nicht, dass wir an der ursprünglichen Dateigröße hängen. Wir können die Komprimierung auf unsere Bilder anwenden, um die Dateigröße zu reduzieren, was sie schneller für die Verwendung im Web macht. Komprimierung kann in Gruppen angewendet werden, die verlustfrei und verlustfrei genannt werden. Diese beziehen sich auf die Art und Weise, wie wir unsere Bilder komprimieren oder optimieren, um zu versuchen , die Dateigröße und damit die Download-Geschwindigkeit zu reduzieren. verlustbehaftete Komprimierung kann zu einem Verlust der ursprünglichen Bildqualität führen. Aber da es regressiver ist, kann es auch zu größeren Dateigrößenverkleinerungen führen. Das bedeutet nicht, dass unsere Bilder rein aussehen. In der Tat können Sie nicht einmal bemerken, einen Qualitätsverlust überhaupt bei vielen Gelegenheiten, abhängig von der Höhe des Verlustes, die wir festgelegt. Sobald die Komprimierung angewendet wurde, ist etwas, was wirklich wichtig ist, dass es kein Zurück zum Originalbild gibt, es ist für immer verloren. Verlustfrei ist so ziemlich das Gegenteil, und die ursprüngliche Bildqualität bleibt erhalten. Der Komprimierungsalgorithmus kann die Dateigröße reduzieren und auch alle Metadaten reduzieren, die Sie im Bild gespeichert haben. Metadaten gehören Elemente, die automatisch von der Kamera gespeichert werden , z. B. Datum und Kameratyp , Name des Fotografen usw. Da die ursprüngliche Bildqualität verlustfrei beibehalten wird, ist es verständlich, dass die Dateieinsparungen unter den verlustbehafteten Versionen liegen können. Also mit all dem, welches ist am besten zu verwenden? Nun, werfen wir einen Blick auf einige der gängigeren Bildformate. JPEG ist eine gute Wahl für die Anzeige in hochwertigen Fotografien oder sogar Kunstwerken. Es ist jedoch nicht großartig, um Dinge wie Text anzuzeigen, besonders wenn er skaliert werden muss. JPEG ist ein gängiges Bildformat, daher sollte es keine Probleme mit diesem Mangel an Unterstützung geben. Es ist ein verlustbehaftetes Komprimierungsformat, so dass wir auch viel von der Bilddateigröße speichern können. Wenn wir mit einem kleinen Qualitätsverlust zufrieden sind, könnten wir mit der Komprimierung sogar noch weiter gehen, wenn wir eine kleinere Version wünschen, vielleicht als E-Mail-Anhang oder einfach nur etwas auf Ihrer Website, das keine große Menge an Details erfordert. PNG ist auch ein sehr beliebtes Web-Bildformat. Einer der Vorteile ist, dass es auch Transparenzen unterstützt, was ein JPEG nicht unterstützt. Ein JPEG muss eine einfarbige Hintergrundfarbe haben. Wenn Sie es beispielsweise in einem Website-Header verwenden, müssen Sie sicherstellen, dass die Hintergrundfarbe des Bildes mit der Hintergrundfarbe der Kopfzeile übereinstimmt. Wenn Sie ein Bild oder eine Grafik auf einem transparenten Hintergrund verwenden müssen, ist ein PNG der richtige Weg. Ein PNG hat auch eine verlustfreie Komprimierung, so dass die ursprüngliche Datei beibehalten wird und sie auch wiederhergestellt werden kann. Dies kann jedoch auch bedeuten, dass eine geringere Reduzierung der Dateigröße möglich ist. Manchmal finden Sie einfache Bilder, Symbole oder Grafiken, die als GIF gespeichert sind. Sie sind eine gute Wahl dafür, da sie eine kleine Dateigröße haben und auch Transparenzen unterstützen können. Wir haben also keinen Hintergrund, der die Dinge verdeckt. Eine GIF-Datei kann auch eine Animation enthalten. Dies ist also eine gute Wahl, wenn Sie animieren müssen. Diese Animationen können mit Werkzeugen wie Photoshop erstellt werden. Über die Vektoren hinaus ist ein SVG eine beliebte Wahl. Wir benutzen es nicht für Fotos. Oder wenn Sie eine computerbasierte Grafik, ein Logo oder ein Symbol benötigen , ist dies eine gute Wahl, da sie ohne Qualitätsverlust skalierbar ist und in der Regel auch kleine Dateigrößen hat. Einige dieser bisher erwähnten Bildtechnologien gibt es schon seit einiger Zeit und haben auch einige Einschränkungen. Aus diesem Grund wurden einige neuere Bildformate der nächsten Generation entwickelt, wie JPEG 2000, JPEG XR und auch WebP. Obwohl sie noch nicht so häufig angenommen wurden, können sie große Dateigrößeneinsparungen bei herkömmlichen Formaten wie JPEG und PNG bieten. Ich werde nicht auf alle technischen Details dieser gehen, aber JPEG 2000 bietet die Wahl sowohl verlustbehaftete als auch verlustfreie Komprimierung. Wir können wählen, welches für unsere Bilder am besten geeignet ist und in der Regel ein hochwertiges Bild für die gleiche Dateigröße wie ein normales JPEG hat . JPEG XR wurde von Microsoft erstellt und bietet außerdem die Wahl zwischen verlustbehafteter und verlustfreier Komprimierung für eine breitere Palette von Situationen. Es kann höhere Komprimierungsstufen haben, so dass eine große Dateigröße gespeichert werden muss. Wir haben auch WebP, das von Google entwickelt wurde und wie die anderen beiden auch verlustbehaftete und verlustfreie Komprimierung unterstützen wird . Es kann Transparenzen beibehalten werden und hat im Allgemeinen eine viel kleinere Dateigröße als herkömmliche Dateitypen. Ein weiterer Vorteil ist, dass es auch Animationen unterstützt, was bedeutet, dass es eine wirklich gute Alternative zu GIF-Dateien ist, wie Sie es erwarten würden, da diese Dateitypen viel neuer sind. Das Problem liegt in der Unterstützung von Bildprogrammen, Geräten wie Kameras und auch Webbrowsern. Um die Browserunterstützung zu überprüfen, können wir auch auf caniuse.com gehen. Werfen wir einen Blick auf ein WebP. Hier geht's, das WebP-Bildformat. Wir können sehen, dass dies in den meisten der großen Browser voll unterstützt wird. Wie immer haben wir ein Problem mit Internet Explorer , der durch Edge ersetzt wurde. Auch auf Safari haben wir nur teilweise Unterstützung. Dies bedeutet, dass es nur unter macOS, seinem Betriebssystem und höher unterstützt wird. Dies ist etwas zu berücksichtigen, wenn Sie eines dieser Bilder der nächsten Generation verwenden. Werfen wir einen Blick auf JPEG 2000. Wir können sehen, dass dies nicht so gut unterstützt wird wie das WebP, also ist dies etwas, worauf man achten muss. Lassen Sie uns die WebXR überprüfen. Auch hier hat dies viele Probleme mit der Unterstützung. Es kann besser sein, bei einem Format wie WebP anstelle dieser beiden JPEG-Formate zu bleiben. SVG, schauen wir uns das an. Dies ist einer der Vektortypen. Dies wird auf allen gängigen Browsern sehr gut unterstützt. Es kann eine gute Idee sein, ein Bildformat der nächsten Generation zur Verfügung zu haben , wenn der Browser sie unterstützt und auch Bilder wie JPEG und PNG zurückgreifen, wenn es eingeschränkte Browserunterstützung gibt. Wir werden einen Blick darauf werfen, wie Sie dies als nächstes tun können, zusammen mit einigen Tools, die Sie zum Konvertieren von Bilddateitypen verwenden können. 10. Konvertierungs-Tools und Fallback-Bilder: Jetzt wissen wir ein wenig mehr über die verschiedenen Arten von Bilddateitypen zur Verfügung. Werfen wir nun einen Blick darauf, wie wir diese zu unserem Projekt hinzufügen können und wie wir Fallback-Bilder hinzufügen können, wenn es keine Browser-Unterstützung gibt. Für diese Lektion gehen Sie in die Nummer 6, also Konvertierungswerkzeuge und Fallback-Bilder. Öffnen Sie wie immer die Index-Seite, und dann können wir dies innerhalb des Browsers öffnen, legen Sie dies in eine neue Registerkarte. Ich werde mit unserer leeren HTML-Seite beginnen. Hier habe ich eine Liste von einigen der gängigen Bildtypen zur Verfügung gestellt, wir haben das WebP, wir haben die SVG, PNG, JPEG und auch GIF. Zum Umschalten zwischen verschiedenen Bildtypen werden die Bildelemente, die von [unhörbar] abgedeckt verschiedene Bilder mit unterschiedlichen Formaten auflisten. Stellen Sie immer noch die Quellelemente wie zuvor bereit, aber dieses Mal, anstatt mit der Größe zu arbeiten, haben wir erklärt, dass der Dateityp, Browser oder das Gerät dann überprüft, ob dieser Dateityp unterstützt wird, und wenn nicht, wird übersprungen. Mit diesen Bildformaten, die wir gerade hier haben, beginnen wir mit unserem Beispiel. Wir können das Bildelement als unser Wrapper verwenden, für dieses Beispiel über in Bildern haben wir ein JPEG und eine WebP-Version des gleichen Bildes, also lassen Sie uns diese hinzufügen. Wir brauchen eine Quelle, dann fügen wir hier die Typattribute hinzu. Wir können dann jede dieser für beide verwendet verwenden, ich werde für die WebP-Version gehen, die image/webp ist. Dann fügen wir den Quellenpunkt auf das WebP-Bild hinzu. Danach müssen wir uns auch um unseren Rückfall kümmern, der unsere bridge.jpg ist, fügen Sie die Bildelemente hinzu. Dies ist in den Bildern und der bridge.jpg. Wenn WebP unterstützt wird, wird dieses Bild ausgewählt. Wenn nicht, wird es leicht in die Bildelemente zurückfallen. Lassen Sie uns das ausprobieren, aktualisieren Sie den Browser. Wir können innerhalb der Entwickler-Tools sehen, dass mein Browser die WebP-Version gewählt hat. Für mich wäre das ein Vorteil, weil dies schneller geladen wird. Wenn wir uns die bridge.jpg ansehen, können wir unten sehen, dass dies ungefähr 134 Kilobyte ist. Wenn wir auf die WebP-Version gehen, ist dies um 1-10 Kilobyte, so dass dies zu einer Datei führen wird, und meine Bilder werden schneller heruntergeladen. Das ist wirklich nützlich, aber wenn wir nach Bildern suchen, die wir in unseren Projekten verwenden können, haben wir nicht immer die Möglichkeit, unsere Bilder in verschiedenen Dateiformaten herunterzuladen. Das ist in Ordnung, weil es einige Werkzeuge gibt, die uns helfen, zu konvertieren und auch unsere Bilder zu komprimieren. Ich verwende eine Markierung, und das hat einige Optionen, die beim Öffnen der Bilder integriert sind. Wenn wir in Nummer sechs gehen, die wir derzeit sind, fügen Sie Bilder ein und doppelklicken Sie auf eines dieser Bilder. Diese öffnet sich dann innerhalb der Vorschau. Machen Sie sich keine Sorgen, wenn Sie keine Markierung verwenden, wenn Sie Windows oder Linux Ihr Standardprogramm, das das Bild öffnet , enthält möglicherweise auch einige dieser Optionen. Wenn nicht, werfen wir einen Blick auf einige weitere Optionen in nur einem Moment. Wie die meisten Symbole, können wir in Werkzeuge gehen und die Größe anpassen. Wir können die Dateigröße reduzieren, wenn dieses bestimmte Bild ein wenig zu groß ist, und wir können sehen, dass die resultierende Dateigröße reduziert wurde. Was ändert sich auf 300 sein. Sie können sehen, dass dies auf 50 Kilobyte reduziert wurde, was sich auf 300 ändert. Jetzt sind es auf 30 Kilobyte runter. Es ist am einfachsten, wir können einfach so etwas tun, um die Dateigröße zu reduzieren , wenn der anfängliche Download zu groß ist. Die meisten Programme ermöglichen es uns auch, die Bilder in verschiedenen Formaten zu exportieren. Viele von ihnen haben in der Regel eine Exportfunktion, auf die wir klicken können und wir können oft das Bildformat ändern, so dass wir sehen, die Dateigröße ist 157 hier, die ändert sich auf 2.000. Dies ist 216 PNG, das ist ein bisschen größer, und auch die Dateigrößen, die Komprimierung unterstützen, können wir auch die Qualität anpassen. Wie bei den meisten Dingen gibt es auch viele andere Tools, die Sie herunterladen können. Sie können eine riesige Menge finden, die verfügbar ist, wenn Sie App Stores oder online suchen. Ein beliebtes Tool niedrig ist ein namens ImageOptim. Dies ist auf imageoptim.com verfügbar. Diese spezielle Software ist für Mac und Linux verfügbar, die Sie herunterladen können. Dies ist eine Sammlung von Werkzeugen, die kombiniert, um unnötigen Müll aus unseren Bildern zu entfernen. Hier ist eine Liste von Tools, die es verwendet, und es ist alles kostenlos und Open-Source, also gibt es keine Gebühr, dies zu verwenden. Es gilt auch Kompressionstechniken, und es gibt auch eine Online-Version, auf die wir klicken können nur hier. Sie zahlen für diesen speziellen Service. Und ein weiterer ist tinypng.com. Im Gegensatz zu ImageOptim ist dies ein kostenloses Online-Kompressionstool. Das finden Sie unter tinypng.com. Trotz des Namens akzeptiert dies auch JPEG-Bilder. Wenn wir einfach Drag & Drop in diesen Abschnitt nur hier, dieser andere webbasierte Drag-and-Drop-Dienst ist compressor.io, zusammen mit PNG und JPEG. Dies akzeptiert auch GIF, SVG und auch die neueren WebP-Typen. Sie können sehen, dass auf der Unterseite hier können wir verlustbehaftete oder verlustreiche Kompressionstypen akzeptieren. Auch eine Kundeneinstellung, wo wir die Größe ändern und auch die Bildqualität einstellen können. Ein weiterer Optimierer und Kompressor ist IMG2go, dies ist unter img2go.com verfügbar. Dieses Tool ermöglicht es uns auch, den Bildtyp in ein anderes Format zu konvertieren. Funktioniert mit PNG, GIFs, JPEGs und auch Vektoren wie SVG. Genau wie die anderen können wir auch Drag & Drop und wir haben auch einige Optionen, um Dropbox oder Google Drive, eine dedizierte URL, zu verknüpfen . Es gibt auch viele Möglichkeiten, um die Qualität und auch die Bildgröße zu setzen. Dies sind nur einige der vielen Tools, die zum Download zur Verfügung stehen, und auch einige Online-Versionen. Wir sollten nie mit dem falschen Bildtyp für unser Projekt stecken bleiben. 11. Ein Content-Delivery-Netwerk verwenden: All diese Bildmanipulation und die Auswahl der richtigen Bilder für unser Projekt kann wirklich eine Menge zusätzlicher Arbeit sein, besonders wenn unsere Apps wachsen. diesem Grund werde ich Ihnen in diesem Video einen großartigen Service zeigen, der auch kostenlos ist , der wirklich dabei helfen kann. Wir können Dienste wie Cloudinary in Anspruch nehmen, die auf cloudinary.com verfügbar sind. Dies wird es uns ermöglichen, uns um eine Menge Arbeit für uns zu kümmern. Cloudinary wird verwendet, um unsere Bilder und auch Videos zu speichern und zu hosten, falls erforderlich. Einmal hochgeladen, erhalten wir eine URL, auf die wir innerhalb unseres HTML verlinken können. Dies beherbergt nicht nur unsere Bilder Fotos, sondern hat auch viele andere Vorteile. All diese Vorteile, es ist wirklich einfach, CDN zu verwenden. CDN ist ein Content-Delivery-Netzwerk und es ist eine Möglichkeit, unseren Inhalt zu haben, was in unserem Fall unsere Bilder auf der ganzen Welt in mehreren Servern oder Rechenzentren verfügbar sind . Diese mehrere Rechenzentren bedeuten, dass unsere Bilder näher am Benutzer gehostet werden, anstatt sie nur an einem zentralen Ort zu haben, alle auf der Welt. Dies kann die Lieferung unserer Bilder wirklich beschleunigen. Auch wenn es ein Problem mit dem Server gibt, kann er problemlos auf einen neuen umgestellt werden, um Ausfallzeiten zu vermeiden. Es liefert nicht nur das Image von einem lokalen Rechenzentrum aus, sondern kann auch eine optimierte Version bereitstellen. Wir müssen nur ein einzelnes Bild in Cloudinary hochladen und wir können es konvertieren und es in einem optimierten Dateiformat zurücksenden, einschließlich Dinge wie WebP und JPEG 2000, natürlich, wenn der Browser es unterstützt. Das gleiche für Größe und Qualität auch, können wir diese Bilder so einstellen, dass sie in bestimmte Größen umgewandelt werden oder es erlauben, Fotos zu wählen. Offensichtlich müssen wir zuerst ein Bild hochladen, das groß genug ist. Unser größter Anwendungsfall, da wir ein Bild nicht zu groß dehnen und jede Qualität verlieren wollen. Wenn Sie Cloudinary noch nicht verwendet haben, erstellen Sie ein neues Konto, das kostenlos ist und eine riesige kostenlose Bildnutzungszulage hat. Es gibt auch eine kostenpflichtige Version, aber das kostenlose Konto beinhaltet das Speichern von Tausenden von Bildern. Sie sollten keine Sorgen haben, es sei denn, Ihr Projekt wächst auf ein riesiges Niveau. Ich habe bereits ein Konto, da ich das recht regelmäßig benutze. Ich werde diesen neuen Tab öffnen. Dann nehmen Sie es in den Benutzer-Dashboard-Bereich für diese Lektion gehen Sie zu Nummer 7, die ein CDN verwendet. Ich habe das bereits geöffnet und auch in einem neuen Browser-Tab geöffnet. Dies ist nur eine leere HTML-Datei. Innerhalb des Bilderordners haben wir nur dieses einzelne Bild, das 5.311 Pixel mal drei fünf, vier fünf breit ist. Das bedeutet, dass dies ein ziemlich großes Bild ist, aber dieses Mal werden wir es nicht direkt mit diesem Bild verknüpfen. Stattdessen können wir dieses Bild auf Cloudinary hochladen und dann auf den Cloudinary Link in unserem Index. Gehen wir dazu in unseren Projektordner, in Nummer 7 und in den Image-Ordner und über zum Cloudinary-Dashboard, zu dem Sie weitergeleitet werden, wenn Sie eingeloggt sind. Alles, was wir tun müssen, ist auf die Mediathek zu klicken. Dann können wir ein neues Bild, das Sie hochladen möchten, per Drag & Drop ablegen. Lassen Sie das hier rein und geben Sie es ein paar Sekunden zum Hochladen. Da gehen wir. Da ist unser neues Bild. Wenn wir den Mauszeiger darüber bewegen, können wir eine URL sehen, die wir mit diesem Link nur hier kopieren können. Wenn wir auf dieses Bild doppelklicken, werden wir ins Detail genommen, wo wir Dinge wie Tags hinzufügen können. Wir können einige Metadaten hinzufügen. Wir können jede Revisionsgeschichte sehen. Wir können die Dateidaten wie den Dateityp, die Größe und auch die Dimensionen sehen. Dann unten unten haben wir, was man Transformationen nennt. Derzeit sind wir auf dem Original und dies ist die URL zu diesem bestimmten Bild. Cloudinary hat automatisch einige Transformationen hinzugefügt, um unser Bild zu verbessern, um die Größe zu ändern, um in eine Miniaturansicht zu verwandeln. Wir können ein Banner haben, wir können eine wassermarkierte Version haben. Jedes Mal, wenn ich auf eines dieser Bilder klicke, haben wir eine neue URL, die wir innerhalb unserer Projekte verwenden können. Zusammen mit diesen Standardeinstellungen können wir auch eigene Transformationen erstellen, indem wir auf diesen Transformations-Button klicken. Von hier aus können wir unsere Bilder zuschneiden und die Größe ändern. Wir können das Bildformat ändern, wir haben eine Option für alle diese verschiedenen Erweiterungen. Wir können die Qualität mit diesem Drop-Down und diesem Schieberegler anpassen. Wir können Eckradien hinzufügen, wir können drehen, wir können viele verschiedene Effekte hinzufügen. Jedes Mal, wenn wir eine Änderung an diesem Bild vornehmen, erhalten wir dann eine neue URL, die wir kopieren und in unserem Projekt verwenden können. Jedes Mal, wenn wir unsere Bilder ändern, lassen Sie mich einfach schließen und zurück ins Original gehen. Jedes Mal, wenn wir eine Änderung an einem unserer Bilder vornehmen, wie zum Beispiel das Klicken auf eines dieser Presets oder sogar unsere eigenen Transformationen, erhalten wir dann eine neue URL, die einige verschiedene Parameter hat. Hier können wir sehen, dass diese orangefarbenen Parameter durch Komma hinzugefügt und getrennt werden. Wenn wir auf den Kreis klicken. Wir können hier verschiedene sehen und diese beeinflussen Dinge wie die Größe, den Radius, die Grenze, die Farbe. Dies ist unsere Art, Cloudinary zu sagen, welches Bild wir holen wollen. Diese Bild-ID ist am Ende immer die gleiche, aber wir werden nur diese verschiedenen Parameter innerhalb der URL hinzufügen. Gehen wir zu unserem Projekt und wir können das ausprobieren. Zunächst einmal, wenn wir auf das Original klicken und dann können wir diese URL auswählen. Wir kopieren einfach das, was hier drin ist, in unsere Projekte. Was wir zuerst tun werden, ist das Bild auf 100 Prozent der Browserbreite mit den Style-Tags zu setzen. Die Bildelemente, maximale Breite von 100 Prozent. Dann unten in den Körperbereich können wir auch ein Bild mit dieser URL erstellen. Deregulieren gemacht, was der Link war, den wir gerade kopiert haben. Alles, was wir tun müssen, ist, die Quellattribute einzufügen, die Seitenleiste zu schließen, dies zu speichern, den Browser zu aktualisieren. Wir können sehen, da dies ein ziemlich großes Bild ist, hat es einige Zeit gebraucht, um herunterzuladen. Dieses Bild ist viel zu groß für die aktuelle Browsergröße, aber wir werden uns ansehen, wie Sie dies in einem Moment anpassen können. Als nächstes können wir die Drehung oder den Winkel dieses Bildes anpassen. Wir tun dies direkt nach diesem Upload-Abschnitt. Wenn wir sagen, Schrägstrich, sagen Alpha-Winkel Unterstrich und dann 90 für eine 90 Grad. All dies kommt vor der Bild-ID, die ganz am Ende steht und auch dem Bildnamen. Speichern Sie das. Reload und jetzt sollten wir in eine 90-Grad-Version unseres bestehenden Bildes ziehen. Natürlich ist dies viel zu groß, lässt den Winkel entfernen und wir können eine feste Größe in Pixel setzen mit w dann Unterstrich gefolgt von den Pixelwerten wie 200. Aktualisieren. Jetzt zieht dies ein Bild, das wirklich klein ist und wir können sehen, dass die Downloadzeit viel schneller ist, aber wie wir in früheren Videos gelernt haben, ist eine Pixelgröße nicht immer die beste Wahl. Was wir tun werden, ist, die Breite auf gleich zu setzen, auch, was Cloudinary erlauben wird, die beste Größe Bild für den Browser zu wählen. Hier sehen wir es wählte eine 3,4 Megabyte-Version. Wenn wir zum Original gehen. Das Original ist etwa 4.2, daher wählte es eine kleinere Größe, die für diesen Browser geeignet ist. Wir können auch das Standardformat dieses Bildes ändern, indem Sie f dann Unterstrich verwenden, und wählen Sie dann eines der erlaubten Format von Cloudinary. Ich werde für WebP gehen und auch dafür können wir the.jpeg Erweiterung des Browsers entfernen und aktualisieren. Wir sehen nun, dass der Bildtyp WebP ist. Genau wie bei der Größe, können wir auch zulassen, dass Cloudinary automatisch das richtige Format Fotos eingestellt. Wir könnten dies mit f auto tun, und wenn wir dies tun, wir sehen, dass Cloudinary wählt auch ein WebP-Format Fotos, da dies innerhalb des Chrome-Browsers unterstützt wird. Es gibt auch viele andere Optionen, die wir hier hinzufügen können. Wir können sie auch kombinieren, oder wir könnten diese URLs auch selbst innerhalb von Cloudinary mithilfe dieser Transformationen generieren . Dies ist nur ein Überblick über eine grundlegende Nutzung mit Cloudinary. Aber es hat viele weitere Funktionen wie das Hinzufügen von Voreinstellungen, die automatisch konfigurieren oder transformieren unsere Bilder jedes Mal, wenn wir neue hochladen. Es gibt eine Entwickler-API, um Ihre Projekte zu verbinden. Dies ermöglicht es Ihnen, automatisch Dinge wie das Hinzufügen von News-Uploads zu tun. Sie können Video einschließen. Ich würde empfehlen, einige dieser Funktionen zu durchschauen. Auch die Dokumentation, wenn Sie Cloudinary für ein Projekt verwenden möchten. Ich verwende Cloudinary auch für meine eigenen Projekte und finde es sehr zuverlässig. Auch wenn dieses Beispiel nur die grundlegenden Bildelemente verwendet, können wir diese gehosteten Bilder auch mit [unhörbar] und auch mit dem Pitcher-Element kombinieren . Im kommenden Video werden wir eine andere Möglichkeit finden, unsere Ladezeit zu reduzieren, indem wir das Lazy Loading einrichten. 12. Lazy Loading: Wir haben eine Webseite, die Bilder hat. Manchmal, wenn die Seite zum ersten Mal geladen wird, sind nicht alle diese Bilder sichtbar. Wenn wir zum Beispiel einige Bilder direkt unten auf unserer Seite haben, sollten wir nicht wirklich erwarten, dass der Benutzer darauf wartet, dass diese Bilder heruntergeladen werden, bevor die Seite anfänglich geladen wird. Um dabei zu helfen, wird die letzte Technik, die ich Ihnen zeigen möchte, Lazy Loading genannt. Dies ist eine Möglichkeit, das Laden von Bildern zu verzögern oder zu verschieben, was nicht kritisch ist. Es gibt oft Bilder, die der Benutzer anfangs nicht sieht und nach unten scrollen muss, um in die Ansicht zu gelangen. Ein Beispiel dafür ist so etwas wie Pinterest. Eine Seite kann Tausende von Bildern haben und Laden all dieser Bilder auf einmal würde viel Zeit in Anspruch nehmen. Es ist also sinnvoll, nur das zu laden, was der Benutzer anfänglich sehen kann, und dann mehr Bilder zu laden, wenn der Benutzer scrollt. Wir können sogar einfache oder leichte Platzhalterinhalte hinzufügen während diese Bilder heruntergeladen werden. Lazy Loading ist nicht nur für Bilder auch. Es existiert auch in anderen Teilen der Webentwicklung. Wir können faul laden so ziemlich jede Art von Inhalt, abhängig davon, welche Sprachen , Bibliotheken oder Frameworks wir verwenden. Wir können faul laden Newsfeeds, Artikel, Social-Media-Feeds und in der Regel jede andere Art von Inhalten, die Sie wollen. Es gibt mehrere Möglichkeiten, dies zu tun, einschließlich der Verwendung von JavaScript. Aber hier werde ich Ihnen eine wirklich einfache Möglichkeit zeigen, faul Laden nativ durch diese Interaktion hinzuzufügen, zu Nummer acht zu gehen und die Indexseite zu öffnen. Fügen Sie dies dann in eine neue Registerkarte im Browser ein. Wir können sehen, dass wir einige Hundebilder gerade hier hochgeladen und wir haben keine Bilder in diesem Projektordner gespeichert. Stattdessen werden diese alle in externe Bilder verlinkt. Wir haben 10 verschiedene Bilder hier. Wie erwartet, werden alle 10 dieser Bilder gleichzeitig geladen, obwohl viele von ihnen nicht im Blick sind, wenn wir die Seite zum ersten Mal laden, habe ich eine ziemlich gute Verbindungsgeschwindigkeit, aber viele Benutzer nicht. Benutzer könnten auch auf einem langsameren mobilen Gerät sein, und wenn es viele Bilder wie diese gibt, kann es wirklich verlangsamen die Dinge. Um das Laden unserer Bilder zu verzögern, die sich außerhalb des Ansichtsfensters oder des sichtbaren Bereichs befinden, können wir es unserem Bildelement hinzufügen, ein Ladeattribut, und es dann auf faul setzen. Derzeit können wir etwa drei Bilder in der Ansicht sehen. So können wir die ersten drei Bilder sofort laden lassen. Wenn wir nun zu Bild Nummer vier gehen, können wir die Ladeattribute hinzufügen und dies gleich faul setzen. Kopieren Sie dies und wir können dies in alle anderen Bilder direkt unten einfügen. Stellen Sie sicher, dass dies in Bild Nummer vier bis 10 ist. Lassen Sie uns zum Browser gehen und sehen, was passiert. Wenn wir aktualisieren, können wir immer noch unsere ersten drei Bilder sehen, aber alle Bilder werden immer noch zur gleichen Zeit heruntergeladen. Es gibt keine Änderung, denn bis diese Bilder im Browser geladen sind, wird der Browser die Höhe und die Breite jedes Bildes nicht kennen. Wenn es also nicht die Höhe und Breite hat, kann es nicht sagen, welche Bilder im Blick sein werden und welche unter der Falte liegen werden. Die Falte ist der untere Teil des Browsers. Bevor wir nach unten scrollen müssen. Um dies zu beheben, können wir einige einfache CSS im Kopfbereich hinzufügen, in den Stilbereich platzieren. Für die Bilder werden wir nur eine Standardbreite für all diese 600 Pixel und auch die Höhe von 400 Pixeln einrichten . Wenn Sie möchten, können Sie auch die Breite und die Höhe jedes einzelnen Bildes hinzufügen . Aber ich werde das einfach für dieses Beispiel halten. Probieren wir das aus. Bis zum Anfang der Seite und aktualisieren. Jetzt sehen wir nur sechs Bilder, die in den Entwicklerwerkzeugen geladen werden, anstatt die 10, die wir ursprünglich hatten. Dies ist eine Speicherung von vier Bildern, aber warum werden wir sechs Bilder heruntergeladen, wenn wir nur etwa drei im Ansichtsfenster sehen können? Nun, das liegt daran, dass ich Google Chrome verwende und Chrome hat beschlossen, einige zusätzliche Bilder zu laden, die ich erwarte, dass wir ziemlich bald brauchen werden. Wir können sehen, wie dies in verschiedenen Browsern reagiert, indem Sie diesen Link kopieren, ich werde Firefox öffnen. Fügen Sie das hier ein. Wir sehen zunächst die gleiche Anzahl von Bildern. Öffnen Sie die Entwickler-Tools, wir sind mit der rechten Maustaste und inspizieren Element. Wir sehen unsere ersten drei Bilder gerade hier. Wenn wir ins Netzwerk gehen und aktualisieren, Firefox wird nur die ersten vier Bilder auswählen, so dass es nicht im Voraus so viele Bilder wie Chrome vorgeladen. Nun, wenn wir Firefox schließen, und gehen wir zurück zu Chrome. Wenn wir anfangen, nach unten zu scrollen, und wir können jetzt sehen, wie wir die Seite nach unten scrollen, dass zusätzliche Bilder geladen werden, wie wir näher an sie brauchen. Wie ich bereits erwähnt habe, liegt dies daran, dass Chrome sie früher vorholen wird , damit sie für den Benutzer bereit sind. Wie früh hängt von der Verbindungsgeschwindigkeit und auch von der Art des Bildes ab. Das ist, was wir mit Firefox gesehen haben, es variiert auch durch den Browser und alle diese zusätzlichen vier Bilder wurden jetzt von der ersten Seite Ladezeit gespeichert, was zu einer besseren Erfahrung. Wenn es ein Bild gibt, das Sie sofort laden möchten, unabhängig davon, ob es sich unter der Seitenfalte befindet oder nicht, können wir das Laden so einstellen, dass es begierig ist. Wenn wir zum allerletzten Bild gehen und dies auf eifrig einstellen, bis ganz oben auf der Seite und aktualisieren. Wir sehen, dass wir jetzt anstelle der ersten sechs Bilder das siebte Bild geladen bekommen, obwohl es nicht im Blick ist. Wie Sie sich vorstellen können, können diese faulen Attribute Dinge nur noch weiter helfen , da wir mehr Bilder auf unseren Seiten haben und vor allem, wenn der Benutzer nach unten scrollen muss, um mehr Inhalte zu enthüllen. Wir haben gerade gesehen, dass dieses Ladeattribut in meiner Version von Chrome und Firefox perfekt funktioniert hat . Aber die Unterstützung hat immer noch ein wenig Nachholbedarf in einigen der Browser zu tun. Lassen Sie uns eine Suche auf caniuse.com nach den Ladeattributen machen. Dies ist eine, die Sie sehen müssen, was das faule Ladeattribut für Bilder und Iframes ist. Also ist es, Edge zu finden. Mit Firefox haben wir nur teilweise Unterstützung und das liegt nur daran, dass es nur Bilder und nicht Iframes unterstützt. Es ist Chrome oder Safari zu finden. Dies ist nicht etwas, das standardmäßig aktiviert ist, aber wir können dies in den Browsereinstellungen aktivieren. Außerdem kann dieses Ladeattribut auch mit dem Pitcher-Element verwendet werden, und wir müssen es nur den Fallback-Bildelementen hinzufügen anstatt allen Quellen, damit es wirksam wird. Wenn wir also zurück in unseren Projektordner gehen und in eine dieser Indexseiten gehen, müssen wir nur die Ladeattribute zu diesem Bildelement anstatt jeder dieser Quellen hinzufügen . In diesem Sinne haben wir jetzt ein Beispiel gerade hier, wo wir nach unten scrollen und die Bilder werden faul laden. Aber was passiert, wenn wir schneller nach unten scrollen, als die Bilder heruntergeladen werden können? Es ist kein Problem für dieses kleine Beispiel, bei dem wir Tausende von Bildern und eine wirklich langsame Verbindungsgeschwindigkeit hatten, können wir schneller nach unten scrollen, als die Bilder heruntergeladen werden können. Für dieses Problem gibt es verschiedene Ansätze, die wir annehmen können. Wir könnten auch Platzhalterbilder mit niedrigerer Qualität bereitstellen, die schneller heruntergeladen werden und wir können dies mit dem Bildelement einrichten. Wir könnten auch ein einzelnes generisches Platzhalterbild haben, das wir an Ort und Stelle verwenden, bis das Bild heruntergeladen wird. Oder sogar Dinge wie eine feste Hintergrundfarbe mit etwas CSS. Aber ist auch JavaScript-Bibliotheken, um damit zu helfen und auch Plug-ins, wenn Sie WordPress oder ein anderes Content-Management-System verwenden. Einer der beliebtesten ist faul Größen genannt und dies ermöglicht es uns, Verwendung von JavaScript zu machen, um schnelles und leistungsfaul Laden anzuwenden. Es nutzt auch die Bildelemente und den Quellsatz, um reaktionsschnelle Bilder zu erstellen. Es ist SEO-freundlich und lädt bei Bedarf auch intelligent Bilder, basierend auf dem Browser, der Scroll-Position und auch der Netzwerkverbindung. So kann es wirklich eine Menge der harten Arbeit für uns bewältigen. Darüber hinaus ermöglicht es uns auch, minderwertige oder verschwommene Bilder als Platzhalter zu verwenden. Ich werde nicht in das Setup und die Installation gehen, aber es ist ziemlich einfach zu beginnen. Wir scrollen nach unten zum Abschnitt „Anleitung“. Alles, was wir tun müssen, ist, das Skript herunterzuladen und es innerhalb unseres HTML zu verknüpfen. Oder wir könnten dies auch über NPM installieren, wenn Sie es in einem Knotenprojekt verwenden. Es ist keine Konfiguration erforderlich. Alles, was wir tun müssen, ist, unsere Bilder einzurichten, wie die Beispiele, die Sie hier sehen, wenn Sie reaktionsfähige oder nicht reagierende Optionen verwenden. Wir können dies auch mit einem iframe verwenden, wenn nötig. Ich hoffe, diese Klasse hat Ihnen etwas zum Nachdenken gegeben und auch einige nützliche Techniken, die Sie in Ihren zukünftigen oder bestehenden Projekten verwenden können. Als nächstes werden wir über eine kleine Herausforderung sprechen, die wir einrichten müssen damit wir all diese neuen Fähigkeiten testen können. 13. Kursprojekt: Als wir lernten, ist der beste Weg, die Dinge in die Praxis umzusetzen. Wenn Sie bereits ein Projekt haben, auf das Sie diese Techniken anwenden können, dann ist das großartig oder Sie haben vielleicht ein bevorstehendes Projekt, in dem Sie Dinge ausprobieren können. Ich habe auch eine grundlegende Bildgalerie-Vorlage mit diesem Kurs zur Verfügung gestellt. Dies ist innerhalb der Ordnernummer 9, und im Inneren haben wir diese Indexseite und auch ein einzelnes Bild. Dies ist nur ein einzelnes Bild, um Sie zu bekommen, und Sie müssen einige weitere Bilder herunterladen, um für dieses Projekt zu verwenden. Etwas wie unsplash.com ist ideal. Dies ist nur eine ziemlich grundlegende Indexseite. Alles, was wir innerhalb des Körperabschnitts haben, ist ein einzelner Abschnitt und dann mehrere Bildelemente, und wir werden dies direkt oben in einem Stilbereich einrichten wird als Raster angezeigt werden. Wenn wir dies innerhalb des Browsers öffnen, können wir unser Raster nur hier sehen. Was ich möchte, dass Sie für diese Herausforderung tun, ist, einige neue Bilder herunterzuladen , die Sie für diese Galerie verwenden können. Sie können dann alle Techniken, die Sie gelernt haben, optimieren und ausprobieren , um sie effizient im Browser zu laden. Es gibt keinen richtigen oder falschen Weg, dies zu tun. Die Idee ist nur, Dinge auszuprobieren, Bilder zu optimieren, die Dateigrößen verwenden und generell das Laden der Bilder effizienter zu gestalten. Sie können es in Batches tun, Sie können die Änderungen anwenden, Ihre Ergebnisse aufzeichnen und dann wiederholen, bis Sie mit den Ergebnissen zufrieden sind. Viel Glück mit diesem Projekt. Ich kann es kaum erwarten zu sehen, was du erschaffst. 14. Folge mir auf Skillshare!: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für Updates, und auch über alle neuen Klassen informiert werden, sobald sie verfügbar sind. Also nochmals vielen Dank. Viel Glück und hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.