suchen
HeimWeb-FrontendCSS-TutorialSquoosh: 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
    Vollbildmodus aufrufen Vollbildmodus verlassen
  3. Dann erstellen Sie die App, indem Sie Folgendes ausführen:
    npm run build
    Vollbildmodus aufrufen Vollbildmodus verlassen
  4. Starten Sie nach dem Erstellen den Entwicklungsserver, indem Sie Folgendes ausführen:
    npm run dev
    Vollbildmodus aufrufen Vollbildmodus verlassen

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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ankerpositionierung kümmert sich nur um die QuellenreihenfolgeAnkerpositionierung kümmert sich nur um die QuellenreihenfolgeApr 29, 2025 am 09:37 AM

Die Tatsache, dass die Ankerpositionierung die HTML-Quellenreihenfolge vermeidet, ist so CSS-y, weil sie eine weitere Trennung von Bedenken zwischen Inhalt und Präsentation ist.

Was bedeutet Margin: 40px 100px 120px 80px?Was bedeutet Margin: 40px 100px 120px 80px?Apr 28, 2025 pm 05:31 PM

In Artikel wird die CSS -Margin -Eigenschaft erörtert, insbesondere "Margin: 40px 100px 120px 80px", seine Anwendung und Auswirkungen auf das Webseitenlayout.

Was sind die verschiedenen CSS -Grenzeigenschaften?Was sind die verschiedenen CSS -Grenzeigenschaften?Apr 28, 2025 pm 05:30 PM

In dem Artikel werden die CSS -Grenzeigenschaften erörtert und sich auf Anpassung, Best Practices und Reaktionsfähigkeit konzentriert. Hauptargument: Border-Radius ist für reaktionsschnelle Designs am effektivsten.

Was sind CSS -Hintergründe, listen Sie die Eigenschaften auf?Was sind CSS -Hintergründe, listen Sie die Eigenschaften auf?Apr 28, 2025 pm 05:29 PM

In dem Artikel werden CSS -Hintergrundeigenschaften, deren Verwendungszwecke für die Verbesserung des Website -Designs und die zu vermeidenen Fehler erläutert. Der Hauptaugenmerk liegt auf reaktionsschnellem Design unter Verwendung der Hintergrundgröße.

Was sind CSS HSL -Farben?Was sind CSS HSL -Farben?Apr 28, 2025 pm 05:28 PM

In Artikel werden CSS HSL -Farben, ihre Verwendung im Webdesign und die Vorteile gegenüber RGB erörtert. Der Schwerpunkt liegt auf der Verbesserung des Designs und der Zugänglichkeit durch intuitive Farbmanipulation.

Wie können wir Kommentare in CSS hinzufügen?Wie können wir Kommentare in CSS hinzufügen?Apr 28, 2025 pm 05:27 PM

In dem Artikel wird die Verwendung von Kommentaren in CSS erörtert, in denen Einzellinien- und Multi-Line-Kommentarsyntaxe beschrieben werden. Es wird argumentiert, dass die Kommentare die Lesbarkeit, die Wartbarkeit und die Zusammenarbeit von Code verbessern, sich jedoch auf die Leistung der Website auswirken können, wenn sie nicht ordnungsgemäß verwaltet werden.

Was sind CSS -Selektoren?Was sind CSS -Selektoren?Apr 28, 2025 pm 05:26 PM

In dem Artikel werden CSS -Selektoren, ihre Typen und die Verwendung zum Styling von HTML -Elementen erörtert. Es vergleicht ID- und Klassenauswahlern und befasst sich mit Leistungsproblemen mit komplexen Selektoren.

Welche Art von CSS hat die höchste Priorität?Welche Art von CSS hat die höchste Priorität?Apr 28, 2025 pm 05:25 PM

In dem Artikel wird die CSS -Priorität erläutert und sich auf Inline -Stile mit der höchsten Spezifität konzentriert. Es erklärt Spezifitätsniveaus, übergeordnete Methoden und Debugging -Tools zur Verwaltung von CSS -Konflikten.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor