Verbesserung der Leistungswahrnehmung: On-Demand-Bildänderung

Dieser Artikel ist Teil einer Serie zum Erstellen einer Beispielanwendung-einem Multi-Image-Galerie-Blog-für Leistungsbenchmarking und Optimierungen. (Sehen Sie sich das Repo hier an.)

---

Wir haben eine Beispielanwendung-ein Multi-Image-Galerie-Blog-für Leistungsbenchmarking und Optimierungen erstellt. Zu diesem Zeitpunkt serviert unsere Anwendung das gleiche Bild, unabhängig von der Auflösung und Bildschirmgröße, in der sie serviert wird. In diesem Tutorial zur Änderung des Bildgrößens werden wir je nach Anzeigegröße eine Änderung der Änderung ändern.

Key Takeaways

• Verwenden Sie SRCSET, um reaktionsschnelle Bilder zu aktivieren, die die Größe basierend auf dem Bildschirm des Betrachters anpassen und die Ladezeiten und die Leistung verbessern, ohne die Qualität zu beeinträchtigen.
• Implementieren Sie On-Demand-Bild-Größenänderung mit Glide, um den Serverspeicher effizient zu verwalten, indem Sie Bilder an angeforderten Größen nur nach Bedarf generieren.
• Verbesserung der Benutzererfahrung, indem Sie JavaScript verwenden, um SRCSet -Attribute in Bildmodalen dynamisch anzuwenden, um sicherzustellen, dass optimale Bildgrößen in verschiedenen Betrachtungskontexten verwendet werden.
• optimieren Sie Miniaturansichten für das schnelle Laden auf der Startseite, indem Sie eine feste kleinere Größe festlegen, während größere, detaillierte Bilder bei der Benutzerinteraktion ermöglicht werden.
• Berücksichtigen Sie die Integration der Bildgröße in die Architektur der Anwendung, um die Gebrauchsnutzung der Bandbreite zu verringern und die Gesamtreaktionsfähigkeit der Website zu verbessern.

objektiv

Es gibt zwei Stufen in dieser Verbesserung.

1. Wir müssen alle Bilder reagieren, wo immer dies nützlich sein könnte. Ein Ort sind die Miniaturansichten auf der Startseite und auf den Galerie-Seiten. Ein anderes ist das Bild in voller Größe, wenn ein einzelnes Bild in der Galerie klickt.
2. Wir müssen unserer App die Größenänderung hinzufügen. Es geht darum, ein Bild im laufenden Fliegen zu erzeugen, wie es verlangt wird. Dadurch wird nicht beliebte Bilder davon abgehalten, unsere Festplatte zu verschmutzen, und es wird sicherstellen
reaktionsschnelle Bilder?

Wie dieser Beitrag erklärt, sind Bilder im modernen Web unglaublich komplex. Anstelle von nur aus den alten Tagen haben wir jetzt etwas Verrücktes wie folgt:

Eine Kombination aus SRCSET, Bild und Größen ist in einem Szenario erforderlich, in dem Sie zweifelhaft sind, dass, wenn Sie dasselbe Bild für eine kleinere Bildschirmgröße verwenden, das primäre Thema des Bildes zu klein werden kann. Sie möchten ein anderes Bild in einer anderen Bildschirmgröße anzeigen (stärker auf das primäre Motiv), aber dennoch separate Vermögenswerte desselben Bildes basierend auf dem Gerät-Pixel-Verhältnis anzeigen und möchten die Höhe und Breite des bildbasierten Bildes anpassen auf Ansichtsfenster.

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Da unsere Bilder Fotos sind und wir immer möchten, dass sie in ihrer standardmäßigen DOM-spezifizierten Position stehen, die das Maximum ihres übergeordneten Containers auffüllen, müssen wir kein Bild benötigen (wodurch wir eine alternative Quelle für eine andere Auflösung oder eine andere Auflösung oder eine andere Auflösung definieren können Browserunterstützung - wie der Versuch, SVG zu rendern, dann PNG, wenn SVG nicht unterstützt wird) oder Größen (mit der wir definieren können, welcher Ansichtsort -Teil ein Bild besetzen sollte). Wir können mit der Verwendung von srcset einfach davonkommen, was je nach Bildschirmgröße eine Version desselben Bildes mit unterschiedlicher Größe lädt.

