Web Bilder

Netz-Bilder

Weitere Informationen zur Pixelgröße und optimierten Speicherung für das Web aus Photoshop finden Sie im Video Optimieren und Bilder für das Web speichern. Längere Ladezeiten von Webseiten stehen oft in direktem Zusammenhang mit viel zu großen Bilddaten. Web-Browser oder Browser im Allgemeinen (?b?a?

?z?(?)], zum Stöbern,'Stöbern, Stöbern, Schauen', auch'Stöbern') sind spezielle Computerprogramme zum Anzeigen von Webseiten im World Wide Web oder von Dokumenten und Daten im Allgemeinen. Fokussieren Sie Fotos auf einen einzigen Fotoservice - eine neue, intelligente Fotoanwendung, die nahtlos auf mobilen Geräten und im Internet funktioniert. Sie können Bilddateien mit dem Whatsapp Web Client senden.

Bild-Optimierung für das Web - Werkzeuge zur Bild-Optimierung

Die Bilder sind ein wesentlicher Teil des Inhalts der Website. Da die Ladezeiten ein wichtiger Ranking-Faktor für die Suchmaschine sind, ist es wichtig, auf optimale Bilder zu achten. Hier erfahren Sie mehr über die verschiedenen Optimierungsmöglichkeiten von Bildern für Websites und die Verbesserung der Aufladezeit. Selbst auf Websites trifft oft das Sprichwort zu: Ein Foto sagt mehr als tausend Wörter.

Da wir in einer Zeit der visuellen Inhalte immer und an jedem Ort um uns herum wohnen (siehe Snapchat, Instagram, etc.), ist die Verwendung und der Sinn von Bildmaterial besonders wichtig. Aber auch und gerade auf Websites werden Bilder gern und ausgiebig verwendet. Bei den meisten Websites führen die Bilddateien jedoch zu den meisten Daten, wie das folgende Beispiel zeigt:

Deshalb ist es neben einer großen Auswahl an Motiven wichtig, das korrekte Format zu wählen und die Bilder dann zu verdichten. Oftmals kann ein zweistelliger Prozentsatz des Datenvolumens durch Kompression gespeichert werden. Vor dem Einbinden eines Bildes in eine Website sollte es auf die korrekte Grösse, d.h. Bildgrösse, eingestellt werden. Bildabmessungen werden in Pixel angezeigt.

Zum Beispiel 800 x 600 Bildpunkte. Der Bildpunkt hat dann 800 Bildpunkte in der Länge und 600 Bildpunkte in der Tiefe. Das ist das große Ganze. Bei der Bildschirmauflösung handelt es sich um die Anzahl der Bildpunkte, die eine gewisse Länge erreichen. Zum Beispiel wie viele Bildpunkte pro cm oder Zoll (da hier oft amerikanische Maßeinheiten verwendet werden).

Dabei muss ein Motiv eine gewisse Grösse in Zentimetern oder Zoll haben, z.B. 15 x 10 cm. Dabei ist es entscheidend, wie viele Bildpunkte innerhalb eines Zentimeters liegen sollen. Professionelles Drucken erfordert 300 Bildpunkte pro Zoll. Dies würde heißen, dass die Auflösung im Web 72 Bildpunkte pro Zoll beträgt.

Für Bilder im Web spielt die Auflösung keine Rolle, die Bildgröße ist entscheidend. Daher ergibt sich die richtige Bildgröße aus der angestrebten Bildgröße auf der Website. Dies variiert von Website zu Website und von Foto zu Foto. Weitere Informationen zur Pixelgrösse und optimalen Speicherung für das Web aus Photoshop finden Sie im Film Bilder für das Web abspeichern.

Nach der Einstellung der Bildgrösse (und anderer relevanter Bildbearbeitung) muss das Foto gesichert werden. Tatsächlich wird das JPG-Format hauptsächlich für Bilder mit photorealistischen Bildern verwendet, die in guter Bildqualität, aber mit relativ kleinem Datenaufkommen abzulegen sind. Die verlustbehafteten Kompressionen sind bei großen monochromen Bereichen rasch ersichtlich. Merkmale des JPG-Bildformats: Gut für photorealistische Bilder mit vielen Einfärbungen.

