Häufig kommen bei Webseiten Grafiken und Bildelemente vor. Sie sind elementarer Bestandteil bei der Erstellung von Webseiten und Beiträgen in Blogs.

Meist geht es bei der Erstellung zunächst um gute Qualität und Transparenzen. Diese Verbindung macht es erforderlich PNG zu verwenden, denn qualitativ vergleichbare GIF-Daten sind ungleich größer. Das PNG-Format bietet verlustfreie Darstellungen inklusive Alpha-Kanal, was transparente Bereiche in der Grafik ermöglicht.tinyPNG_WEB

Nach Abschluss aller Arbeiten bei Design und Programmierung steht die Optimierung und Beschleunigung des Webseitenprojektes auf dem Plan. Neben vielen Einstellungen und Optimierungen bei der Übertragung und Aufbereitung der Seite, müssen auch die Grafiken für die schnelle Nutzung optimiert werden. Dazu gehört es auch die Grafiken auf Größe und Darstellungsgeschwindigkeit anzupassen.

Ein Weg dabei ist es die PNG-Daten so aufzubereiten, dass diese möglichst wenig Speicherplatz verbrauchen. Dies erreicht man auf verschiedene Wege. So werden die Grafiken auf die wirkliche Nutzungsgröße herunter gerechnet und optimiert. Die einzelnen Wege sind die Optimierung des Formates (wie etwa über PNGout) sowie das Verkleinern der Informationsmenge oder die Reduzierung der Farbinformationen. Für die letzten beiden Punkte gibt es inzwischen auch eine Internetseite, welche diese Schritte für den geneigten Nutzer übernimmt.

Diese ist unter http://tinypng.org/ zu finden

So erzeugt tinyPNG eine optimierte oder besser gesagt verkleinerte PNG-Datei, welche auf den notwendigen Farbraum reduziert wurde. Auf diese Weise werden die abgelegten Farbinformationen effizienter aufbereitet und die Daten kompakter abgelegt. Ebenso werden alle Metadaten aus den Daten entfernt, dies beginnt bei der Erstellungsinformation und endet bei ganzen Texten von Programmen, Filtern, Lizenztexte oder Bildergalerien. All diese Informationen sind durchaus nützlich aber ebenfalls für eine steigende Dateigröße verantwortlich.

Möglich macht es tinyPNG durch eine angepasste Farbtabelle, welche versucht die  verwendeten Farben minimal zu halten, auf diese Weise werden PNG-Dateien erzeugt, die ggf. mit einer 8 Bit Tabelle dargestellt werden können und man bei der Datei nicht auf eine 24 Bit breite Farbtabelle zurückgreifen muss. Auf diese Weise verringert sich die Darstellung der selben Information theoretisch schon auf ein Drittel der wesentlichen Daten, der praktische Nutzen variiert dort. Wenn dann noch optimiertes Speichern und sowie das entfernen der ganzen Verarbeitungs- und Metadaten umgesetzt wird können Kompressionen und damit Einsparungen von 60 bis 80 Prozent erreicht werden. Wobei der wirkliche Nutzungsgrad von der jeweiligen Datei direkt abhängt.

Vergleich von PNG normal und optimiert

Sieht man dies wieder auf eine Webseite bezogen, so könnten die statischen Daten von 600KB auf ggf. weit unter 100 KB gedrückt werden. Dies hat zur Folge, dass die Webseite weniger Traffic erzeugt, leistungsfähiger ist, da die Aufrufe schneller bedient werden können und die Clientleistung damit steigt. Hinzu kommt dass die Seite schneller vollständig dargestellt werden kann, was auch einen Wert in den Rankings und Positionen in Suchmaschinen ausmacht.

All diese Punkte führen zu einer positiven Nutzererfahrung. Mit dieser Erfahrung spricht man sowohl Besucher und Suchmaschinen an. Vor allem mobile Geräte wie Tablets oder Smartphones profitieren davon, denn die Größe der Daten ist in diesem Fall proportional zur Ladegeschwindigkeit und wenn die Netzanbindung langsam ist wird dies zur Farce und der Nutzer wird so schnell nicht wiederkommen. Die Verbesserung von Webseiten und deren Grafiken hat also viele Auswirkungen und ist in diversen Belangen wichtig.

Grafiken für die Nutzung auf Webseiten optimieren auf Facebook teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Twitter teilen
Grafiken für die Nutzung auf Webseiten optimieren flattrn
Grafiken für die Nutzung auf Webseiten optimieren auf Digg teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Delicious teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Google Plus teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Xing teilen
Grafiken für die Nutzung auf Webseiten optimieren auf LinkedIn teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Pinterest teilen
Grafiken für die Nutzung auf Webseiten optimieren auf StumbleUpon teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Tumblr. teilen
Grafiken für die Nutzung auf Webseiten optimieren auf Pocket weiterlesen
GO-Designs - Blog auf Feedly abonnieren

Share Your Thought