Die 10 häufigsten Fehler bei der Verarbeitung von Webbildern und ihre Lösungen

Die 10 häufigsten Fehler im Umgang mit Webseitenbildern und ihre Lösungen

Bilder sind der wichtigste Teil jeder modernen Website-Entwicklung. Statistiken zufolge machen Bilder derzeit 60 % der gesamten Website-Bandbreite aus. Dies wird noch deutlicher, wenn es um modernes Website-Design geht. In einem bildreichen sozialen Netzwerk mit einem Pin-ähnlichen Layout kann diese Zahl bis zu 85 % betragen.

Leider ist Bandbreite teuer. Bei stark frequentierten Websites ist die Bandbreite wahrscheinlich für Ihre IT-Programmierkosten verantwortlich und übersteigt bei weitem die Kosten für Webhosting und Speicher. Darüber hinaus nimmt ein so großer Datenverkehr Zeit in Anspruch, sodass Besucher beim Durchsuchen Ihrer Website wahrscheinlich lange auf das Laden der Bilder warten müssen.

Wir haben einige der Probleme aufgelistet, mit denen wir täglich konfrontiert werden, und wie sie gelöst werden können (und sollten).

1. Der Luxus, die Größe von Bildern auf der Browserseite zu ändern

Wir beobachten häufig, dass eine von Entwicklern verwendete Abkürzung darin besteht, die Bildgröße auf der Browserseite statt auf der Serverseite zu verwenden Bildgröße stimmt.

Die Situation ist oft die gleiche – eine Website hat viele Miniaturansichten einer bestimmten Größe, und dann ändert sich das Grafikdesign. Das neue Grafikdesign erfordert, dass die Miniaturansichtsgröße etwas kleiner wird Unsere Entwickler verwenden manchmal beiläufig, manchmal absichtlich das ursprüngliche Großbild und passen einfach die CSS-Höhe und -Breite des Bildes für den Browser an, damit das Bild wie eine Miniaturansicht aussieht.

In modernen Browsern Das Endergebnis sieht zwar gleich aus, aber die Anzahl der zum Laden des Bildes erforderlichen Blöcke ist unterschiedlich. Ihre Website verschwendet wertvolle Zeit mit dem Laden eines unnötigen Bildes, und Sie verschwenden zusätzliche Bandbreite, um diese zu übertragen bei älteren Browsern stärker ausgeprägt, da die Effizienz ihres Algorithmus zur Größenänderung von Bildern unterdurchschnittlich ist.

Dieses Problem kommt häufiger vor, als Sie denken, und kann auf vielen Websites gefunden werden, die wir täglich besuchen . Besuchen Sie beispielsweise die Startseite von Yahoo und Sie werden feststellen, dass die „heißen“ Nachrichten hier alle Miniaturbildpixel laden. Beide sind doppelt so groß wie Sie das Problem beheben: Für Entwickler/Designer – Stellen Sie sicher, dass das Bild, das Sie veröffentlichen möchten, perfekt zur Größe Ihrer Website passt. Verwenden Sie auch Miniaturansichten unterschiedlicher Größe, um sie an verschiedene Seiten anzupassen. Es lohnt sich, Miniaturansichten unterschiedlicher Größe zu erstellen, anstatt dieselben großen zu verwenden -Größe des Bildes und verlassen sich darauf, dass der Browser seine Größe anpasst.

JPEG-Bilder haben das Web seit vielen Jahren wirklich revolutioniert hat es Webentwicklern ermöglicht, mehr Geld zu sparen als alle anderen. Wettbewerber haben eine geringere Bandbreite, um hochauflösende Bilder mit hoher Detailgenauigkeit zu laden.

Und dennoch sehen wir weiterhin, dass Entwickler und Grafikdesigner die JPEG-Komprimierung von Bildern nicht ausprobieren , im Großen und Ganzen Auf den meisten Websites können Sie die JPEG-Qualität problemlos um eine Stufe verringern, ohne die Anzeigequalität erheblich zu beeinträchtigen.

Obwohl eine JPEG-Bildqualität von 85 % üblich zu sein scheint, sehen wir viele Websites, auf denen die Qualität gleich ist Sie liegt im Allgemeinen bei 95 %, und ein Produkt von geringerer Qualität kann die Bandbreite tatsächlich erheblich reduzieren, ohne das gesamte Erlebnis zu beeinträchtigen. Das Endergebnis ist ein höherer Bandbreitenverbrauch und die Auswirkung von Netzwerkverzögerungen auf das Benutzererlebnis.