Kompression regelbar. Verhältnismäßig niedriger Platzbedarf (abhängig von der Komprimierung). Hohe Kompression = niedriger Speicherverbrauch = niedrige Abbildungsqualität. Niedrige Kompression = großer Platzbedarf = gute Abbildungsqualität. PNG-Kompression ist nicht so verlustbehaftet wie JPG-Kompression, aber die Menge der Daten ist mehr. Bei fotorealistischen Motiven ist die 24-Bit-Version der Maßstab (mit der Option auf über 16 Millionen Farben).

Das GIF-Format kann nur Bilder mit max. 256 Farbtönen (8 Bit) anzeigen. Durch seine wenigen Farbtöne ist er für photorealistische Sujets nicht geeignet. Die GIF hat vor den beiden anderen die Moeglichkeit, (kurze) Animation oder eher Einzelbilder zu abspielen. Die so genannten Gigabit Ethernet Animation können nun zum Teil durch CSS3 Animation (und/oder JavaScript) ersetzt werden.

Von Zeit zu Zeit können sie aber auch effektiv zur Erklärung von Schnittstellen mit kleinen Mengen an Daten eingesetzt werden oder sind auch bei den sogenannten Cinemagraphen oder als kleine Animationsbilder populär, um sie in den großen Dimensionen sozialer Netze zu verbreiten, wie die nachfolgenden Anwendungsbeispiele aufzeigen. Verglichen mit der Pixelgrafik, die jedes einzelne Pixel speichern muss, werden hier nur wenige Einstellungen abgespeichert, so dass sie in der Regel einen sehr niedrigen Speicherplatzbedarf haben.

Da HTML5 SVG-Grafiken ohne Plugin in Websites integriert werden können. Ist die Bildgröße und das Bildformat optimal oder wird gezielt gewählt und das Foto abgespeichert, ist das Foto einsatzbereit. Aber auch jetzt kann es noch weiter verbessert werden. Dies ist besonders deshalb von Interesse, weil Bilder in der Regel die größte Datenmenge produzieren.

Deshalb ist es hier besonders lohnenswert, weiter zu arbeiten. Bei der Verdichtung ist darauf zu achten, dass der erkennbare Verlust an Qualität nicht zu groß ist. Schon heute gibt es zahlreiche Anwendungen, die Bilder verdichten können. Von 24BIT-PNGs können auch 8BIT-PNGs generiert werden, was natürlich die Datenmengen deutlich verringert (nach Informationen auf der Website manchmal über 70%).

Wenn du als Photoshop-Plugin willst, kannst du es für $50 kaufen und musst nicht den "Umweg" über die Website nehmen. Beim Hochladen eines Bildes wird die Veränderung der Dateigrösse bei unterschiedlichen Kompressionsraten automatisch dargestellt. Die Bildergebnisse können auch direkt betrachtet werden (zumindest in einem kleinen Vorschaufenster). Falls Ihnen das Resultat zusagt, können Sie das Foto gleich herunterladen.

Die Bezeichnung sagt alles: JPG-Dateien können mit diesem Werkzeug optimiert werden. Auch die Bildabmessungen können angepasst werden. Im Anschluss an die Optimierung werden die Alt- und Neudaten verglichen, so dass man einen guten Gegenüberstellung hat. Das Optimizilla-Werkzeug kann bis zu 20 JPG- und PNG-Dateien gleichzeitig laden und verdichten.

Zu jedem einzelnen Foto wird dann die Anzahl der gespeicherten Dateien übersichtlich und großformatig wiedergegeben. Wenn Sie noch feinere Einstellungen vornehmen möchten, können Sie auch die Bildkompression für jedes einzelne Foto individuell anpassen. Anschließend können Sie ein ZIP-Archiv mit den gepackten Bilder herunterladen. JPG, PNG, GIF können mit diesem Werkzeug komprimiert werden. Eine verlustlose Verdichtung findet statt, aber selbst bei verlustbehafteter Verdichtung sind die Differenzen kaum spürbar.

Am Anfang des Beitrags sprach ich über die Bildgröße in Pixel und dass das Image auf die Ausgangsgröße hin angepasst werden sollte. Auf einem großen Bildschirm ist das Vollbild auf einem Handy natürlich völlig überdimensioniert. Beispielsweise können Bilder im ansprechenden Web-Design entsprechend der Pixel-Dichte aufbereitet werden: So können Sie z.B. Bilder in einem ansprechenden Design optimieren:

Hochauflösende Bildschirme (wie das Apple Retina Display) ermöglichen die Darstellung von Bildern mit einer höheren Pixelgröße. Mit verschiedenen Auflösungen können verschiedene Bilder (mit verschiedenen Abmessungen) wiedergegeben werden. Dadurch wird nicht nur Zeit gespart, sondern auch die Erzeugung unterschiedlicher Bildgrössen im Voraus: Bildgrösse, Dateiformate, reaktionsfähige Bilder - es gibt einige Dinge zu berücksichtigen.

Im Bedarfsfall kann sie jedoch noch weiter optimiert werden. Vielleicht sogar VOR der Wahl eines Bildes. Es besteht also die Möglichkeit, komplett auf Bilder zu verzichten. Natürlich können Sie auch auf Bilder ganz verzichtet werden. Mit den (!) neuen Techniken von CSS3 lassen sich solche Auswirkungen erzielen, die bisher nur mit Pixel-Bildern auf Websites möglich waren.

Schattenwürfe, Kurven, Rotationen, Verzeichnungen, Transparenz, Farbverläufe oder die in Photoshop und anderen gängigen Blendingmodi können jetzt ganz einfach mit CSS realisiert werden. Anstatt mehrere (kleine) Bilder zu speichern, ist es möglich, diese in einem großen Foto zu speichern. Bei CSS immer nur einen, den geeigneten, ausgeschnittenen Bildausschnitt zum Einblenden.

Dies erspart Ihnen Ladezeiten, da nur ein (sicherlich größeres) Image und nicht mehrere (kleinere) Bilder zu laden sind. In der Regel werden alle Inhalte der einzelnen Webseiten einzeln eingelesen. Mit der derzeitigen Weiterentwicklung zu immer länger werdenden Webseiten mit immer grösseren Abbildungen (was bei den Einseitern immer schlimmer wird), werden oft grosse Mengen an Daten aufgeladen, zu denen der Benutzer nie kommt (entweder weil er die Webseite zuvor verlassen hat oder auf einen der Links klickt) - was natürlich für beide Parteien nachteilig ist.

Erst wenn der Benutzer, also der Webbrowser, die Position auf der angezeigten Bildseite erreicht, werden die Bilder eingelesen. Dies kann dazu führen, dass es einen Augenblick dauern kann, bis das zugehörige Image eingelesen wird.

Vor allem aber werden weniger "nutzlose" Dateien belastet, weil sie nicht berücksichtigt werden. Zur Vermeidung dieses kurzzeitigen Ladeeffekts der freien Flächen können die Bilder "kurz" nachgeladen werden. In der Standardeinstellung werden Thumbnails, d.h. kleine Thumbnails, für jedes hochgeladene Foto erstellt.

Sie können im Hintergrund unter "Einstellungen" "Medien" die erzeugten Bildgrössen abändern. Ich habe oben bereits einige Werkzeuge zur Optimierung der Bilder bzw. der Datenmengen eingeführt. Über das Plug-in https://wordpress. org /plugins/wp-smushit/ können die Bilder ohne Verlust komprimiert und, falls gewünscht, auch die Dateidimensionen angepasst werden. Sie können die Bilder entweder beim Upload sofort oder per Tastendruck alle bereits existierenden Bilder auf einmal zusammendrücken.

Auf diese Weise können die Bilder auch zu einem späteren Zeitpunkt optimiert werden. Außerdem wird angezeigt, ob ein Image bereits gepackt wurde oder nicht. Ich habe oben die Methode der "Lazy Load" eingeführt. Ich hätte beinahe vergessen: Am Beginn könnte natürlich die Fragestellung sein, ob überhaupt ein Image gebraucht wird.

Es ist nicht ungewöhnlich, dass grossformatige Bilder verwendet werden, die vor allem "schön" sind. Zum Beispiel grossformatige Landschaftsaufnahmen, die nicht einmal einen unmittelbaren Zusammenhang mit dem Thema der Website oder den Inhalt haben. Möglicherweise ist es besser, weniger Bilder zu verwenden und die Typographie zu verfeinern! Deshalb habe ich Ihnen in diesem Beitrag einige Punkte und Methoden aufgezeigt, um Ihre Bilder in Zukunft zu verbessern und die Benutzererfahrung für Ihre Kunden so groß wie möglich zu gestalten, oder um sie nicht durch überflüssige Daten zu mindern.

Mehr zum Thema