Web-Bilder: Perfekt (und automatisch) in der Größe ändern und konvertieren-PHP-Tutorial-php.cn

Web Images: Resize and Convert Perfectly (and Automatically)

So gut wie jeder Frontend-Entwickler weiß, dass wir den Benutzern möglichst kleine Bilder liefern müssen, ohne deren Qualität zu beeinträchtigen. Wir alle wissen, wie wir das erreichen können. Aber es ist eine Aufgabe, die niemand gerne erledigt. Auch aus geschäftlicher Sicht braucht es Zeit, und Zeit ist Geld. „Gut genug“ ist also gerade gut genug.

Lassen Sie mich Ihnen mitteilen, wie wir die perfekte Bildbereitstellung verbessert und automatisiert haben, ohne den Entwicklern mehr Arbeit zu bereiten.

Wie es normalerweise gemacht wird

Vielleicht bist du es nicht, aber es sind viele – wahrscheinlich die meisten von uns.

Sie exportieren ein Bild in PNG mit der doppelten beabsichtigten Größe, um Bildschirmen mit hoher Dichte gerecht zu werden, und verwenden es in einem Etikett. Wenn Sie bereit sind, zusätzliche 30 Sekunden (oder mehr) aufzuwenden, machen Sie es besser: Sie konvertieren es in WebP und platzieren beide Versionen in einem Element, sodass der Browser das beste auswählen kann (naja, nicht das beste, sondern nur das neueste unterstützte und vom Browser bevorzugte Format).

Das ist das „gut genug“, und das ist es oft auch.

Aber es ist nicht perfekt. Neue iPads sind groß und können 2,5-fache oder sogar 3-fache Bilder verwenden. Andererseits benötigt ein Standard-Firmen-Lenovo ThinkPad diese zusätzlichen Details nicht und ein 1×-Bild ist perfekt.

Und ehrlich gesagt ist das alles in Ordnung für manuelle Arbeit. Niemand kann 15 Minuten mit einem einzigen Bild verbringen.

Automatisierung bis zur Perfektion

Für mein perfektionistisches Gehirn ist „gut genug“ nicht das, was der Ausdruck aussagt. Da einige unserer Kunden in hart umkämpften Branchen tätig sind, haben wir begonnen, nach Optionen zu suchen. Es dauerte nicht lange. Wir wussten bereits, dass Browser HTTP-Header senden, die die von ihnen unterstützten Bildformate angeben.

Wir mussten herausfinden, dass das Das Element kann Bilder basierend auf der Pixeldichte eines bestimmten Bildschirms laden. Das ist mit serverseitigem Rendering kaum möglich und eine Anpassung von src über JavaScript kommt aus einer Vielzahl von Gründen nicht in Frage.

Damit haben wir alles, was wir brauchen:

Formate, die der Server bereitstellen kann.
Abmessungen des vom Front-End-Entwickler angeforderten Bildes.
Pixeldichte des Displays.

Der Prozess

So haben wir den Bildoptimierungsprozess automatisiert:

Jeden Bild-Upload akzeptieren

Wir lassen Entwickler und Administratoren jedes gewünschte Bild hochladen und speichern (natürlich sind Entwickler vorsichtiger, müssen es sein). Unser System kann mit allem umgehen – sogar mit dem 250-MB-JPEG direkt von einer DSLR-Kamera, das wir erfolgreich konvertieren und in der Größe ändern konnten und dann in Gelächter ausbrachen, als wir die Protokolle sahen.
Automatisierte Konvertierung und Komprimierung

Sobald ein Bild hochgeladen ist, führt unser System automatisch Folgendes aus:

Konvertiert es in mehrere Formate: PNG, WebP und AVIF.
Komprimiert jede Version mit einer Qualitätseinstellung von 90 %.

Warum 90 %? Denn die letzten 10 % der Qualität führen oft zu stark sinkenden Erträgen. Sie sparen erheblich Speicherplatz und Bandbreite, ohne sichtbare Unterschiede in der visuellen Qualität.

Mehrere Auflösungen generieren

Für jedes Bild generieren wir mehrere Größen basierend auf Pixeldichte-Multiplikatoren:

1×
1,5×
2×
3×

Dadurch wird sichergestellt, dass Geräte mit hochauflösenden Bildschirmen scharfe Bilder erhalten, während andere Bilder in angemessener Größe erhalten.