Das Die Qualität der beiden Bilder oben ist nahezu gleich. Das JPEG mit 95 % Qualität auf der linken Seite ist 34 KB groß, während das JPEG mit 80 % Qualität auf der rechten Seite nur die Hälfte der Downloadzeit und das Doppelte des Ladevorgangs benötigt Zeit. Dieser vernachlässigbare Qualitätsverlust ist es wert.

So können Sie das Problem beheben: Bei einigen Websites haben wir festgestellt, dass die Verwendung von 50 % JPEG-Qualität zu Problemen führt Ein sehr vernünftiges Ergebnis. Während höherwertige JPEGs natürlich immer besser aussehen, ist die Qualitätssteigerung die zusätzliche Bandbreite und Wartezeit, die mit hochwertigen Bildern einhergeht, nicht immer wert.

3 .Falsches Bild Dateityp

Die aktuelle Website ist JPEG, PNG und GIF. Im Durchschnitt machen JPEG und GIF etwa 40 % einer Website aus, und PNG macht die restlichen 20 % aus.

Das Gute (und das Schlechte) an diesen drei Formaten ist, dass sie jeweils eine unterschiedliche Rolle auf einer Website spielen. Die Verwendung des falschen Bildformats ist eine Verschwendung der Zeit Ihrer Besucher und Ihres eigenen Geldes.

In Cloudinary ist unser häufigster Fehler die Verwendung von PNG zur Bereitstellung von Fotos. Ein weit verbreitetes Missverständnis über PNG ist, dass es sich um ein verlustfreies Format handelt und dass es der wahrscheinlichste Ersatz für Fotos ist. Im Allgemeinen stimmt das, und es besteht wirklich kein Optimierungsbedarf. Es ist nur ein Bruchteil der PNG-Dateigröße erforderlich, um hochwertige JPEG-Bilder vergleichbarer Qualität zu erhalten.

Das Bild links ist ein PNG-Bild mit einer Größe von 110 KB. Rechts ist ein JPEG-Bild, das ähnlich aussieht, aber nur 15 KB groß ist.

So brechen Sie ab: Achten Sie immer darauf, welches Bildformat für die Darstellung von Inhalten geeignet ist. PNG sollte für computergenerierte Bilder (Diagramme, Logos usw.) oder wenn Teile des Bildes transparent sein sollen (Bildüberlagerung) verwendet werden. Für die Anzeige aufgenommener Bilder sollte JPEG verwendet werden. GIF sollte verwendet werden, wenn Animationen angezeigt werden sollen (mit Jjax zum Laden von Animationen usw.). Beachten Sie, dass es sich hierbei um allgemeine Richtlinien handelt und PNG in fast jeder Hinsicht GIF übertrifft.

4. Nicht optimierte Bilder veröffentlichen

Wir wissen, dass PNG ein verlustfreies Format ist, aber wussten Sie, dass es weiter komprimiert werden kann? Veröffentlichen Sie Bilder mit der gleichen Präzision. Kostenlose PNG-Komprimierungstools können die PNG-Größe um bis zu 50 % reduzieren. Das gleiche detaillierte Bild, aber halb so groß? Betrachten Sie mich als geistig zurückgeblieben. Leider überspringen viele Entwickler und Website-Designer diesen Schritt und veröffentlichen nicht optimierte Bilder.

So knacken Sie es: PNGCrush und OptiPNG sind zwei Open-Source-Bildoptimierungsbibliotheken. Wenn Sie sie noch nicht verwendet haben, sollten Sie dies unbedingt tun. Wenn Sie den automatischen Optimierungsprozess nicht benötigen, können Sie sich für Smush von Yahoo entscheiden. Es bietet einen PNG-Dienst zur manuellen Komprimierung.

Das Obige ist ein Beispiel für die Verwendung von Yahoo Smush. Es hat funktioniert.

5. Vergessen Sie, Bildmetadaten zu entfernen

Viele moderne Websites ermöglichen Besuchern das Hochladen von Fotos. Ob es sich um ein Profilbild eines Benutzers oder ein geteiltes Foto von einer kürzlichen Reise handelt, diese enthalten Rohdaten moderner Kameras und bringen wahrscheinlich viele Metainformationen in das Foto ein.

