So optimieren Sie Bilder in Ihrer Laravel-Anwendung

Einer der wichtigsten Aspekte bei der Optimierung Ihrer Anwendung oder Website für Suchmaschinen ist die Verwendung von Bildern in der richtigen Größe für den praktischen Gebrauch.

Wenn Ihr Blog beispielsweise Bilder im Format 300 × 200 anzeigt und der Artikel allein das Bild im Format 1200 × 500 anzeigt, erwarten Suchmaschinen, dass die physischen Bilder in diesen Formaten vorliegen auch in Bezug auf das Dateiformat beeinflusst).

Wenn Ihre Anwendung jedoch Bilder anzeigt, die von Benutzern bereitgestellt wurden, kann es kompliziert sein, Prozesse zur Größenänderung und Optimierung dieser Dateien zu erstellen, weshalb es ratsam sein kann, einen externen Datenverarbeitungsdienst in Anspruch zu nehmen.

Im Jahr 2020 haben wir einen Online-Dienst zur Verarbeitung von Bilddateien geschaffen, mit dem Sie normalerweise komplexe Vorgänge auf vereinfachte Weise ausführen können. Wir werden analysieren, wie Sie diesen Dienst in Ihre Laravel-Anwendung integrieren können.

ZMD ist ein On-Demand-Online-Bildverarbeitungsdienst. Durch die Integration einiger Anweisungen in Ihren HTML-Code können Sie Vorgänge ausführen wie:

Größenänderung
Drehung
Ernte
Kontrastkorrektur
+ 18 Operationen verfügbar

Sehen Sie sich die Liste der verfügbaren Operationen an: https://zmd.io.

Ein Konto erstellen

Beginnen Sie mit der Erstellung eines Kontos 10 Tage kostenlos ohne Kreditkarte und unverbindlich: https://app.zmd.io/register

Domain hinzufügen

Um den ZMD-Service nutzen zu können, müssen Sie angeben, von welchem Domainnamen aus Sie arbeiten möchten, diese Domain muss physisch erreichbar sein, um funktionieren zu können, registrieren Sie Ihre Domains hier: https://app.zmd.io/domains

Paketkomponist

Wir haben ein Composer-Paket erstellt, um die Nutzung des zmd.io-Dienstes zu vereinfachen, dazu installieren Sie das Paket einfach mit dem folgenden Befehl:

Komponisten erfordern Superlativ / zmd-laravel

Mit der Installation dieses Pakets erhalten Sie Zugriff auf eine Blade-Direktive, mit der Sie die Javascript-Elemente integrieren können, die für das ordnungsgemäße Funktionieren des ZMD-Dienstes sowie für die Konfiguration Ihres Domänenschlüssels erforderlich sind.

HTML-/Blade-Integration

Fügen Sie in Ihrem HTML-/Blade-Template den unten stehenden Code direkt vor dem schließenden Tag ein </body>.

<html>
    <body>
    
        ... @zmdInit
    </body>
</html>

Domänenschlüssel konfigurieren

Wenn Sie Ihren Domainnamen hinzugefügt haben, wird Ihnen ein spezieller Code zur Verfügung gestellt. Dieser Code stellt die Verbindung zwischen Ihrer Site und ZMD her. Um Ihren Domainschlüssel hinzuzufügen, fügen Sie einfach den folgenden Schlüssel in Ihre .env-Konfigurationsdatei ein:

ZMD_DOMAIN_KEY = your_domain_key

Optimierung Ihrer Bilder

Es bleibt nur noch, den Code der zu optimierenden Bilder anzupassen, die durchzuführenden Operationen können Sie direkt im HTML-Code speichern, zum Beispiel sieht eine img-Datei in der Regel so aus:

...
<img src="https://example.com/myimage.jpg" alt="Meine Bildbeschreibung"/>
...

Ersetzen Sie nun das src-Attribut Ihres Tags und fügen Sie das Attribut hinzu, das die Operationen enthält, Ihr Code sieht so aus:

...
<img src="" data-zmd-src="https://example.com/myimage.jpg" data-zmd-op="w:800;h:550" alt="Meine Bildbeschreibung"/>
...

Beachten Sie, dass das Attribut src nicht mehr erforderlich ist, es wird automatisch vom ZMD-Skript hinzugefügt, um für den Browser gültig zu bleiben.

Die vollständige Liste der verfügbaren Operationen ist hier zugänglich:

https://zmd.io/documentation/operations/

Voila, Ihre Bilder werden jetzt automatisch an die Anforderungen Ihrer Anwendung angepasst.

Jetzt kostenloses ZMD-Konto erstellen

So optimieren Sie die Bilder Ihrer Laravel-Anwendung