.JPG

JPG ist die Abkürzung für JPEG dies ist ein AkronymJoint Photographic Express Group. Die Gruppe hatte sich das Ziel gesetzt, große Fotodateien kleiner zu machen, um sie leichter an andere weitergeben zu können. Wenn ein Bild in JPG konvertiert wird, gibt es Qualitätsverluste, da die Komprimierung verlustreich ist.

‍

1992 wurde JPG der Standard für das Speichern digitaler Bilder festgelegt hat. Es ist das kompatibelste und universell nutzbarste Bildformat.

Das Format für digitale Bilder unterstützt das volleFarbspektrum. Fast alle Anwendungen können JPG öffnen und in JPG konvertieren. Für Bildansichten mit geringer Auflösung im Internet Beanspruchung von wenig Speicherplatz ist es ideal.

Bei Komprimierung kommt es zu Verlusten von Bildinformationen.

JPG ist, im Gegensatz zu vektorgrafischen Formaten, ein pixelbasiertes Format. Da JPGs trotzdem noch eine grosse Grösse erreichen können, macht es sinn diese für Devices zu trennen. Auf einem iPhone macht eine 5000 px grosses JPG beispielsweise wenig sinn.

Das Drucken von JPGs ist bei Digitalen Bildern ein weit verbreiteter Standart. Bei Grafiken macht dies aber weniger sinn, man setzt da lieber auf vektorbasierende Formate.Die weitverbreitete Akzeptanz ist sicherlich ein grosser Vorteil der JPGs. Man kann sie fast überall exportieren sowie importieren.

‍Vorteile
– Der Benutzer wählt selbst das Verhältnis von Qualität und Dateigrösse
– kleine Dateigrösse
– Das Format ist kompatibel mit allen Browsern, Computern, Tablets und mobilen Geräten.
– Geeignet für Bilder mit vielen Farben
– Die Bildqualität ist mit wenig Komprimierung hoch

‍Nachteile
– Durch die Komprimierung können die Farbübergänge rau werden oder sogar verschwinden
– JPEG ist weniger geeignet für die Arbeit mit Text oder Grafiken mit klaren Grenzen
– Das Format unterstützt nicht Transparenz
– Jede weitere Bildkomprimierung verschlechtert die Qualität des Bildes.‍

‍Tipp
– https://squoosh.app/
– Super JPG Komprimierung

‍

‍

.PNG

Portable Network Graphics (PNG, englisch für portable Netzwerkgrafik, als Akronym auch silbisch ausgesprochen [pɪŋ]) ist ein Rastergrafikformat mit verlustfreier Datenkompression. Es ist vom World Wide Web Consortium (W3C) anerkannt und das meistverwendete verlustfreie Grafikformat im Internet.

‍Was ist ein PNG:
– Portable Network Graphics
– Rastergrafikformat
– verlustfreier Datenkompression

‍Wo wird es verwendet:
– Bilder, Logos, Banner, Icons
– Wenn Transparenz gefragt ist

‍In welchen Programmen kann man PNGs erstellen und verarbeiten:
‍– Meisten Grafik Programme
– füllen die Dateien mit Metadaten, wodurch sie grösser werden
– «Für Web Speichern» verwenden

‍Welche Devices:
– Heutzutage eigentlich jedes DeviceGibt es Einschränkungen?
– Sind gross
– Nicht unendlich viele Farben

‍Vorteile PNG:
– PNG Bilder sind für Animationen geeignet
– PNGs kann Bilder transparenter anzeigen lassen als GIFs

‍Nachteile PNG:
– Nicht alle Browser unterstützen PNG
– PNGs sind meistens grösser als JPEGs

‍Was sind die Besonderheiten von PNGs:
– Das PNG-Format versucht die Vorteile von JPEGs und GIFs zu vereinen
– Lässt sich verlustfrei komprimieren

‍Welche Exporteinstellungen gibt es fürs Web bei PNGs:
– PNG 8
– PNG 24

‍Was für verschiedene PNGs gibt es:
– Es gibt noch PNG+ das zusätlich noch Ebenen speichern kann
– Es gibt noch APNG (geeignet für Animationen

‍Welche Informationen werden bei PNGs mitgespeichert:
Transparentinformationen sind enthalten

‍

‍

.SVG

Eine SVG-Datei, kurz für "scalable vector graphic file", ist ein Standard-Grafikdateityp, der für die Darstellung zweidimensionaler Bilder im Internet verwendet wird.

Bedeutung
Scalable Vector GraphicsIst die von World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung von Vektorgrafiken, welche zweidimensional sind.

SVG basiert auf XML (Extensible Markup Language, Auszeichnungssprache).

Wurde 2001 veröffentlicht und wurde lange Zeit nicht von Microsoft unterstützt.Die erste verfügbare Version von SVG war 1.1 und hatte drei Profile:

– Tiny – Geräte mit geringer Leistung
– Basic – Geräte mit etwas höherem Leistungsumfang
– Full – Geräte, welche SVG vollkommen verarbeiten konnten

‍
‍Anwendung
– Bei Vektorgrafiken
– Allgemein Web- und Responsive Design

‍Programme
– Inkscape
– Adobe Illustrator
– Freehand
– CorelDraw
– Importieren: Illustrator, Webentwicklungsprogramme (Atom), InkscapeExportieren: Illustrator, Inkscape, Webbrowser

Devices und Einschränkungen
Grundsätzlich können Devices, welche Webseiten darstellen können, SVG verarbeiten, daauf vielen Webseiten SVG eingebunden werden.Praktisch jedes Mobiltelefon, Computer und Tablet können SVP darstellen, da Iconspraktisch immer SVG sind.

‍Exporteinstellung für Web
– In Illustrator kann man die Option «Für Web speichern) auswählen
– Bei Exportieren aus Illustrator Format «SVG» und «Zeichenflächen verwenden»
– auswählen und in den SVP-Optionen Flexibel NICHT anwählen.