Metadaten liegen im EXIF/IPTC-Format vor und enthalten viele Kamera- und Fotoinformationen, darunter Kameramodell, Datums- und Uhrzeitinformationen, Blende, Verschlusszeit, Brennweite, Messmodus, ISO, globale Positionierung und vieles mehr mehr Weitere Informationsschnipsel.

In den meisten Fällen ist es eine gute Idee, Metainformationen zu entfernen. Ideal für Privatsphäre und Reduzierung der Dateigröße. Leider sehen wir selten, dass sich Entwickler die Zeit nehmen, Metainformationen zu löschen, was die Bandbreite erhöht und das Surferlebnis des Benutzers beeinträchtigt.

So beheben Sie das Problem: Stellen Sie sicher, dass Sie Metainformationen aus Ihren Bildern und von Benutzern hochgeladenen Fotos löschen. Wenn diese Informationen erforderlich sind, stellen Sie sicher, dass sie im Rahmen und nicht als Teil Ihres Bildes verfügbar sind. Tipp: Auch wenn für Ihre Website keine Bild-Metainformationen erforderlich sind, gibt es eine Information, die ursprüngliche fotografische Ausrichtung des Bildes, die für die korrekte Anzeige des Fotos von entscheidender Bedeutung ist. Stellen Sie beim Löschen der Exif-Informationen sicher, dass Sie das Bild basierend auf den Exif-Informationen in die richtige Ausrichtung drehen.

6. Veröffentlichen Sie Bilder direkt vom Server

Sobald der Inhalt Ihrer Website vorhanden ist, besteht Ihr nächstes Ziel darin, sicherzustellen, dass alle Bilder Ihrer Website so schnell wie möglich an Ihre Besucher verteilt werden.

Eines der häufigsten Website-Probleme in Cloudinary besteht darin, dass Entwickler Bilder auf ihren eigenen Servern speichern, oft auf demselben Computer wie ihre Website. Hier passieren zwei Dinge: Erstens ist Ihr Server damit beschäftigt, Bilder zu veröffentlichen, anstatt sich auf die Veröffentlichung Ihrer einzigartigen Website-Inhalte zu konzentrieren. Zweitens verpassen Sie eine der erstaunlichsten Bildbereitstellungslösungen – ein Content-Delivery-Netzwerk (Content Delivery Networks).

So lösen Sie: Ein Content Delivery Network ist ein benutzerfreundlicher Dienst, der die Bilder auf Ihrer Website viel schneller verwaltet, als Ihre Website selbst die Verteilung dieser Bilder verwalten kann Server auf der ganzen Welt oder „Grenzen“. Wenn Besucher Ihre Website durchsuchen, werden sie automatisch zum nächstgelegenen Grenzserver weitergeleitet, sodass Bilder so schnell wie möglich veröffentlicht werden können, wodurch die Latenz erheblich reduziert wird Die Gebühr ist etwas teurer als die des Hosting-Dienstleisters, aber die heutigen CDN-Preise sind so erschwinglich, dass es sich lohnt, sie zu nutzen.

Es gibt viele CDN-Dienstanbieter zur Auswahl. Registrieren Sie sich einfach und schon können Sie loslegen Vorteile. Amazons CloudFront ist ein guter Anfang.

Statische Symbole werden separat geliefert

Zusätzlich zu Bildern und Miniaturansichten verfügen Websites auch über Logos, Pfeile, Sterne und Symbole , Logos, diese können das Benutzererlebnis der Website verbessern. Bildfragmente, aus denen Schaltflächen, Schatten, Rahmen und andere Bildfragmente bestehen, ermöglichen die dynamische Erstellung verschiedener Widgets entsprechend den Anforderungen des Künstlers.

Es gibt so viele kleine Bilder auf einer Website, dass Sie es nicht glauben können. Wenn Sie oft googeln, werden Sie möglicherweise immer noch von der einfachen Benutzeroberfläche beeindruckt sein. Sie können das Symbol kaum sehen, oder? Es gibt mehr als 80 kleine Symbole auf der Google-Suchergebnisseite (!)

