Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

4 Dateiformate –
JPG, PNG, GIF und SVG

Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

Der Bildformate bzw. Dateiformate bedarf es der Unterscheidung von Merkmalsträger. Hiermit ist hier ein Beitrag in Zusammenfassung von Eigenschaften der Bildformate für das Web.

webessenzMit freundlicher Genehmigung sind die Textteile der Website "webessenz" (von damals) entliehen.

Wozu also dieser Beitrag – wo dieser ohnehin im Web ist?  In Durchsicht hier des Beitrags war festzustellen, dass der Website nunmehr im Namen Divo Webdesign keine Beiträge hervorgehen.

  • Einmal mehr, wie gut, dass es eine Kopie gab –.

Der Dateiformate von vier

webessenzJPG oder auch JPEG
(Joint Photographic Experts Group)

Das pixelbasierte Format wurde im Jahre 1992 von der Joint Photographic Experts Group vorgestellt. Eine Darstellung bis zu 16,7 Millionen Farben ist möglich.

  • Kompression: JPG-Dateien werden gemäß Arbeitsschritten komprimiert, d. h., erneute Bearbeitung und Abspeicherung ist verlustbehaftet, aber den Farbumfang (weitgehend) erhält.
  • Transparenz: Das JPEG-Format kann keine Transparenzen darstellen.
  • Animation: Animationen sind nicht möglich.

Der Darstellung bis zu 16,7 Millionen Farben und der Art der Kompression eignet sich das JPEG-Format am besten für Fotos mit vielen Farben ohne transparente Bereiche.

webessenzPNG (Portable Network Graphics)

Das PNG-Grafikformat für Rastergrafiken wurde ab 1994 als freie Alternative für das GIF-Format entwickelt. Das GIF-Format war bis in das Jahre 2006 durch ein Softwarepatent geschützt und es wurden Lizenzgebühren gefordert. Das trug zur schnellen Verbreitung des PNG-Formates bei. Ein PNG kann von 256 (PNG8) bis zu 16,7 Millionen (PNG24) Farben darstellen.

  • Kompression: Ein Vorteil des PNG-Formates ist die verlustfreie Kompression. Allerdings hat das zur Folge, dass die gespeicherten Dateien größer sind.
  • Transparenz: Das PNG kann Alpha-Transparenzen darstellen. Das heißt, Bereiche des Bildes können nicht nur ganz oder gar nicht transparent sein, sondern es können auch halbtransparente Bereiche dargestellt werden. Bei 8 Bit sind bis zu 256 Abstufungen oder bei 16 Bit sogar 65.536 Abstufungen der Transparenzstärke möglich. Bisher kommt meistens der 8 Bit Alphakanal zum Einsatz. Dadurch ist es möglich, Kanten zu glätten oder Schlagschatten darzustellen.
  • Animation: Animationen sind im PNG-Format nicht möglich.

Eignung für Bilder mit transparenten Bereichen, Text und Logos.

Meine Erfahrungswerte: Das PNG-Format ist für Screenshots bestens geeignet. Ausschnitt ist weitgehend ohne Schärfeverlust möglich. Durch Skalierung wird aber das PNG-Format unscharf. Vielmehr ist hier die verlustfreie Kompression zu empfehlen, s. compressor.io.

webessenzGIF (Graphics Interchange Format)

Steve Wilhite entwickelte dieses Format im Jahre 1987. Ein GIF kann maximal 256 Farben darstellen.

  • Kompression: Beim GIF erfolgt die Kompression verlustfrei. Wegen dieser effizienten Komprimierung mittels LZW-Algorithmus wurde das GIF bekannt, da es deutlich weniger Speicherplatz brauchte, als die damals üblichen Formate.
  • Transparenz: Dieses Format kann Transparenz darstellen, doch nur alles oder nichts: Halbtransparenzen sind nicht möglich.
  • Animation: Das GIF-Format ermöglicht Animationen. Mehrere Bilder werden gespeichert und von den Browsern zeitverzögert abgespielt, wie bei einem Daumenkino. Im Tumblr-Blog von IBM wird gerne mit GIF’s gearbeitet.