srcset addieren

Der erste Ort, an dem wir Bilder begegnen, befindet sich in Home-Galleries-Lazy-load.html.twig, die teilweise Vorlage, die die Galerienliste des Startbildschirms rendert.

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Wir können hier sehen, dass der Link des Bildes aus einem Zweigfilter abgerufen wird, der in der Datei SRC/Twig/ImagerendereExtextension.php zu finden ist. Es nimmt die ID des Bildes und den Namen der Route (definiert in der Annotation in der ServiceAtaction -Route von ImageController) und generiert eine URL basierend auf dieser Formel:/Image/{ID}/RAW -> Ersetzen {ID} durch die angegebene ID:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

ändern wir das in Folgendes:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Jetzt haben alle unsere Bild -URLs --x als Suffix, wobei X ihre Größe hat. Dies ist die Änderung, die wir auch für unser IMG -Tag in Form von SRCSET anwenden. Ändern wir es in:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Wenn wir die Startseite jetzt aktualisieren, werden wir die neuen Größen des SRCSET bemerken:

Dies wird uns jedoch nicht viel helfen. Wenn unser Ansichtsfenster breit ist, fordert dies Bilder in voller Größe, obwohl sie Miniaturansichten sind. Anstelle von SRCSet ist es hier besser, hier eine feste kleine Miniaturgröße zu verwenden:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Wir haben jetzt Miniaturansichten auf Demand, aber die zwischen ihnen erzeugt und abgerufen werden.

Lassen Sie uns jetzt andere SRCSet -Standorte aufsuchen.

In Vorlagen/Galerie/Einzelgallery.html.twig wenden wir die gleiche Lösung wie zuvor an. Wir haben es mit Miniaturansichten zu tun. Verschlüsseln wir also einfach die Datei, indem wir den Größenparameter in unseren GetImageurl -Filter hinzufügen:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Und jetzt für die SRCSet -Implementierung endlich!

Die einzelnen Bildansichten werden mit einem JavaScript-Modalfenster am unteren Rand derselben Einzelgalerieansicht:

gerendert:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Es gibt einen Anhangsanruf, der das IMG -Element in den Körper des Modals hinzufügt. Hier muss unser SRCSet -Attribut gehen. Da jedoch unsere Bild -URLs dynamisch generiert werden, können wir den Zweigfilter nicht wirklich aus dem Skript aufrufen. Eine Alternative besteht darin, das SRCSet in die Miniaturansichten hinzuzufügen und es dann im JS zu verwenden, indem sie es aus den Daumenelementen kopiert, aber dies würde nicht nur die Bilder in voller Größe im Hintergrund der Miniaturansichten laden (weil unser Ansichtsfenster breit ist). , aber es würde auch den Filter für jedes Miniaturansichten anrufen und die Dinge verlangsamen. Erstellen wir stattdessen einen neuen Zweig -Filter in SRC/Twig/ImagerendereExtension.php, mit dem das vollständige SRCSet -Attribut für jedes Bild generiert wird.

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Wir dürfen nicht vergessen, diesen Filter zu registrieren:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Wir müssen diese Werte in ein benutzerdefiniertes Attribut hinzufügen, das wir für jedes einzelne Miniaturansicht aufrufen:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Jetzt hat jede einzelne Miniaturansicht ein Daten-Srcset-Attribut mit den erforderlichen SRCSet-Werten. Dies ist jedoch nicht ausgelöst, da es sich in einem benutzerdefinierten Attribut befindet, Daten, die später verwendet werden sollen.

