Workflow Considerations for Using an Image Management Service

Es gibt all diese Seiten, die Ihnen bei Ihren Bildern helfen wollen. Sie optimieren Ihre Bilder und helfen Ihnen, sie performant auszuliefern.

Here’s the type of service I mean.

• Cloudinary
• ImageEngine
• imgix
• Akami Image Manager
• KeyCDN Image Processing
• CloudImage
• ImageOptim API
• Sirv
• Netlify Image Transformation

Das ist eine sehr gute Sache. Nach jedem Maßstab sind Bilder ein wichtiger Teil der Ressourcen auf Websites, und wir sind bekanntermaßen schlecht darin, sie zu optimieren und all die Dinge zu tun, die wir tun könnten, um die Leistungseinbußen durch sie zu verringern. Ich sitze gerade auf einer Konferenz und Dave hat jedem im Publikum 100 Dollar gewettet, dass er ein nicht optimiertes Bild auf deren Website finden kann. Ich war nicht darauf vorbereitet, ihn anzunehmen.

Sie nutzen also einen Dienst, der Ihnen hilft, Bilder besser auszuliefern. Klug. Viele davon erleichtern die Verwaltung und Optimierung von Bildern erheblich. Aber ich halte sie nicht für eine Selbstverständlichkeit. Es gibt viel zu bedenken, wie z. B. Entscheidungen zu treffen, die Sie nicht in die Ecke drängen.

Ich sollte Bilder aus meinem eigenen CMS hochladen können.

Ich möchte meine Assets nicht auf Ihre Website hochladen. Ich möchte die Medienverwaltung in meinem eigenen CMS nutzen. Daher sollte der Dienst mindestens eine API und möglicherweise sogar offiziell gepflegte CMS-Plugins haben.

Diese Website verwendet WordPress. Ich kann Bilder sehr einfach per Drag-and-Drop in die Mediathek und Beiträge ziehen. Ich kann meine Mediathek nach zuvor hochgeladenen Bildern durchsuchen. Das gefällt mir, und ich möchte das heute und auch in Zukunft nutzen.

Die Bilder sollten auf meinen eigenen Server hochgeladen werden.

Wenn sie auch auf den Bilderdienst hochgeladen werden müssen, ist das in Ordnung. Aber sie sollten zuerst auf meinen Server und dann auf den Dienst geladen werden. So behalte ich die Rechte an der Quelldatei.

Bilder innerhalb von Inhalten sollten semantisch funktionalen Markup in meinem CMS verwenden.

Ich würde es bevorzugen, wenn die Bilder innerhalb von Inhalten als völlig funktionales HTML in meiner Datenbank gespeichert werden.

<img src="/images/flower.jpg" alt="a blue flower">

Es könnte ausgefallener sein, wie z.B. die Verwendung von srcset (aber wahrscheinlich nicht von sizes, da sich das mit dem Design ändert) oder die Einbettung in <picture>- oder <figure>-Elemente... was auch immer Ihnen sinnvoll erscheint, um semantisches HTML zu erstellen. Das Wichtigste ist, dass der Inhalt in meiner Datenbank voll funktionsfähiges HTML mit einem src im Bild hat, das auf ein echtes Bild auf meinem echten Server verweist.

Die Implementierung des Bilderdienstes wird das Filtern dieses HTML beinhalten, um alles zu tun, was nötig ist, wie z. B. das Ersetzen von URLs, um ausgefallenere responsive Bild-Markup und Ähnliches zu generieren.

Zwischen dem Vorhandensein von funktionalem HTML und Bildern auf meinem Server, ermöglicht mir das, den Bilderdienst bei Bedarf auszuschalten. Dienste haben die Angewohnheit zu kommen und zu gehen, oder sich auf Weisen zu ändern, die sie mehr oder weniger akzeptabel machen. Ich möchte nicht gefesselt sein; ich möchte Freiheit. Ich möchte den Dienst ausschalten können und eine voll funktionsfähige Website mit voll funktionsfähigen Bildern haben und nicht daran gehindert werden, zu einem anderen Dienst zu wechseln – oder gar zu keinem Dienst.

Auch wenn ich den Dienst in der Vergangenheit nicht genutzt habe, möchte ich, dass alle meine Bilder davon profitieren.

Ich habe gerade das Filtern des HTML für Bilder in meiner Datenbank erwähnt. Das sollte für alle Bilder auf meiner Website gelten, auch wenn sie hochgeladen und verwendet wurden, bevor ich mit der Nutzung des Bilderdienstes begonnen habe.

Das bedeutet wahrscheinlich, dass die Dienste eine URL-basierte „get“-API anbieten, um Bilder aus ihren kanonischen Speicherorten on-the-fly zu optimieren.

Ich sollte nicht über Format oder Größe nachdenken müssen.

Ich möchte hochladen, was ich habe. Wahrscheinlich ein riesiger, nicht optimierter Screenshot, den ich gerade gemacht habe. Wenn ich überhaupt darüber nachdenke, möchte ich etwas hochladen, das viel zu groß und von viel zu hoher Qualität ist, damit ich weiß, dass ich eine großartige Originalversion zur Verfügung habe. Der Dienst wird bei Bedarf optimierte, skalierte und formatierte Bilder erstellen.

