Arten von Bildern für Websites

Arten von Bildern für Websites.

In diesem Beitrag Wir werden die Arten von Bildern für Websites auflisten. Dies ist ein Problem, das beachtet werden muss, da es die Ladezeit der Seiten und den Speicherplatz auf dem Server beeinflusst. Es ist der Prolog zu einem anderen, in dem wir Linux-Tools zur Vorbereitung der Bilder erwähnen.

Ich habe Ihnen vor ein paar Tagen erzählt, dass ich auf Wunsch eines alten Freundes die Webentwicklung vorübergehend wieder aufgenommen habe (eine Tätigkeit, die ich aufgegeben habe, weil ich Kunden nicht ausstehen konnte) und dass ich Ihnen damit verschiedene Open-Source-Lösungen vorstellen möchte.

Arten von Bildern für Websites

Eine Website verfügt über zwei Arten von Grundinhalten: Text und Multimedia. Die Informationen zu diesem Inhalt werden im Bitformat über das Netzwerk übertragen und vom Browser rekonstruiert Trennen von Wörtern von Bildern, Videos oder Ton.

Im Falle von Bildern, Es werden unterschiedliche Formate verwendet, die Informationen über die Lage der Pixel, Farben, Abmessungen und Komprimierungsalgorithmus enthalten.

Die am häufigsten verwendeten Bildformate auf Websites sind:

  • APNG: Es wurde von Mozilla entwickelt, um dem PNG-Format Animationsmöglichkeiten zu verleihen. Ideal für Animationen, die nicht mit anderen Ressourcen wie Ton synchronisiert sind. Es funktioniert mit einer viel breiteren Farbpalette als GIF.
  • AVIF: Es sollte nicht mit dem AVI-Videoformat verwechselt werden. Sein Name ist ein Akronym für AV1 Image Format und kodiert AV1-Bitströme in den HEIF-Container (High Efficiency Image File Format). Es verfügt über eine bessere verlustbehaftete Komprimierung als JPG und PNG und eine bessere verlustfreie Komprimierung als WebP. Unterstützt Animationen und Transparenz. Als negativer Punkt ist anzumerken, dass das Bild vollständig heruntergeladen werden muss, um angezeigt zu werden, was allerdings durch die kürzere Downloadzeit kompensiert wird.
  • bmp: Ich erwähne das klassische Windows-Bildformat, nur um Ihnen zu sagen, dass Sie es niemals verwenden sollten. Obwohl es einige Möglichkeiten gibt, ihre Größe zu reduzieren, handelt es sich in der Regel um recht umfangreiche Bilder.
  • GIF: Es handelt sich um ein Format, das entwickelt wurde, um 8-Bit-Grafiken verlustfrei zu komprimieren. Es ist ideal für einfache Animationen und Bilder auf Websites, die für Orte mit langsamen Verbindungen bestimmt sind, da Sie damit das vollständige Bild anzeigen können, jedoch in geringerer Qualität, wenn der Download noch nicht abgeschlossen ist.
  • JPEG: Es handelt sich um ein verlustbehaftetes Komprimierungsformat, das häufig für Fotos verwendet wird, für Grafiken oder Diagramme wird es jedoch nicht empfohlen.
  • PNG: Es ist ebenfalls weit verbreitet und bietet verlustfreie Komprimierung, hervorragende Transparenzverarbeitung und eine breitere Farbpalette als GIF.
  • SVG: Anstelle von Pixeln definiert dieses Format die Bilder mit einer Reihe von Befehlen, die sie erstellen. Es ist ideal für Grafiken und Diagramme, die eine präzise Darstellung erfordern.
  • TIFF: Es ist kein weit verbreitetes Format, da es sehr umfangreiche Bilder erzeugt. Dies kann jedoch nützlich sein, wenn Sie gescannte Bilder auf der Website einbetten möchten. Sie können mehrere Bilder in einer einzigen Datei speichern.
  • WebP: Dieses Format für Standbilder und Animationen erzeugt kleinere Dateien mit oder ohne Komprimierung als JPEG und PNF. Es kann auch zum Erstellen von Animationen verwendet werden. Obwohl es von allen modernen Browsern unterstützt wird, sind ältere nicht kompatibel.

Welches Bild für jeden Fall verwendet werden soll

  • Fotografie: Ideal ist die Verwendung von JPEG oder WebP. Wenn die Größe kritisch ist, ist es besser, die zweite zu verwenden, wenn Sie die Kompatibilität mit älteren Browsern sicherstellen möchten, die erste.
  • Symbole: Das beste Kompatibilitäts- und Größenverhältnis bietet PNG. WebP kann auch verwendet werden (wobei zu berücksichtigen ist, dass es nur von modernen Browsern unterstützt wird) ODER SVG, wenn wir ein Vektorbild verwenden möchten, das wir an anderer Stelle auf der Website vergrößert anzeigen möchten.
  • Screenshots: Da bei dieser Art von Bildern der Text sichtbar sein muss, ist es am besten, ein Bild mit verlustfreier Komprimierung wie PNG oder WebP zu verwenden. Sie können testen, wie es mit JPEG aussieht.
  • Diagramme und Grafiken: Hier ist SVG zweifellos die beste Option, obwohl wir als Backup ein Bild im PNG-Format einfügen können.

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.