Der letzte Schritt ist die Aktualisierung der JS, um dies zu nutzen:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Gleitfügen

hinzugefügt

Glide ist eine Bibliothek, die das tut, was wir wollen-On-Demand-Bildänderung. Lassen Sie es installieren.

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Registrieren wir es als nächstes in der App. Wir tun dies, indem wir einen neuen Dienst in SRC/Dienste mit folgenden Inhalten hinzufügen:

<span><span><span><img</span> src<span>="{{ image|getImageUrl(250) }}"</span> alt<span>="{{ image.originalFilename }}"</span>
</span></span><span>    <span>class<span>="single-gallery__item-image card-img-top"</span>></span>
</span>

Der Service verbraucht den bereits deklarierten Filemanager-Dienst, der aufgrund des neuen Ansatzes von Symfony automatisch injiziert wird. Wir deklarieren sowohl den Eingangs- als auch den Ausgangspfad als Uploadsdir, geben dem Ausgang ein Cache -Suffix und fügen eine Methode für die Rückgabe des Servers hinzu. Der Server ist im Grunde die Instanz von Glide, die die Größenänderung durchführt und ein Bild in der Größe verändert hat.

Wir müssen die GetUploadsDirectory -Methode in Filemanager öffentlich vornehmen, da sie derzeit privat ist:

{% block javascripts %}
    {{ parent() }}

    <span><span><span><script</span>></span><span>
</span></span><span><span>        <span>$(function () {
</span></span></span><span><span>            <span>$('.single-gallery__item-image').on('click', function () {
</span></span></span><span><span>                <span>var src = $(this).attr('src');
</span></span></span><span><span>                <span>var $modal = $('.single-gallery__modal');
</span></span></span><span><span>                <span>var $modalBody = $modal.find('.modal-body');
</span></span></span><span><span>
</span></span><span><span>                $modalBody<span>.html('');
</span></span></span><span><span>                $modalBody<span>.append($('<img src="' + src + '" >'));
</span></span></span><span><span>                $modal<span>.modal({});
</span></span></span><span><span>            <span>});
</span></span></span><span><span>        <span>})
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>{% endblock %}

Schließlich modifizieren wir die ServiceAgeAction -Methode des ImageController, damit sie so aussieht:

<span>public function getImageSrcset(Image $image)
</span><span>{
</span>    <span>$id = $image->getId();
</span>    <span>$sizes = [1120, 720, 400];
</span>    <span>$string = '';
</span>    <span>foreach ($sizes as $size) {
</span>        <span>$string .= $this->router->generate('image.serve', [
</span>            <span>'id' => $image->getId() . '--' . $size,
</span>        <span>], RouterInterface<span>::</span>ABSOLUTE_URL).' '.$size.'w, ';
</span>    <span>}
</span>    <span>$string = trim($string, ', ');
</span>    <span>return html_entity_decode($string);
</span><span>}
</span>

Diese Methode explodiert nun die Bild-ID durch Double-Cash und trennt die Größe von der Bild-ID. Sobald die Doktrin den Filepath des Bildes aus der Datenbank abruft, wird die Größe wieder auf den Dateinamen angeschlossen, wenn man übergeben wurde, andernfalls wird das Originalbild verwendet. Wenn dieses Bild nicht vorhanden ist, wird man aus dem ursprünglichen Pfad erzeugt und für die spätere Verwendung gespeichert.

Für Demonstrationszwecke nutzen wir hier einen längeren Weg und generieren Dateien manuell, indem wir die Größe an diese angeben und in den Upload -Ordner speichern. Es ist zu beachten, dass Sie auch die Ausgangsmethode von Glide zum direkten Ausgang verwenden können, und es wird direkt aus dem Cache -Unterordner serviert, ohne es mit einem Suffix im Haupt -Upload -Ordner zu speichern. Sie können auch die MakeImage -Methode verwenden, um einfach das Bild zu erstellen und die alte Logik des Abrufens des Bildes übernehmen zu lassen. Das ist der Ansatz, den wir unten ausgewählt haben:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Unser On-Demand-Image-Ressizing-Geschäft ist betriebsbereit. Jetzt müssen wir nur noch testen.