Ich möchte auch SVG hochladen und es als SVG belassen (das ebenfalls optimiert ist).

Die Bilder werden schließlich über ein CDN ausgeliefert.

CDNs sind entscheidend für die Geschwindigkeit. Australier erhalten Bilder von Servern, die in Australien gehostet werden. Kanadier erhalten Bilder von Servern, die in Kanada gehostet werden. Die Server sind so konfiguriert, dass sie schnell und cookie-los sind und all die ausgefallenen, über meinen Kopf hinausgehenden Dinge, die ein Asset-CDN zum Laufen bringen.

Die Bilder sollten im richtigen Format ausgeliefert werden.

Wenn Sie Bilder im WebP-Format für Browser bereitstellen, die es unterstützen, erhalten Sie wahrscheinlich genauso viel oder mehr Leistung durch diese Optimierung als durch die Bereitstellung von neu skalierten Bildern mit responsiven Bildsyntax. Das ist ein großer Vorteil.

Ich möchte, dass der Dienst das bestmögliche Format für jedes Bild für jeden einzelnen Browser kennt und das Bild in diesem Format bereitstellt. Dies wird sich im Laufe der Zeit ändern, daher möchte ich, dass der Dienst hier auf dem Laufenden bleibt, damit ich das nicht tun muss.

Ich weiß, dass vor drei Jahren Formate wie JPEG-XR und JPEG-2000 involviert waren. Ist das immer noch der Fall? Ich habe keine Ahnung. Das ist ein Kernwertversprechen des Dienstes.

Es sollte die Bilder optimieren und die Qualität handhaben.

Dies ist vielleicht die offensichtlichste Funktion und der Grund, warum Sie sich überhaupt für einen Bilderdienst entscheiden. Bilder müssen optimiert werden. Es gibt vielleicht Dutzende von Bildoptimierungswerkzeugen/Algorithmen, die darauf abzielen, jedes letzte Byte aus Bildern herauszuholen. Der Bilderdienst nutzt wahrscheinlich diese oder hat sogar seine eigene ausgefallene Technologie dafür. Idealerweise ist die Standardeinstellung, ein Bild so stark wie möglich zu optimieren, ohne die Qualität merklich zu beeinträchtigen, aber mir trotzdem zu erlauben, es noch weiter zu reduzieren, wenn ich möchte.

Schämen Sie mich nicht dafür, Bilder mit hoher Pixeldichte zu verwenden.

Viele Bilderdienste bieten eine Art Testwerkzeug, bei dem Sie eine URL eingeben und es Ihnen sagt, wie schlecht Sie mit Bildern umgehen. Viele davon testen die Größe des Bildes auf der gerenderten Seite und vergleichen die Abmessungen des Originalbilds. Wenn das Originalbild größer ist, sagen sie Ihnen, dass Sie Einsparungen erzielt hätten, indem Sie es kleiner machen. Das ist für mich unerträglich. Displays mit hoher Pixeldichte gibt es schon lange, und es ist kein Verbrechen, sie zu verwenden.

Es sollte mir helfen, die richtige Größe für das Gerät, auf dem es sich befindet, und die perfekte responsive Syntax bei Bedarf bereitzustellen.

Nicht alle Bilder profitieren von denselben responsiven Breakpoints. Sehen Sie sich die Website Responsive Image Breakpoints an. Sie generiert Versionen des Bildes, die am besten sind, abhängig vom Bild selbst. Das ist die Art von Hilfe, die ich von einem Bilderdienst erwarte. Nehmen Sie etwas Schwieriges und automatisieren Sie es für mich.

Ich weiß, dass ich wahrscheinlich mein eigenes sizes-Attribut mitbringen muss, da dies sehr von meinem eigenen CSS und dem Design der Website abhängt. Es ist immer noch wichtig, und es lässt mich fragen, ob ein Bilderdienst helfen könnte, die optimale sizes-Attribute für bestimmte Bilder zu ermitteln. Zum Beispiel, indem meine Website in verschiedenen Größen geladen und gesehen wird, wie groß das Bild mit meinem CSS gerendert wird, und es von dort aus zur späteren Verwendung berechnet wird.

Nur ich.

Das ist nur meine eigene Liste von Anforderungen. Ich habe das Gefühl, dass sie ziemlich repräsentativ für „normale“ Websites ist, die viele Bilder haben und das Richtige tun wollen, um sie bereitzustellen.

Ich bin nicht auf all die ausgefallenen Funktionen eingegangen, die Bilderdienste anbieten, wie z. B. die Möglichkeit, Ihnen mitzuteilen, dass ein Bild eine nach Westen blickende Giraffe enthält, die seit Donnerstag nichts mehr gefressen hat, und Ihnen anzubieten, ihre Netzhaut neu einzufärben. Ich weiß, dass diese Dinge für einige Unternehmen wichtig sind. Hier geht es eher um das, was für mich wie der breiteste und häufigste Anwendungsfall erscheint: das reine Hosten und Bereitstellen von Bildern auf bestmögliche Weise, die die aktuelle Technologie zulässt.