Und zur Zukunftssicherheit fügen wir einfach Zahlen hinzu oder ändern sie und alles läuft automatisch ab (wir machen noch keine VR-/AR-Inhalte, aber ich vermute, dass das die Technologie ist, bei der es nützlich sein wird).

Dynamische Bildbereitstellung

In unseren HTML-Vorlagen geben wir die gewünschten Bildmaße (Breite oder Höhe) an. Unser serverseitiger Code dann:

Überprüft, ob die optimierten Bilder vorhanden sind.
Wenn nicht, werden sie zur Verarbeitung in die Warteschlange gestellt.
Erzeugt das entsprechende Element mit Srcset für Pixeldichten.

Der Browser wählt automatisch das beste Bild basierend auf den Fähigkeiten des Geräts aus.

Das Ergebnis sieht so aus:

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

Nach dem Login kopieren

Umgang mit großen Bildern

Wenn wir als Entwickler eine perfekte Größenänderung und Konvertierung von Bildern vermeiden, können wir nicht erwarten, dass normale Administratoren oder Kunden dies tun. Deshalb lassen wir die Leute hochladen, was sie wollen, und wir verarbeiten es (gute UX und Kundenbeziehungen).

Anfangs hatten wir nicht damit gerechnet, dass die Größenänderung so intensiv sein würde, und haben unseren Demoserver ein paar Mal komplett lahmgelegt. Deshalb haben wir diesen Ansatz entwickelt:

Wir haben einen einfachen API-Dienst auf einem separaten Low-End-VPS speziell für die Bildverarbeitung entwickelt.
Unsere Produktionsserver senden das Bild und die gewünschten Formate/Größen an diesen Dienst.
Die verarbeiteten Bilder werden zurückgegeben und zur Bereitstellung gespeichert.

Das Ergebnis

Benutzer sind zufrieden: Bilder werden schnell geladen und sehen auf jedem Gerät großartig aus.
Administratoren sind zufrieden: Sie müssen sich vor dem Hochladen keine Gedanken über die Größenänderung oder Optimierung von Bildern machen.
Entwickler sind zufrieden: Der Prozess ist automatisiert, ohne dass zusätzliche Arbeit erforderlich ist.
Server sind zufrieden: Reduzierter Bandbreitenverbrauch und CPU-Last für die Bereitstellung von Bildern.

Ich weiß, dass wir für die Größenänderung von Bildern jeden öffentlichen kommerziellen Dienst nutzen könnten, aber um ehrlich zu sein, war das ein Nachmittag voller Arbeit (was bedeutet: viel billiger) und wir haben alle Aspekte unter Kontrolle.

Veröffentlichen wir es kommerziell?

Wir sind mit dieser Lösung so zufrieden, dass wir darüber nachdenken, diesen Größenänderungs- und Konvertierungsdienst zu verfeinern und für Ihre Nutzung zu ermöglichen. Besteht Interesse an einem solchen Service? Lass es mich wissen. Vielleicht können wir viel sparen.

Für Entwickler, von Entwicklern –an dieser Stelle möglicherweise ein Meme, aber in diesem Fall die harte Wahrheit.

Der Kodex (vereinfacht)

Ich kann die Größenänderungsaspekte nicht mitteilen, aber ich kann Ihnen die Auswahl und zeigen. Schaffung. Wir arbeiten in PHP und so machen wir es.

Generieren des Element

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

Nach dem Login kopieren

Wir verwenden ein benutzerdefiniertes Vorlagensystem, bei dem HTML mit PHP gemischt wird (ich weiß, das ist nicht üblich, aber es funktioniert am besten für unsere Bedürfnisse).

<div>



<p>Dieser Code zeigt eine Logik. Was wir eigentlich tun, ist, dass wir eine Datenbank mit Dateien und deren Varianten haben, sodass wir statt mit Pfaden mit Arrays und Objekten arbeiten. Aber wie gesagt, das zeigt wunderbar die Logik unseres Handelns.</p>

<p>Und wie Sie sehen können, wenn der Front-End-Entwickler diesen Code schreibt oder <img> Tag, wen interessiert schon die aufgewendete Zeit.</p>

<h2>
  
  
  Lassen Sie uns auf Probleme hinweisen
</h2>

