Machen Sie das Generieren leistungsstarker Bildquellen zu einem nahtlosen Teil Ihres und Entwicklungsprozessen.
Alle Syntaxen in diesem Kurs – von der Codierung von Bilddaten bis zur
Markup für responsive Bilder sind Methoden, mit denen Maschinen mit Maschinen kommunizieren können. Du hast
hat eine Reihe von Möglichkeiten entdeckt, wie ein Client-Browser seine Anforderungen an einen Server und einen Server für die entsprechende Antwort übermitteln kann.
Responsives Bild-Markup (vor allem srcset und sizes) schafft eine schockierende Menge an Informationen auf relativ
nur wenige Zeichen. Besser oder schlimmer: Diese Kürze ist designt, um diese Syntaxen weniger formuliert zu machen und so für Entwickler zu vereinfachen.
zu parsen, hätten sie für einen Browser schwieriger machen können. Je komplexer ein String, desto höher
kann es zu Parserfehlern oder unbeabsichtigten Verhaltensunterschieden von einem Browser zum anderen kommen.
Die gleiche Eigenschaft, die diese Themen so einschüchternd anfühlt, kann Ihnen jedoch auch Lösungen bieten: Eine Syntax, die einfach Lesezugriff von Maschinen ist eine Syntax, die von ihnen einfacher geschrieben werden kann. Sie haben mit ziemlicher Sicherheit viele Beispiele für automatisierte Bildcodierung und -komprimierung als Nutzer des Webs: jedes Bild, das über Social-Media-Plattformen ins Web hochgeladen wird, Inhalte Managementsysteme (CMS) und sogar E-Mail-Clients passieren fast ausnahmslos ein System, bei dem Größe angepasst, und komprimiert sie.
Gleichermaßen, sei es durch Plug-ins, externe Bibliotheken, eigenständige Build-Prozess-Tools oder verantwortungsvolle Nutzung von clientseitigem Scripting, Markups für responsive Bilder eignet sich gut für die Automatisierung.
Dies sind die beiden Hauptanliegen bei der Automatisierung der Image-Leistung: die Verwaltung der Bilderstellung – ihrer Codierung,
Komprimierung und die alternativen Quellen, die du zum Ausfüllen eines srcset-Attributs verwendest, und um unser nutzerseitiges Markup zu generieren.
In diesem Modul lernen Sie einige gängige Ansätze kennen, mit denen Sie Bilder in einem modernen Workflow verwalten können, z. B.
automatisierten Phase in Ihrem Entwicklungsprozess über das Framework oder Content-Management-System, das Ihre Website antreibt, oder
von einem dedizierten Content Delivery Network nahezu vollständig abstrahiert.
Komprimierung und Codierung automatisieren
Es ist unwahrscheinlich, dass du dir die Zeit nehmen kannst, manuell die ideale Codierung und den idealen Level zu ermitteln. für jedes einzelne Bild, das in einem Projekt verwendet werden soll, auf ein einzelnes Bild. Als wichtig, da es darum geht, die Bildübertragungsgrößen so klein wie möglich zu halten, Komprimierungseinstellungen und das erneute Speichern alternativer Quellen für jedes Bild-Asset für eine Produktionswebsite würden ein großer Engpass in Ihrer täglichen Arbeit.
Wie Sie bei den verschiedenen Bildformaten und Komprimierungsarten gelernt haben, wird die effizienteste Codierung für ein Bild immer durch und wie Sie unter Responsive Bilder gelernt haben, sind die alternativen Größen, die Sie für Ihre Bildquellen benötigen, da sie durch die Position bestimmt wird, die diese Bilder im Seitenlayout einnehmen. In einem modernen Workflow werden Sie diese Entscheidungen ganzheitlich und nicht einzeln: Es wird eine Reihe sinnvoller Standardeinstellungen für Bilder festgelegt, die am besten zu den Kontexten passen, in denen dass sie verwendet werden.
Bei der Auswahl der Codierungen für ein Verzeichnis von Fotos liefert AVIF die beste Wahl hinsichtlich Qualität und Übertragungsgröße aber nur eingeschränkt unterstützt wird, bietet WebP ein optimiertes, modernes Fallback. JPEG ist die zuverlässigste Standardeinstellung. Die Alternative die wir für Bilder erstellen müssen, die eine Seitenleiste in einem Seitenlayout einnehmen sollen. den gesamten Browser-Darstellungsbereich an den höchsten Haltepunkten einnimmt. Bei der Komprimierung sollte die Unkenntlichmachung überprüft werden und Komprimierungsartefakte in mehreren resultierenden Dateien. So bleibt weniger Platz, um jedes mögliche Byte aus jedem Bild zu extrahieren. im Austausch für einen flexibleren und zuverlässigeren Workflow. Insgesamt folgen Sie dem gleichen Entscheidungsprozess, den Sie die Sie in diesem Kurs verstehen, groß schreiben.
Was die Verarbeitung angeht, gibt es eine große Anzahl von Open-Source-Bildverarbeitungsbibliotheken, die Methoden zur Bilder in Batches konvertieren, ändern und bearbeiten, wobei Geschwindigkeit, Effizienz und Zuverlässigkeit im Wettbewerb stehen. Diese verarbeiten können Sie Codierungs- und Komprimierungseinstellungen auf ganze Bilderverzeichnisse gleichzeitig anwenden, ohne eine Bildbearbeitungssoftware öffnen und dabei die ursprünglichen Bildquellen beibehalten, falls diese Einstellungen kann spontan angepasst werden. Sie sind für die Ausführung in einer Vielzahl von Kontexten vorgesehen – von Ihrer lokalen Entwicklungsumgebung bis hin zur Webserver selbst, z. B. das auf Komprimierung ausgelegte ImageMin für Node.js kann durch eine Reihe von Plug-ins für bestimmte Anwendungen erweitert werden. während die plattformübergreifenden ImageMagick- und die auf Node.js basierenden Sharp die eine erstaunliche Anzahl von Funktionen bietet.
Mit diesen Bildverarbeitungsbibliotheken können Entwickler Tools für die nahtlose Optimierung von Bildern erstellen. im Rahmen Ihrer Standardentwicklungsprozesse an. So stellen Sie sicher, dass Ihr Projekt immer auf ein produktionsfertiges Image verweist. Quellen mit so wenig Aufwand wie möglich.
Lokale Entwicklungstools und Workflows
Task-Runner und Bundler wie Grunt, Gulp oder Webpack können verwendet werden, um Bild-Assets sowie andere gängige leistungsbezogene Aufgaben wie die Reduzierung von CSS und JavaScript optimieren. Bis Nehmen wir einen relativ einfachen Anwendungsfall: Ein Verzeichnis in Ihrem Projekt enthält ein Dutzend Fotos, die auf einer öffentlichen Website verwendet werden sollen.
Zunächst müssen Sie für eine einheitliche, effiziente Codierung dieser Bilder sorgen. Wie Sie in den vorherigen Modulen gelernt haben,
WebP ist in Bezug auf Qualität und Dateigröße ein effizienter Standard für fotografische Bilder. WebP wird gut unterstützt,
aber nicht allgemein unterstützt. Sie sollten daher auch ein Fallback in Form einer progressiven JPEG-Datei einbinden. Gehen Sie dann so vor:
Um das Attribut srcset für eine effiziente Bereitstellung dieser Assets nutzen zu können, musst du mehrere
alternative Größen für jede Codierung.
Mit Bildbearbeitungsprogrammen wäre dies eine wiederholte und zeitraubende Arbeit.
Gulp wurde entwickelt, um genau diese Art von Wiederholung zu automatisieren. Der gulp-responsive
Plug-in, das Sharp nutzt, ist eine von vielen Optionen, die alle einem ähnlichen Muster folgen:
alle Dateien in einem Quellverzeichnis sammeln, sie neu codieren und basierend auf derselben standardisierten "Qualität" komprimieren
Kurzbeschreibung, die Sie unter Bildformate und Komprimierung kennengelernt haben. Die resultierenden Dateien werden dann in einen von Ihnen definierten Pfad ausgegeben.
kann in den src-Attributen Ihrer für Nutzer sichtbaren img-Elemente referenziert werden, während die Originaldateien intakt bleiben.
const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');
exports.webp = function() {
return src('./src-img/*')
.pipe(respimg({
'*': [{
quality: 70,
format: ['webp', 'jpeg'],
progressive: true
}]
}))
.pipe(dest('./img/'));
}
Mit einem solchen Prozess würde einer Produktionsumgebung kein Schaden zufügen, wenn jemand aus Versehen am Projekt beteiligt ist. dem Verzeichnis, das Ihre ursprünglichen Bildquellen enthält, ein Foto in einer massiven Farb-PNG-Datei hinzugefügt, unabhängig von die Codierung des Originalbilds vorgenommen hat, wird ein effizientes WebP und ein zuverlässiges progressives JPEG-Fallback erzeugt. Kompressionsniveau, das sich im laufenden Betrieb ganz einfach anpassen lässt. Natürlich stellt dieser Prozess auch sicher, dass Ihr Originalbild Dateien werden in der Entwicklungsumgebung des Projekts beibehalten, was bedeutet, dass diese Einstellungen jederzeit angepasst werden können. Dabei wird nur die automatisierte Ausgabe überschrieben.
Um mehrere Dateien auszugeben, übergeben Sie mehrere Konfigurationsobjekte.
einen width-Schlüssel und einen Wert in Pixeln:
const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');
exports.default = function() {
return src('./src-img/*')
.pipe(respimg({
'*': [{
width: 1000,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-1000' }
},
{
width: 800,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-800' }
},
{
width: 400,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-400' },
}]
})
)
.pipe(dest('./img/'));
}
Im obigen Beispiel war das Originalbild (monarch.png) größer als 3, 3 MB. Die größte Datei, die von diese Aufgabe (monarch-1000.jpeg) etwa 150 KB groß ist. Die kleinste Datei, monarch-400.web, ist nur 32 KB groß.
[10:30:54] Starting 'default'...
[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
[10:30:54] Finished 'default' after 374 ms
Natürlich sollten Sie die Ergebnisse sorgfältig auf sichtbare Komprimierungsartefakte untersuchen oder möglicherweise die Komprimierung erhöhen. um zusätzliche Einsparungen zu erzielen. Da diese Aufgabe nicht destruktiv ist, können diese Einstellungen leicht geändert werden.
Im Gegenzug erhalten Sie einen Prozess, Dieses Tool ist nicht nur effizient, sondern auch ausfallsicher – ein Tool, mit dem Sie Ihr Wissen über leistungsstarke Bild-Assets nahtlos umsetzen können. auf das gesamte Projekt angewendet werden.
Markup für responsive Bilder in der Praxis
Das Ausfüllen von srcset-Attributen ist normalerweise ein einfacher manueller Vorgang, da das Attribut
Informationen zur Konfiguration, die Sie beim Generieren Ihrer Quellen bereits vorgenommen haben. In den obigen Aufgaben haben wir
Dateinamen und Breitenangaben für das Attribut:
srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"
Denken Sie daran, dass der Inhalt des Attributs srcset beschreibend und nicht präskriptiv ist. Eine Überlastung schadet nicht,
srcset, solange das Seitenverhältnis jeder Quelle gleich ist. Ein srcset-Attribut kann den URI enthalten.
und Breite jedes alternativen Schnitts, der vom Server generiert wird, ohne unnötige Anforderungen zu verursachen, und umso mehr
Quellen, die wir für ein gerendertes Bild bereitstellen, desto effizienter kann der Browser Anfragen anpassen.
Wie Sie bereits in Responsive Bilder gelernt haben, sollten Sie das Element <picture> verwenden, um den WebP nahtlos zu verarbeiten.
oder JPEG-Fallback-Muster. In diesem Fall verwenden Sie das Attribut type zusammen mit srcset.
<picture>
<source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
<img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>
Wie Sie wissen, erkennen Browser, die WebP unterstützen, den Inhalt des Attributs „type“ und wählen dieses <source> aus.
srcset-Attribut des Elements als Liste der möglichen Bilder an. Browser, die image/webp nicht als gültiges Medium erkennen
type ignoriert dieses <source> und verwendet stattdessen das srcset-Attribut des inneren <img>-Elements.
Es gibt eine weitere Überlegung bezüglich der Browserunterstützung: Browser ohne Unterstützung von Markup für responsive Bilder werden
noch ein Fallback erforderlich ist. Andernfalls besteht die Gefahr, dass in besonders alten Browserkontexten ein kaputtes Bild angezeigt wird. Grund: <picture>,
<source> und srcset in diesen Browsern ignoriert werden, sollten wir im inneren <img> eine Standardquelle angeben.
src-Attribut.
Da das Herunterskalieren eines Bildes visuell nahtlos ist und die JPEG-Codierung allgemein unterstützt wird, ist die größte JPEG-Datei eine vernünftige Entscheidung.
<picture>
<source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
<img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>
sizes kann etwas schwieriger zu handhaben sein. Wie Sie gelernt haben, handelt es sich bei sizes um Kontext, d. h. Sie
kann das Attribut nicht füllen, ohne zu wissen, wie viel Platz das Bild im gerenderten Layout einnehmen soll. Für
möglichst effiziente Anfragen gestellt werden, muss zum Zeitpunkt dieser Anfragen ein genaues sizes-Attribut in unserem Markup vorhanden sein.
von den Endnutzern erstellt werden, lange bevor die Stile, die das Seitenlayout bestimmen, angefordert wurden. sizes wird komplett weggelassen
stellt nicht nur einen Verstoß gegen die HTML-Spezifikation dar, sondern führt auch zu einem Standardverhalten, das sizes="100vw" entspricht.
Der Browser, dass dieses Bild nur durch den Darstellungsbereich selbst eingeschränkt wird, was zu den größtmöglichen möglichen Kandidatenquellen führt
ausgewählt werden.
Wie bei allen besonders aufwendigen Aufgaben in der Webentwicklung ist es auch hier der Fall, dass eine Reihe von Tools entwickelt wurden, die diese abstrahieren.
wie Sie sizes-Attribute handschriftlich schreiben. respImageLint ist ein absolutes
Dies ist ein wichtiges Code-Snippet, mit dem die Genauigkeit Ihrer sizes-Attribute auf ihre Genauigkeit überprüft und Verbesserungsvorschläge bereitgestellt werden können.
Es wird als Bookmarklet ausgeführt, einem Tool, das Sie in Ihrem Browser ausführen und auf die vollständig gerenderte Seite mit Ihrem Bild verweisen.
Elemente. In einem Kontext, in dem der Browser das gesamte Seitenlayout versteht, verfügt er auch über nahezu pixelgenaue
Wahrnehmung der Fläche, die ein Bild in diesem Layout bei jeder möglichen Größe des Darstellungsbereichs einnehmen soll.
Ein Tool zum Lint für sizes-Attribute ist sicherlich nützlich, aber es hat noch mehr Wert, um Großhandel zu generieren.
Wie Sie wissen, ist die Syntax srcset und sizes dazu gedacht, Anfragen nach Bild-Assets optisch nahtlos zu optimieren. Allerdings
in der Produktion eingesetzt werden sollte, ist der Standardwert für sizes-Platzhalter von 100vw durchaus sinnvoll.
während Sie in Ihrer lokalen Entwicklungsumgebung am
Layout einer Seite arbeiten. Sobald die Layoutstile vorhanden sind, wird respImageLint ausgeführt.
erhalten Sie maßgeschneiderte sizes-Attribute, die Sie kopieren und in Ihr Markup einfügen können, und zwar detaillierter und detaillierter.
als handschriftlich:
Obwohl Bildanfragen, die durch vom Server gerendertes Markup initiiert werden, zu schnell erfolgen, sodass JavaScript kein clientseitiges sizes-Attribut generieren kann,
Dies gilt nicht für Anfragen, die clientseitig initiiert werden. Das Projekt Lazysizes
Sie können z. B. Image-Anforderungen vollständig zurückstellen, bis das Layout erstellt ist, sodass JavaScript
sizes schätzen. Das ist ein großer Vorteil für Sie und eine Garantie für möglichst effiziente Anfragen für Ihre Nutzer.
Bei diesem Ansatz müssen allerdings die Zuverlässigkeit des vom Server gerenderten Markups und die Geschwindigkeit beeinträchtigt werden.
die in Browsern integriert sind und diese Anfragen erst nach dem Rendern der Seite initiieren,
negative Auswirkungen auf Ihren LCP-Wert haben.
Wenn Sie bereits auf ein clientseitiges Rendering-Framework wie React oder Vue angewiesen sind, entstehen diese Schulden natürlich bereits.
In diesen Fällen bedeutet die Verwendung von Lazysizes, dass die sizes-Attribute fast vollständig abstrahiert werden können.
Noch besser: Da sizes="auto" auf Lazy Loading für Bilder einen Konsens erzielt und
native Implementierungen implementieren, werden Lazysizes quasi zu einem Polyfill für dieses neu standardisierte Browserverhalten.