So laden und komprimieren Sie Bilder in Laravel

Last updated 18. Oktober 2021

Inhalt

Komprimieren Sie Bilder mit TinyPNG in Laravel

Komprimieren Sie Bilder mit reSmush.it in Laravel

Suchen Sie nach dem Hochladen und Komprimieren von Bildern in Laravel? Laravel bietet eine einfache Möglichkeit zum Hochladen von Dateien. Das Komprimieren der Bilder beim Hochladen ist eine bewährte Vorgehensweise. In diesem Artikel zeige ich Ihnen, wie Sie Bilder in Laravel hochladen und komprimieren.

Warum müssen Bilder komprimiert werden?

Bilder spielen eine wichtige Rolle auf Ihrer Website. Bilder sorgen für eine bessere UX und ein auffälliges Erlebnis für die Besucher. Gleichzeitig kann es aber auch die Leistung der Website beeinträchtigen. Schwere Bilder verlangsamen die Site. Infolgedessen dauert das Laden Ihrer Website sehr lange. Benutzer mögen keine langsamen Websites. Wenn das Laden Ihrer Website länger dauert, ist die Wahrscheinlichkeit hoch, dass Sie Ihr Publikum verlieren. Die Standardladezeit für eine Website beträgt 2 Sekunden. Sie sollten darauf achten, dass Ihre Site innerhalb von 2 Sekunden geladen wird.

Obwohl einige Faktoren berücksichtigt werden müssen, um die Seitengeschwindigkeit zu verbessern, ist einer davon die Verwendung optimierter Bilder. Durch das Komprimieren von Bildern wird die Größe Ihres Originalbilds verringert, ohne dass die Qualität verloren geht. Es hilft, die Geschwindigkeit der Website zu erhöhen.

Sehen wir uns jedoch an, wie Sie Bilder in Laravel hochladen und komprimieren.

Hochladen von Bildern in Laravel

Laravel bietet eine saubere Möglichkeit, die Bilder hochzuladen. Um damit zu beginnen, müssen wir zunächst ein Verzeichnis erstellen, in dem wir die Bilder speichern. Öffnen Sie Ihre Eingabeaufforderung im Stammverzeichnis und führen Sie den folgenden Befehl aus.

php artisan storage:link

Dieser Befehl erstellt ein ‘storage’-Verzeichnis unter dem ‘public’-Ordner.

Erstellen Sie als Nächstes ein Formular mit der Dateieingabe- und Senden-Schaltfläche, indem Sie den folgenden Code in Ihre Blade-Datei einfügen.

<form action="{{ url('ROUTE_HERE') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Im obigen HTML habe ich eine Dateieingabe mit dem Namen ‘profile_image’ hinzugefügt. Ich habe auch hinzugefügt, {{ csrf_field() }}was zum Einreichen von Laravel-Formularen erforderlich ist.

Angenommen, Sie senden die Post-Anforderung an die store()Methode Ihres Controllers, schreiben Sie einen Code, der das Bild wie folgt auf dem Server speichert.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
 
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
 
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
 
        //Compress Image Code Here
 
        return redirect('ROUTE_HERE')->with('success', "Image uploaded successfully.");
    }
}

Dieser Code erstellt einen eindeutigen Dateinamen und speichert die Datei im Verzeichnis ‘profile_images’. Laravel generiert automatisch ein ‘profile_images’-Verzeichnis unter ‘public/storage’, wenn es nicht existiert.

Wie bereits erwähnt, ist es besser, das Bild zum Zeitpunkt des Hochladens zu optimieren. Wir sind mit dem Code zum Hochladen eines Bildes fertig. Jetzt müssen wir es komprimieren. Ich werde 2 Dienste behandeln – TinyPNG und reSmush.it, die die APIs zum Komprimieren von Bildern im laufenden Betrieb bereitstellen. Sehen wir sie uns einzeln an.

Komprimieren Sie Bilder mit TinyPNG in Laravel

Um Bilder mit der TinyPNG-API zu komprimieren, benötigen Sie Ihren API-Schlüssel. Der Prozess ist unkompliziert. Registrieren Sie Ihre E-Mail-Adresse bei ihnen und sie senden Ihren Entwicklerschlüssel.

Sobald Sie den API-Schlüssel erhalten haben, fügen Sie ihn in die .envDatei ein.

Installieren Sie danach ein TinyPNG-Paket mit dem Befehl:

composer require tinify/tinify

Bei der Paketinstallation müssen wir einen Code schreiben, der das hochgeladene Bild mit TinyPNG komprimiert.

Schreiben Sie einen Komprimierungscode direkt unter die Zeile, die das Bild hochlädt.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
 
try {
    TinifysetKey(env("TINIFY_API_KEY"));
    $source = TinifyfromFile($filepath);
    $source->toFile($filepath);
} catch(TinifyAccountException $e) {
    // Verify your API key and account limit.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyClientException $e) {
    // Check your source image and request options.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyServerException $e) {
    // Temporary issue with the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyConnectionException $e) {
    // A network connection error occurred.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(Exception $e) {
    // Something else went wrong, unrelated to the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
}

Der obige Code nimmt ein Bild aus dem hochgeladenen Verzeichnis, sendet es zur Komprimierung an den TinyPNG-Server und speichert das komprimierte Bild nach Erhalt einer Antwort im selben Verzeichnis.

Dieser Vorgang läuft im Hintergrund. Sie müssen sich keine Gedanken darüber machen, wie das Bild an den TinyPNG-Server gesendet wird und wie es die API-Antwort empfängt. Die TinyPNG-Bibliothek erledigt alle Aufgaben für Sie.

Versuchen Sie jetzt, das Bild hochzuladen, und Sie sollten sehen, dass Ihr Bild komprimiert wird.

Komprimieren Sie Bilder mit reSmush.it in Laravel

TinyPNG funktioniert gut, hat jedoch eine Beschränkung auf die Optimierung von 500 kostenlosen Bildern pro Monat. Wenn Sie mehr als 500 Bilder komprimieren möchten, müssen Sie dafür bezahlen. Alternativ können Benutzer einen kostenlosen Dienst von reSmush.it für die Bildkomprimierung auswählen. Zum Zeitpunkt der Erstellung dieses Artikels komprimiert reSmush.it mehr als 7 Milliarden Bilder. Dies ist genug, um über die Popularität dieses Dienstes zu sagen.

Schreiben Sie also den folgenden Code, der Bilder mit reSmush.it in Laravel komprimiert.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
$mime = mime_content_type($filepath);
$output = new CURLFile($filepath, $mime, $filenametostore);
$data = ["files" => $output];
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://api.resmush.it/?qlty=80');
curl_setopt($ch, CURLOPT_POST,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$result = curl_exec($ch);
if (curl_errno($ch)) {
    $result = curl_error($ch);
}
curl_close ($ch);
 
$arr_result = json_decode($result);
 
// store the optimized version of the image
$ch = curl_init($arr_result->dest);
$fp = fopen($filepath, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

Ich habe ?qlty=80im obigen Code den Qualitätswert als 80 übergeben. Sie können mit verschiedenen Qualitätswerten spielen.

Ich hoffe, Sie verstehen, wie Sie Bilder in Laravel hochladen und komprimieren. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net