Dieser Kurs richtet sich sowohl an Einsteiger als auch fortgeschrittene Webentwickler. Er behandelt alles von den Grundlagen, um sicherzustellen, dass Bildquellen effizient angefordert und gerendert werden, bis hin zu Details zur Kommunikation gängiger Bildformate von Server zu Client. In diesem Kurs erfahren Sie, wie Sie die Übertragungsgröße für Ihre Bilder so gering wie möglich halten, ohne dabei Abstriche bei der Qualität machen zu müssen – zumindest für jeden nicht.
Sie können die Reihe von Anfang bis Ende durchgehen, um zu verstehen, wie Bilder im modernen Web funktionieren, oder sie als Referenz für die spezifischen Konzepte und Markup-Muster verwenden, die Sie in Ihrer täglichen Arbeit verwenden werden.
Wenn Sie noch nicht mit der Webentwicklung vertraut sind, werfen Sie einen Blick in die Kurse HTML lernen, um sich mit den Grundlagen der Verwendung von Markup vertraut zu machen, in den Kursen „CSS lernen“ zu den Grundlagen der Gestaltung und zum Lernen responsives Design, wie Bilder in responsiven Layouts gerendert werden.
Die folgenden Themen werden behandelt:
Ein kurzer Überblick über die Geschichte der Bilder im Web
Eine Geschichte der Bilder im Web, angefangen mit dem Bildelement im Jahr 1993
Wichtige Leistungsprobleme
Hier erfahren Sie, wie Sie dafür sorgen, dass Ihre Bildanfragen so klein und leistungsfähig wie möglich sind.
Vektorbilder
Hier erfahren Sie mehr über SVG, das im Web verwendete Vektorbildformat.
Rasterbilder
Rasterbilder wie JPEG, GIF, PNG und WebP
Bildformate: GIF
Informieren Sie sich über das GIF-Bildformat und darüber, wie die Bildcodierung funktioniert.
Bildformate: PNG
Finden Sie heraus, wann PNG das beste Bildformat für Sie ist.
Bildformate: JPEG
Erfahren Sie mehr über das gängigste Bildformat im Web.
Bildformate: WebP
Hier erfahren Sie mehr über WebP und den Unterschied zwischen diesem und anderen Formaten.
Bildformate: AVIF
Das AV1 Image File Format (AVIF) ist eine Codierung, die auf dem Open-Source-AV1-Video-Codec basiert.
Responsive Bilder
Responsive Bilder im Detail
Beschreibende Syntaxen
„srcset“ und „sizes“ verwenden, um dem Browser Informationen über Bildquellen und deren Verwendung zu geben.
Präskriptive Syntaxen
Ermitteln Sie das Bildelement.
Komprimierung und Codierung automatisieren
Integrieren Sie leistungsstarke Bildquellen nahtlos in Ihren Entwicklungsprozess.
Website-Generatoren, Frameworks und CMS
Hier erfährst du, wie CMS wie WordPress und andere Website-Generatoren die Verwendung responsiver Bilder vereinfachen können.
Netzwerke für die Bereitstellung von Bildinhalten
Hier erfahren Sie, wie Bild-CDNs den Inhalt eines Bildes umwandeln und optimieren können.
Schlusswort
Zusätzliche Ressourcen
Bist du bereit, Google Bilder zu lernen?