Share
Bei der Entwicklung oder Aktualisierung einer Website sollten einige Ihrer Hauptziele darin bestehen, eine optimale Endbenutzererfahrung zu bieten und die Website-Konversionen zu verbessern, da diese beiden Aspekte der Schlüssel für die Steigerung des Umsatzes und die Steigerung Ihres Geschäftsergebnisses sind. Ein Problem, das Sie vielleicht entdecken, ist, dass Ihre wachsende Verwendung von Bildern zwar zu einem ansprechenden Design führt, sich jedoch negativ auf die Leistung Ihrer Website auswirken kann.
Heutzutage machen Bilder mehr als 60% der heruntergeladenen Inhalte auf einer Webseite aus, sodass die Optimierung von Bildern zu erheblichen Leistungsverbesserungen führen kann. Die Bildoptimierung ist jedoch sowohl eine Kunst als auch eine Wissenschaft, die eine sorgfältige Bewertung der verschiedenen Parameter und ein sensibles Gleichgewicht zwischen Inhalt, Format, Qualität und Abmessungen erfordert.
Unabhängig davon, ob Ihre Webanwendung vom Benutzer hochgeladene Bilder unterstützt, Sie statische Bilder bereitstellen oder Profilbilder aus sozialen Netzwerken anzeigen, müssen Sie sie wahrscheinlich an das grafische Design Ihrer Website anpassen. In diesem Lernprogramm werden die Funktionen der umfassenden Cloud-basierten Bild- und Videomanagement-Lösung von Cloudinary erläutert. Sie werden sehen, wie Sie dabei helfen können, Bilder zu optimieren und die Leistung Ihrer Website letztendlich zu verbessern.
Bildformate können die Ladezeiten erheblich beeinflussen. Die manuelle Bestimmung der optimalen Format- und Encodereinstellungen für den Inhalt jedes Bildes kann jedoch komplex und ineffizient sein.
Cloudinary ermittelt dynamisch und liefert jedes Bild im effizientesten Format, basierend auf Bildinhalt und Browser. Bilder können in verschiedenen Formaten auf Cloudinary hochgeladen und problemlos in andere Formate konvertiert werden. Beispielsweise können Bilder automatisch als WebP an Chrome oder JPEG-XR an Internet Explorer übermittelt werden. In einigen Fällen kann PNG ausgewählt werden, wenn Sie die Transparenz beibehalten möchten.
Es gibt viele Gründe, warum Sie das gelieferte Bildformat ändern möchten:
Um Bilder in einem anderen Format zu liefern, geben Sie einfach das neue Format als Dateierweiterung der Zustellungs-URL an. Bei der Verwendung von Cloudinary SDKs können Sie das neue Format entweder als Erweiterung des Ressourcennamens angeben oder den Formatparameter verwenden.
Beispiel:
Demo ansehen.
Passen Sie die Komprimierungsqualität automatisch an
Durch die genaue Anpassung der Komprimierungsqualität und der Codierungseinstellungen können die Dateigrößen erheblich reduziert werden, ohne dass die visuelle Qualität merklich beeinträchtigt wird. Das Finden der richtigen Einstellungen für jedes Bild ist jedoch komplizierter als es sich anhört.
Cloudinary automatisiert die Dateigröße im Vergleich zur Qualitätsentscheidung. Die intelligenten Algorithmen und Kodierungsalgorithmen von Cloudinary analysieren jedes Bild, um die optimale Balance zu finden, und erzeugen ein wahrnehmungsmäßig feines Bild, während die Dateigröße minimiert wird. Indem Sie jedes Bild einzeln analysieren, um die optimale Komprimierungsstufe und Bildkodierungseinstellungen zu finden, können Sie die durch Komprimierung der Kodierungseinstellungen ergänzte genaue Einstellung der Komprimierungsstufe vornehmen und die Dateigröße erheblich verringern, ohne dass dies für das menschliche Auge spürbar ist.
Beispiel:
 |  |
Demo ansehen.
Sie können die Umwandlung des Bildes hier sehen.
Durch das Bereitstellen von Bildern mit Abmessungen, die größer als die erforderliche Anzeigegröße sind, wird unnötige Bandbreite benötigt und die Seitenbelastung verlangsamt. Das manuelle Erstellen mehrerer Versionen jedes Bildes für verschiedene Bildschirmauflösungen kann jedoch ressourcenintensiv sein. Mit Cloudinary können Sie die Bildauflösung dynamisch skalieren, um die optimale Version bereitzustellen, die der Geräteauflösung und den Abmessungen des Ansichtsfensters entspricht, ohne unnötige Pixel zu liefern.
Darüber hinaus müssen Bilder häufig zugeschnitten werden, um auf responsive Layouts und verschiedene Geräteabmessungen zu passen. Der inhaltsabhängige Cloudinary-Beschneidungsalgorithmus verwendet eine Kombination von Heuristiken, um die interessierende Region in jedem Bild automatisch zu erkennen und im laufenden Betrieb zu beschneiden.
Diese intelligenten Zuschneidefunktionen stellen sicher, dass der Fokus jedes Bildes im abgeleiteten Bild nicht nur für Fotos mit Gesichtern, sondern für jeden Inhaltstyp enthalten ist. Jedes Bild wird einzeln analysiert, um den optimalen Fokusbereich zu finden.
Original Bild:
Beispiel für verschiedene Schnittmodi:
Demo ansehen.
Um das Bild über seine Transformations-URL anzuzeigen, können Sie es hier anzeigen.
Mit Cloudinary können Sie Ihre Bilder schnell und einfach in jedes gewünschte Format, Stil und Maß umwandeln. Außerdem können Sie Bilder so optimieren, dass sie eine minimale Dateigröße aufweisen, um die Benutzerfreundlichkeit zu verbessern und Bandbreite zu sparen.
Das Kernstück der Cloudinary-Lösung ist die Möglichkeit, Bilder über dynamische URLs über ein schnelles, weltweites Content Delivery Network (CDN) zu liefern. Die URL enthält die öffentliche ID des angeforderten Bildes sowie optionale Transformationsparameter. Die öffentliche ID ist die eindeutige Kennung des Images und wird entweder beim Hochladen des Images in Ihr Cloudinary-Konto angegeben oder automatisch von Cloudinary zugewiesen.
Alle Umwandlungsanweisungen (Manipulationsanweisungen) können vor der öffentlichen ID in der Lieferungs-URL hinzugefügt werden. Wenn zum ersten Mal auf die URL zugegriffen wird, wird das abgeleitete Bild im laufenden Betrieb erstellt und an Ihren Benutzer übermittelt. Das abgeleitete Image wird auch im CDN zwischengespeichert und steht sofort allen Benutzern zur Verfügung, die dasselbe Image anfordern.
Diese Tipps sind nur einige Möglichkeiten, mit denen Cloudinary Sie bei der Optimierung von Bildern für Ihre Website unterstützen kann, um die Leistung und die Benutzererfahrung zu verbessern.
Auf der Cloudinary-Website wird ausführlich beschrieben, wie diese Funktionen funktionieren. Sie können auch Blogeinträge finden, in denen die 10 häufigsten Fehler erläutert werden, die Sie beim Umgang mit Website-Bildern machen, wie diese zu lösen sind, und wie Sie Website-Bilder analysieren, um die Geschwindigkeit zu erhöhen und Bandbreitenkosten zu reduzieren.
Accentsconagua