<p>Diese Methode ist so konzipiert, dass sie in der realen Welt keine Probleme verursacht. Aber es gibt zwei Verbesserungsbereiche, die ich kaum erwarten kann (wieder einmal aus der Sicht des Perfektionisten).</p>

<ol>
<li>
<p><strong>Doppelte Warteschlange</strong></p>

<p>Nach dem ersten Laden des Bildes im Frontend wird es zur Größenänderung in die Warteschlange gestellt. Wenn die Website viel Verkehr hat, kann sie tatsächlich zweimal in die Warteschlange gestellt werden. Im realen Einsatz ist es in Ordnung; es wird also zweimal verarbeitet. Auf stark frequentierten Websites kam es nur zweimal im Jahr vor.</p>
</li>
<li>
<p><strong>Erste Anzeige großer Bilder</strong></p>

<p>Wenn ein Administrator große Bilder hochlädt, dauert die Größenänderung und Konvertierung 5–10 Minuten, da dies in geplanten Aufgaben geschieht. Mittlerweile werden die großen Bilder auf ihren Webseiten angezeigt. Im realen Einsatz sieht es normalerweise nur der Administrator, da es oft eine Weile dauert, bis neue Inhalte von Benutzern aufgerufen werden. Auf stark frequentierten Websites verkürzen wir diesen Timer auf nur 1 Minute, also kein Problem.</p>
</li>
</ol>

<h2>
  
  
  Überlegungen zur Lagerung
</h2>

<p>Sie weisen vielleicht darauf hin, dass wir jetzt mehrere Bilder für jede Größe und jedes Format haben, was speicherintensiv sein kann. Wenn Ihre Website voller Bilder und Galerien ist und Sie für jedes einzelne Miniaturansichten und detaillierte Bilder benötigen, wird dies viel Speicherplatz beanspruchen.</p>

<p>Aber Speicherplatz ist heutzutage die günstigste Komponente. Die Vorteile in Bezug auf Leistung und Benutzererfahrung überwiegen in der Regel bei weitem die Kosten. Und damit haben Sie Ihre CPU- und gesamte Infrastrukturlast gesenkt.</p><p><strong>Eine Randbemerkung –</strong> Warum sich um die Infrastruktur kümmern? Jemand anderes kümmert sich darum, oder? Das ist es, was ich oft höre. Die einfache Tatsache ist, dass es nicht wahr ist. Wenn ein Hosting-Unternehmen aufgrund der erhöhten Auslastung ohne mehr Kunden Hardware für eine höhere Bandbreite hinzufügen muss, kann es dies nicht aufrechterhalten und gibt diese Kosten gerne an die Servermieter weiter.</p>

<h2>
  
  
  Unsere realen Ergebnisse und Erfahrungen
</h2>

<p>In der Google Search Console sind Core Web Vitals umweltfreundlicher als je zuvor, die Ladezeiten sind im Allgemeinen viel kürzer und die Sitzungszeiten der Besucher höher (ein paar Prozent, aber ich nehme es in Kauf!). Und es entsteht kein zusätzlicher Aufwand für Entwickler oder Admins – alles funktioniert einfach reibungslos.</p>

<p>Ich empfehle jedem Entwickler dringend, so etwas zu verwenden. Es hat viel für uns getan, während wir eigentlich vergessen konnten, dass dieses Ding im Hintergrund existiert und seine Arbeit erledigt. Und ich schreibe diesen Artikel buchstäblich länger, als alle Systeme einzurichten und zu polieren.</p>

<h2>
  
  
  Abschluss
</h2>

<p>Durch die Automatisierung der Bildoptimierung haben wir Folgendes erreicht:</p>

Nach dem Login kopieren

Perfekte Bildbereitstellung, maßgeschneidert für jedes Gerät.
Verbesserte Seitenladezeiten und Benutzererfahrung.
Reduzierter manueller Aufwand für Entwickler.

Wenn Sie genug von der lästigen Bildoptimierung haben, denken Sie darüber nach, den Prozess zu automatisieren. Es ist eine Win-Win-Situation für alle Beteiligten.

Verwenden Sie systemische Lösungen für Ihre Bilder?

Oder konvertieren Sie sie manuell?

Haben Sie AVIFs ausprobiert? Sie haben erstaunliche Vorteile für größere Bilder.

Das obige ist der detaillierte Inhalt vonWeb-Bilder: Perfekt (und automatisch) in der Größe ändern und konvertieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!