Ein häufiger Fehler von Entwicklern besteht darin, diese kleinen Symbole unverändert in ihre Websites einzubetten. Die Zeit, die der Browser benötigt, um so viele Bilder herunterzuladen, ist beträchtlich. Beim Herunterladen eines Bildes müssen wir als Besucher die Netzwerkverzögerung ertragen, und da der durchschnittliche Browser nur das gleichzeitige Herunterladen von nicht mehr als 6 Bildern unterstützt, multipliziert sich die Verzögerung mit dem Download-Batch der Bilder. Ihre Besucher müssen warten, bis ihr Browser den Download aller dieser Bilder abgeschlossen hat, und Ihr Webserver reagiert aufgrund der vielen Download-Anfragen möglicherweise nicht mehr. Ihre Besucher können sogar das Warten aufgeben und mit ihren täglichen Surfaktivitäten fortfahren.

So beheben Sie das Problem: Eine einfache Lösung besteht darin, CSS Sprite zu verwenden, ein einzelnes Bild, das alle Ihre kleinen Symbole enthält. Ihre Webseite wird von diesem einzelnen Bild auf Ihrem Server heruntergeladen und geändert, und der HTML-Code der Seite verwendet alternative CSS-Klassennamen, um auf kleinere Bilder innerhalb des größeren Bildes zu verweisen.

Jetzt laden Google-Besucher statt 80 Bildern nur ein einziges Bild herunter. Ihr Browser lädt diese einzelnen Bilder schnell von den Google-Servern herunter, speichert sie im Cache und alle Bilder werden sofort gerendert.

8. Verwenden Sie Bilder, wenn CSS3 verwendet werden kann

Wenn wir das Design einer Website in HTML-Elemente umwandeln, entwerfen viele Entwickler Schaltflächen immer noch als Bilder. Da alte Browser die Verwendung von CSS zum Implementieren von Schatten, Bogenecken und speziellen Schriftarten nicht unterstützen, waren Entwickler es in der Vergangenheit gewohnt, kleine Bilder zu verwenden, um die oben genannten Funktionen zu erreichen, also bildbasierte Lösungen.

Leider erfordert diese Lösung eine große Anzahl von Bildern, was letztendlich das Zuschauererlebnis beeinträchtigt, und ist außerdem schwierig zu verwalten, was den Zeit- und Kostenaufwand für die Entwicklung erhöht (denken Sie darüber nach, wie man ein Bild in eingebettetem Text ändert). .

Moderne Browser unterstützen die Verwendung von einfachem CSS für Schatten, abgerundete Rechtecke und spezielle Schriftarten. Wir sehen jedoch immer noch, dass viele Websites immer noch bildbasierte Schaltflächen verwenden. Dies ist ein häufiger Fehler. Schauen Sie sich zum Beispiel diesen Teil des CNN-Buttons an –

Dieser kleine Trick ist ein 61-KB-Bild, das mit einfachen CSS-Anweisungen leicht implementiert werden kann, wodurch die Ladezeit und das Benutzererlebnis verbessert und gleichzeitig der Bandbreitenverbrauch reduziert wird.

So beheben Sie das Problem: Stellen Sie sicher, dass Sie nach Möglichkeit CSS3 verwenden. Wenn Sie ältere Versionen des IE unterstützen möchten, sollten Sie auch sicherstellen, dass die Benutzeroberfläche ordnungsgemäß heruntergestuft werden kann um zumindest sicherzustellen, dass die entworfenen Funktionen verfügbar sind (obwohl der ursprüngliche Effekt nicht perfekt dargestellt werden kann), oder wählen Sie eine CSS3-Simulationslösung wie CSS3 PIE.

Falsche Bild-Cache-Einstellungen

Im Allgemeinen Die Bildkultur Ihrer Website ändert sich selten. Die HTTP-Cache-Anweisung ermöglicht es dem Browser des Besuchers, diese Bilder zwischenzuspeichern, ebenso wie jeder andere Dienst (CDN, Proxys usw.). Sobald das Bild zwischengespeichert ist, wird bei zukünftigen Besuchen Ihrer Website der Cache verwendet, anstatt es immer wieder herunterzuladen.

Richtige Caching-Einstellungen verbessern die Benutzererfahrung, indem sie die Seitenladezeiten verkürzen und gleichzeitig die Kosten senken, indem sie die Bandbreite Ihrer Website reduzieren.

Leider sehe ich viele Fälle, in denen Caching nicht richtig genutzt wird. Am häufigsten bestehen Bedenken hinsichtlich langwieriger Cache-Einstellungen beim Aktualisieren von Bildern, weil man davon ausgeht, dass Website-Besucher das alte Bild anstelle des neuen sehen.