testen

Sobald wir die Startseite aktualisieren, die jetzt etwas langsamer sein wird, werden die Bilder im Ordner var/Upload generiert. Schauen wir es uns an, ohne zur zweiten Seite zu scrollen.

Sicher genug, wir haben jetzt eine winzige Miniaturversion jedes Bildes auf der Startseite, und das ist das Bild, das serviert wird. Beachten Sie die kleinen Dateigrößen. Greifen wir nun auf eine Galerie zu und klicken Sie auf ein Bild, um eine große Version davon zu erhalten.

Ja, unser Bild wurde aus dem Original erzeugt.

Aber was ist mit Mobilgeräten? In modernen Browsern ist es einfach genug, den mobilen Modus einzuschalten. Versuchen wir, ein Galeriebild in der mobilen Ansicht zu öffnen und den Bildordner danach zu überprüfen.

Was ist, wenn wir die Orientierung ändern und dann den Ordner überprüfen?

Erfolg, die mobile Größe unseres Bildes wurde erfolgreich generiert, und das Vollbild -Bild von zuvor wurde wiederverwendet, da sich der Bildschirm unseres „Mobiles“ im Landschaftsmodus so groß befindet. On-Demand Srcset wurde erfolgreich implementiert!

Die App mit diesen vorhandenen Upgrades wurde als diese Version markiert.

Schlussfolgerung

In diesem Beitrag haben wir den Prozess der Optimierung von Bildern für die Lieferung an einer fototorientierten Stelle durchlaufen. Wir haben die Miniaturansichten auf fester Größe für die besten Ergebnisse aufbewahrt. Mit Vollbildbildern konzentrierten wir uns auf die Implementierung von SRCSET-eine einfache Ergänzung zu jeder modernen Website-zusammen mit Glide, einem On-Demand-Image-Größenpaket, das das schwere Anheben durchführen kann uns.

Aber wenn wir Bilder ändern, wäre es nicht klug, sie auch für Qualität und Größe automatisch zu optimieren, indem sie Metadaten entfernen? Und ist es wirklich die beste Option, sie bei Bedarf zu ändern, während der Benutzer wartet, oder gibt es einen weiteren, praktischeren Ansatz? Finden Sie es im nächsten Teil heraus.

häufig gestellte Fragen zur On-Demand-Bild-Größenänderung

Wie verbessert das Bild von On-Demand-Image die Größe der Website-Leistung? Anstatt das Bild in voller Größe zu laden, lädt die Website eine Version der Größe, die in den Bildschirm des Betrachters passt. Dies ist normalerweise kleiner und somit schneller zu laden. Dies verbessert nicht nur die Benutzererfahrung, indem die Wartezeiten reduziert werden, sondern auch die Bandbreite, was für Benutzer mit begrenzten Datenplänen besonders vorteilhaft sein kann.

