Squoosh: ein Bildoptimierungstool für Ihre Website

?Index

1. Einführung
2. Was ist Squoosh?
3. Verzögertes Laden
4. Referenzen
5. Schlussfolgerungen

---

1. Einführung

Das Web zeichnet sich im Allgemeinen durch die Verwendung von Bildern aus. Haben Sie schon einmal eine Website besucht, die keine Bilder enthält? Ich versichere Ihnen, dass das nicht der Fall ist. Bilder sind die Multimedia-Inhalte schlechthin im Web. Daher ist es wichtig zu lernen, mit ihnen umzugehen, um eine optimale Website mit einem guten Benutzererlebnis bereitzustellen.

2. Was ist Squoosh?

Squoosh ist ein sicheres und benutzerfreundliches Open-Source-Tool, das vom Google Chrome-Entwicklungsteam entwickelt und gepflegt wird, um Bilder durch Reduzierung ihres Gewichts zu optimieren, ohne dabei die Präsentationsqualität für den Endbenutzer zu beeinträchtigen.

Wir können auf die offizielle Website zugreifen, auf der Sie Ihre Bilder hochladen und je nach Anwendungsfall mit deren Gewicht und Qualität spielen können.

Zum Beispiel laden wir ein Bild im .png-Format, das 1,62 MB wiegt, und nach dem Optimierungsprozess können wir dasselbe Bild mit einem Gewicht von 154 KB erhalten, was einer Optimierung von 90 % entspricht, indem wir einfach das Tool verwenden:

Wir können uns die Demo des Beispiels ansehen, um es zu überprüfen.

3. Verzögertes Laden

Eine weitere einfache Möglichkeit, die Bildoptimierung zu verwalten, besteht darin, Lazy Loading für Bilder zu verwenden, die nicht sofort in das Ansichtsfenster des Benutzers geladen werden. Dies bedeutet, dass die Bandbreite des Clients gespart wird, indem vermieden wird, Bilder anzufordern, die wahrscheinlich nicht benötigt werden.

Sehen wir uns ein einfaches Beispiel an:

Das letzte Bild im Beispiel wird standardmäßig nicht geladen, da es das Attribut „loading="lazy" hat. Dadurch wird es nur geladen, wenn der Benutzer scrollt, was dem Browser anzeigt, dass der Benutzer das Bild benötigt die Last.

Wie Sie sehen, ist es eine sehr einfache Möglichkeit, Bandbreite zu sparen, und zwar nativ mit reinem HTML.

4. Referenzen

Das offizielle Squoosh-Repository lautet wie folgt:

GoogleChromeLabs / Squoosh

Verkleinern Sie Bilder mit erstklassigen Codecs direkt im Browser.

Squoosh!

Squoosh ist eine Web-App zur Bildkomprimierung, die die Bildgröße durch zahlreiche Formate reduziert.

Datenschutz

Squoosh sendet Ihr Bild nicht an einen Server. Alle Bildkomprimierungsprozesse lokal.

Squoosh nutzt jedoch Google Analytics, um Folgendes zu erfassen:

• Grundlegende Besucherdaten.
• Der Vorher- und Nachher-Bildgrößenwert.
• Wenn Squoosh PWA, die Art der Squoosh-Installation.
• Bei Squoosh PWA die Installationszeit und das Installationsdatum.

Entwicklung

Um für Squoosh zu entwickeln:

1. Klonen Sie das Repository
2. Um Knotenpakete zu installieren, führen Sie Folgendes aus:

   npm install
3. Dann erstellen Sie die App, indem Sie Folgendes ausführen:

   npm run build
4. Starten Sie nach dem Erstellen den Entwicklungsserver, indem Sie Folgendes ausführen:

   npm run dev

Mitwirken

Squoosh ist ein Open-Source-Projekt, das jede Beteiligung der Community schätzt. Um zum Projekt beizutragen, folgen Sie der Beitragsanleitung.

Auf GitHub ansehen

5. Schlussfolgerungen

Der Einsatz von Open-Source-Tools zur Optimierung der Bilder einer Website ist sehr wichtig, um deren Leistung zu verbessern. In Kombination mit nativen HTML-Funktionen wie Lazy Loading führt dies zu einer erheblichen und äußerst einfachen Leistungsverbesserung.

---

Andere Beiträge meiner Autorschaft, die Sie interessieren könnten:

Exklusive native Akkordeons in HTML5?

Cristian Fernando ・ 10. Januar

#webdev #html #css #Frontend

Kurzanleitung: Tipps zum Erstellen guter Commit-Nachrichten in Git?

Cristian Fernando ・20. Dezember 2024

#git #github #gitlab #Spanisch

Wie erstelle ich einen SSH-Schlüssel und verbinde ihn mit Github unter Windows? ?

Cristian Fernando ・13. Dezember 2024

#github #git #Spanisch #gitlab

Das obige ist der detaillierte Inhalt vonSquoosh: ein Bildoptimierungstool für Ihre Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!