Diese scheinbar heikle Situation lässt sich leicht vermeiden, indem man der Bild-URL einen Fingerabdruck (MD5, Zeitstempel usw.) hinzufügt. Durch das Hinzufügen eines Fingerabdrucks zur URL des Bildes können Sie erkennen, wann sich ein Bild sowie seine URL geändert haben. Wenn sich die URL ändert, erzwingt der Browser das erneute Lesen des Bildes. Die aktuelle Webentwicklungsplattform kann automatisch einen solchen Fingerabdruck zu allen Bildern hinzufügen und so dieses Problem von der Quelle aus lösen.

Lösung: Wir empfehlen dringend, Bilder auf der gesamten Website aktiv zwischenzuspeichern und nach Möglichkeit den HTTP-Header „Expires“ für Bilder festzulegen. Zusätzlich zum Fingerprinting von Bild-URLs kann dies die Leistung Ihrer Website sofort verbessern.

10. Verwenden Sie in allen Bereitstellungsmedien die gleiche Bildgröße

Ihre Website wird von vielen verschiedenen Geräten angezeigt. Werfen Sie angesichts der Zunahme von Mobil- und Tablet-Nutzern in den letzten Jahren einen Blick auf die Verkehrsanalysen Ihrer Website, die einen enormen Anstieg der Besucherzahlen über diese Geräte zeigen.

Unabhängig davon, ob die Website mobile Besucher hat oder Sie planen, eine mobile Version Ihres Website-Inhalts bereitzustellen, müssen Sie nur noch eine Entscheidung treffen: Wie Sie das Bild senden möchten, dasselbe Bild auf Mobilgeräten, jedoch in der Desktop-Auflösung Zu niedrig.

Wir sehen oft, dass Entwickler versuchen, Ärger zu sparen, indem sie dasselbe Bild für verschiedene Geräteauflösungen bereitstellen und das Bild auf der Clientseite skalieren. Obwohl die Bilder großartig aussehen, verschwenden Benutzer Zeit mit dem Laden großer Bilder und zahlen zusätzliche Bandbreitengebühren. Dies ist besonders unfair gegenüber 3G-Nutzern und Roaming-Nutzern, die für große Mengen an hochauflösenden Bildern einen Aufpreis zahlen müssen.

Das Gegenteil ist die Verwendung des niedrigsten Standards und die Verwendung von Bildern mit sehr niedriger Auflösung auf allen Geräten, was dazu führt, dass Ihre Website auf neueren Geräten mit höherer Auflösung schlecht funktioniert.

So lösen Sie: Die Lösung ist einfach: Identifizieren Sie das Mobilgerät des Besuchers und die Lösung mithilfe eines Benutzeragenten oder clientseitigen Javascript-Codes. Nachdem die genaue Auflösung erreicht wurde, wird das am besten passende Bild vom Server abgerufen. Dazu müssen Sie natürlich eine Reihe von Miniaturansichten der Originalbilder bereitstellen. Es gibt bereits einige gute JavaScript-Pakete, die diesen Prozess automatisieren.

Zusammenfassung

Die häufigsten in diesem Artikel erwähnten Probleme bei der Verarbeitung von Website-Bildern sind tatsächlich die häufigsten Probleme, auf die wir bei Cloudinary stoßen. Es ist nicht so, dass es nur so viele Probleme gibt, wir versuchen nur, sie anzusprechen Themen, die einen größeren Einfluss auf die Effizienz haben, und geben einfache Erklärungen, damit Sie sie als Ausgangspunkt für Recherchen und die Suche nach geeigneten Lösungen nutzen können.

Wenn Sie noch nie von Cloudinary gehört haben, freue ich mich, Ihnen mitteilen zu können, dass Cloudinary die oben genannten und nicht erwähnten Probleme gelöst hat. Jedes auf Cloudinary hochgeladene Bild kann dynamisch in jeder Größe und Qualität generiert werden Sie können eine Konfiguration finden, die zu Ihrer Website passt und die Erwartungen der Kunden in einer Vielzahl von Einstellungen erfüllt. Cloudinary bietet benutzerfreundliche, verwaltbare Sprites. Alle Bilder werden entsprechend der Größe optimiert und verwenden eine Hochgeschwindigkeits-CDN-Übertragung mit angemessener Cache-Konfiguration. Schließlich ist es erwähnenswert, dass sich die Cloud-dynamische Bildgrößenänderungsfähigkeit perfekt an das responsive Design anpasst.