GiF ist prinzipiell für Grafiken, Buttons, Logos und auch Strichzeichnungen. Doch wegen dem Siegeszug des PNG-Formates kommt es inzwischen meistens für Animationen zum Einsatz.

webessenzSVG (Scalable Vector Graphics)

Das SVG-Format macht es möglich, zweidimensionale Vektorgrafiken darzustellen. Es wurde vom World Wide Web Consortium (W3C) entwickelt und im Jahre 2001 eingeführt.

  • Kompression: Da es sich um ein Vektor-Format ohne Pixel handelt, können SVG-Grafiken verlustfrei skaliert werden. Die Dateigröße bleibt dennoch gering.
  • Transparenz: Wie auch beim PNG sind Alpha-Transparenzen bei SVG’s möglich.
  • Animation: SVG-Dateien können mit JavaScript animiert und verändert werden. Ein paar Beispiele hierfür findet man im Artikel auf dieser Website: SVG Drawing Animation
  • Besonderheiten: Da das SVG-Format auf XML basiert, kann die Datei als Code eingefügt (und auch verändert) werden. Hier lässt sich eine bessere Ladezeit erzielen, da der Browser die Grafik darstellt und nicht erst noch eine Datei vom Server geladen werden muss. SVG’s kann man auch als Datei mit der Endung .svg oder .svgz abspeichern. In dem Falle behandelt man die Grafik wie eine .jpg- oder .png-Datei. – Alle modernen Browser (Internet Explorer erst ab Version 9) können das Format verarbeiten.
  • Fit für Responsive Webdesign: SVG-Grafiken eignen sich vor allem für Websites, die sich dem benutzten Endgerät anpassen.
    • Die kleine Dateigröße kommt Smartphone-Nutzer mit geringer Bandbreite entgegen. Zudem passt sich die Grafik gleich dem Endgerät an und verkleinert sich, wenn auf einem Tablet weniger Platz vorhanden ist als auf dem Desktop-PC.
      • Hier ist zu beachten, dass keine Höhen- und Breitenangaben mit abgespeichert werden dürfen, wenn die Grafik frei skalierbar sein soll.
    • Soll die Grafik als Code eingefügt werden, muss „height“ und „width“ entfernt werden. Kommt eine .svg-Datei zum Einsatz, muss schon beim Export aus dem Grafikprogramm darauf geachtet werden, sie als interaktives oder responsive SVG abzuspeichern.

Das SVG-Format eignet sich für alles, was geometrische Formen und Linien hat: Logos, Infografiken, Diagramme, mehrfarbige Icons, Text, u.s.w.

S. innert Website, SVG Kennenlernen.

webessenzVergleich der Dateiformate

JPG/JPEGPNGGIFSVG
Kompression verlustfrei
Transparenz
(Abstufungen)

(ja/nein)

(Abstufungen)
Animation
max. Farben16,7 Mio.16,7 Mio.25616,7 Mio.
EignungFotosBilder mit Transparenzen, Text und LogosAnimationenLogos, Infografiken, Diagramme, mehrfarbige Icons, Text, Animationen

webessenzFazit:

Für detailreiche Bilder mit vielen Farben ist JPEG die erste Wahl, da bei der Kompression auf Farberhalt Wert gelegt wird.

Das PNG hat größtenteils das GIF abgelöst. Einzig, wenn eine PNG-Datei zu groß werden würde oder für Animationen wird das GIF bevorzugt.

Das SVG-Format ist bisher nicht weit verbreitet. Doch das Potenzial ist vorhanden: Mit JavaScript lassen sich ebenfalls Animationen realisieren und es besticht durch geringe Dateigrößen und Skalierbarkeit. Das wird auch für die zunehmende Anzahl verschiedener mobiler Endgeräte immer wichtiger.

Dateiformate
Bild (Vektorgrafik, 7KB), mohamed_hassan

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-April