Das herkömmliche Abbau von Bild umfasst die manuelle Änderung jedes Bildes, bevor es auf die Website hochgeladen wird. Dies kann zeitaufwändig und ineffizient sein, insbesondere für Websites mit einer großen Anzahl von Bildern. Auf der anderen Seite ist das On-Demand-Bild-Größenänderung automatisch die Bilder, wie sie vom Benutzer angefordert werden. Dies bedeutet, dass das gleiche Bild in verschiedenen Größen an verschiedene Benutzer bedient werden kann, abhängig von ihren spezifischen Anforderungen und Gerätemöglichkeiten. Bietet ein Bundle namens liipimaginebundle, mit dem Sie die Änderung der On-Demand-Image implementieren können. Sie können dieses Bundle mit Composer installieren und dann entsprechend Ihren Anforderungen konfigurieren. Das Bundle bietet eine Reihe von Filtern, mit denen Sie Bilder ändern können, einschließlich Skalierungs-, Ernte- und Miniaturansichtenfilter. Sie können diese Filter mit der Funktion 'appeapy_filter' in Ihren Vorlagen auf Ihre Bilder anwenden. Symfony. Dies kann mit dem VichUploaderBundle erfolgen, mit dem Sie die Größe automatisch im Hochladen von Bildern ändern können. Sie können das Bundle so konfigurieren, dass die Größe von Bildern auf eine bestimmte Größe oder einen Prozentsatz ihrer ursprünglichen Größe geändert wird. Dies kann besonders nützlich sein, wenn Sie sicherstellen möchten, dass alle auf Ihre Website hochgeladenen Bilder konsistent sind. Im Handel kann mit einem Service wie AWS Lambda erreicht werden. Sie können eine Lambda -Funktion einrichten, um die Größe automatisch zu ändern, da diese von Ihrem S3 -Bucket angefordert werden. Diese Funktion kann durch ein API -Gateway ausgelöst werden, das die angeforderte Bildgröße an die Funktion übergibt. Die Funktion wird dann das Originalbild von S3 abrufen, die Größe der angeforderten Größe ändern und das Bild der Größe an den Benutzer an den Benutzer zurückgeben.

Wie hoch sind die Vorteile der Verwendung eines CDN für das Bild von On-Demand-Bild-Größe? . CDNs verfügen über Server auf der ganzen Welt, was bedeutet, dass Bilder vom Server, der dem Benutzer am nächsten liegt, Bilder bedient werden können, wodurch die Latenz verringert wird. Darüber hinaus kann CDNs die geendeten Bilder mit der Größe der Größe zwischengegriffen werden, was bedeutet, dass das gleiche Bild erneut direkt aus dem Cache serviert werden kann, wodurch die Leistung weiter verbessert wird. ? Schnelle Ladezeiten können die Benutzererfahrung verbessern, was ein Faktor ist, den Suchmaschinen beim Ranking von Websites berücksichtigen. Durch das Servieren von Bildern, die für das Gerät des Benutzers angemessen dimensioniert sind ? Mit responsivem Design passt sich das Layout Ihrer Website an die Größe des Benutzers. Mit On-Demand-Image-Größenänderung können sich die Bilder auf Ihrer Website auch an die Bildschirmgröße des Benutzers anpassen und sicherstellen, dass Ihre Website gut aussieht und auf allen Geräten gut funktioniert. Größenänderung? Eine davon ist die Verarbeitungsleistung, die für die Größe der Größe im laufenden Fliegen erforderlich ist, wodurch Ihren Server belastet werden kann, wenn Sie über eine Website mit hohem Verkehrshandel verfügen. Wenn Sie einen Dienst von Drittanbietern für die Größenänderung von On-Demand-Bild verwenden, können mit diesem Service Kosten verbunden sein. 🎜> Es gibt verschiedene Möglichkeiten, Ihr On-Demand-Image-Größen-Setup zu optimieren. Eine davon ist, eine CDN zu verwenden, die die geendeten Bilder zwischengegriffen und von einem Server in der Nähe des Benutzers dienen kann. Eine andere besteht darin, einen Dienst wie AWS Lambda zu verwenden, der die Größe der Bilder in der Cloud ändern kann, wodurch die Last auf Ihrem Server reduziert wird. Darüber hinaus können Sie Ihre Bilder optimieren, bevor Sie sie hochladen, beispielsweise, indem Sie ihre Qualität reduzieren oder ein effizienteres Dateiformat verwenden.

Das obige ist der detaillierte Inhalt vonVerbesserung der Leistungswahrnehmung: On-Demand-Bildänderung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!