‍Informationen mitspeichern
– CSS
– Schrift
– Bildposition
– ID-Typ
– Dezimalstellen
– Minifizieren

Vorteile
– Im Responsive Webdesign vollkommen skalierbar ohne Qualitätsverlust
– Geringe Grösse und benötigt viel weniger Platz
– Im CSS kann die Hintergrundfarbe etc. einfach verändert werden
– In jedem Browser darstellbar

‍Nachteile
– Dateigrösse wächst sehr schnell, wenn SVG aus vielen kleinen Elementen besteht

‍

‍

.AI

AI-Dateien sind der native Vektordateityp für Adobe Illustrator. Mit einer AI-Datei können Designer ihre Grafiken, Zeichnungen und Bilder stufenlos skalieren, ohne dass dies Auswirkungen auf die Auflösung hat.

Was ist AI?
Ai ist eine Datei des Vektorbasierten Zeichenprogramms Adobe Illustrator. Die Dateiformat kann man öffnen und erstellen in Adobe Illustrator, ausserdem kann mansie in anderen Adobe Programmen importieren.

Einsatzgebiet
Im Illustrator erstelle ich Grafiken, wie Logos und um später wieder auf diese zu zugreifen, speichere ich es als AI ab. AI ist eine Arbeitsdatei und nicht eine Austauschdatei.Illustrator verwendet man auf dem Desktop. Einschränkungen sind, dass nur Leute die das Programm besitzen, ein AI File öffnen können.

Weiterverarbeitung/Export
Um es dann für den Print zu exportieren, kann man es als .pdf oder auch .eps exportieren.
Ausserdem ist eine Besonderheit, dass Illustrator das einzige Adobe Programm ist, welchesSVG als Vektor erkennt.

Vorteile
– AI Format ist native, das heisst ich kann ein AI File in anderen Adobe Programmen öffnen und die Ebenen bleiben bestehen und ich kann darauf zugreifen.

Nachteile
– Falls mein Illustrator eine ältere Version ist, als die zugesendete Datei, kann ich diese wahrscheinlich nicht öffnen mit meinem Illustrator.
– Benötige Adobe Programme zum öffnen

Unterschied EPS
AI Dateien werden exportiert als EPS, wenn ich es drucken möchte.

‍

‍

.GIF

Die Abkürzung "GIF" ist ein Akronym und steht für "Graphics Interchange Format". Auf Deutsch bedeutet das "Grafikaustausch-Format". In diesem Format können mehrere Einzelbilder, die übereinander liegen, in einer Datei abgespeichert werden. Ein GIF kann dafür genutzt werden, kurze Animationen zu erstellen, die ins Internet hochgeladen und geteilt werden.

Erklärung:
– Graphics Interchange Format
– Bilddatei
– entwickelte Steve Wilhite von CompuServe 1987
– vor dem jpg. entwickelt

‍Welche Informationen werden bei GIF mitgespeichert und welche nicht:
– Nur 256 Farben, keine Ebenen, bei Animationen einzelne Bilder je FrameWas sind Vorteile von GIF:
– Leichte Datei, Animation möglich, Transparenz möglich, Loop möglich, schon beimLaden sichtbarWas sind Nachteile von GIF:
– Schwere Datei, keine schönen Farbübergänge da nur 256 Farben, Teiltransparenznicht möglich

Welche Exporteinstellungen muss/kann ich vornehmen, wenn ich ein GIF im Web verwenden will:
Im GIF reduziert man das Dateigewicht via Farben. Je weniger Farben im Bild angezeigt werden, desto leichter die Datei. Die Anzahl Farben kann beim Export bestimmt werden.

Einsatzgebiet:
‍– Animationen
– Chat
– Powerpoint
– Unterhaltung / Memes

Wie erstellen:
‍– Premiere Pro
– After Effects
– Photoshop
– Media Encorder
– ezgif (online)

Bearbeiten:
‍– Premiere Pro
– After Effects
– Photoshop Devices
– Alle Devices

‍