In einem früheren Artikel haben wir auf Seite über SEO gesprochen und zwei der Punkte, um die es ging, Bildoptimierung und Ladezeit, sind eng miteinander verbunden, da einer der einflussreichen Faktoren für die Ladezeit die Bildoptimierung ist. .
Im Tutorial werde ich zwischen grundlegender Bildoptimierung und erweiterten Optimierungen unterscheiden. Die Grundlegenden können sehr einfach von jedem erledigt werden, in WordPress gibt es sogar Plugins, die diese Aufgabe für uns erledigen. Erweiterte Optimierungen erfordern Grundkenntnisse in CSS und dies kann für einige ein Problem sein. Ich werde jedoch versuchen, dies so detailliert wie möglich zu erklären.
Grundlegende Bildoptimierung.
Vermeiden Sie eine Neuskalierung mit HTML mit Eigenschaften mit und Höhe.
Einer der häufigsten Fehler ist die Verwendung von neu skalierten Bildern mit HTML, d. H. Bilder mit einer Größe, die größer ist als die später im HTML-Code angegebenen Abmessungen.
Schauen wir uns ein Beispiel an, um es besser zu verstehen. Stellen Sie sich vor, wir haben ein Bild mit den Abmessungen 250 × 250 Pixel, das coche-250x250.jpg heißt coche-250x250.jpg und in unserem HTML-Code möchten wir dieses Bild in einer Lücke von 150 × 150 Pixel platzieren.
<img class="thumbnail" width="150" height="150" alt="imagen no optimizada" src="http://web.com/images/coche-250x250.jpg>
Wie wir im Code sehen, haben wir die Breite (width) und Höhe (height) bei 150 Pixel mit HTML-Code angegeben, während die Abmessungen des Bildes sich daran erinnern, dass sie 250 × 250 Pixel waren. Dies ist nicht optimal, da ein Bild mit 250 × 250 Pixel schwerer ist und das Herunterladen länger dauert als eines mit 150 × 150 Pixel. Um dies zu optimieren, müssen Sie, wie Sie vielleicht denken, ein Bild mit einer Größe von 150 × 150 Pixel verwenden, dh dieselbe Größe wie das Loch, in das das Bild eingefügt werden soll.
Ich muss klarstellen, dass ich nicht sage, dass die Eigenschaften with und height werden. Ich sage, dass sie korrekt verwendet werden müssen, dh so, dass sie der tatsächlichen Größe des Bildes entsprechen .
Beseitigen Sie unnötige Daten aus Bildern und komprimieren Sie sie vollständig.
Ein weiterer wichtiger Faktor ist die Größe der Bilder , da das Laden umso länger dauert, je schwerer sie sind. Die beste Möglichkeit, die Größe der Bilder, die wir auf unserer Website verwenden, zu verringern, ist die Verwendung des Yahoo-Dienstes Smush It.
Über den Link http://www.smushit.com/ysmush.it/ können wir auf diese Website zugreifen. Über den Uploader laden wir unsere Bilder hoch, um sie in wenigen Sekunden zu optimieren und eine Zip-Datei mit den optimierten Bildern zum Herunterladen bereitzustellen.
Ich muss klarstellen, dass mit Smush die Bildqualität nicht verloren geht , nur unnötige Metadaten entfernt werden und dann der Algorithmus der stärkeren Komprimierung verwendet wird, um die neuen optimierten Bilder zu generieren.
Für WordPress gibt es das WP Smush.it- Plugin, das für die transparente Optimierung von Bildern verantwortlich ist, ohne eingreifen zu müssen.
Verwenden Sie den Lightbox-Effekt, um große Bilder oder eine hohe Auflösung zu laden.
Das Hinzufügen von Bildern mit hoher Auflösung direkt zu unserer Website dauert sehr lange. Daher ist es empfehlenswert, Miniaturansichten dieser Bilder hochzuladen, die auf Bilder mit hoher Auflösung verweisen.
Im Rahmen dieser Optimierungsmaßnahme empfiehlt es sich, den Lightbox-Effekt zu verwenden , bei dem das hochauflösende Bild beim Klicken auf das Vorschaubild in ein Popup- oder Popup-Fenster geladen wird. Auf diese Weise können wir das Bild anzeigen, ohne den Artikel, den wir gerade lesen, zu verlassen.
Für WordPress gibt es viele Plugins, die für das Hinzufügen dieses Effekts zu Bildern und sogar zu anderen Elementen wie Videos verantwortlich sind.
Erweiterte Bildoptimierung.
Ersetzen Sie Bilder durch Verläufe mit dem entsprechenden CSS3-Code.
Heutzutage können Sie immer noch Menüleisten, Kopf- und Fußzeilenleisten usw. sehen, die ein Bild und die Eigenschaft repeat , um einen Hintergrundverlauf zu erstellen. Der CSS-Code dieser Leisten ähnelt:
background: url("images/gradient_bg.png") repeat-x;
Wir können auf diese Bilder verzichten und den entsprechenden CSS3-Code verwenden . Dazu können wir ein hervorragendes Online-Tool verwenden, mit dem wir die Parameter unseres Verlaufs in den meisten Adobe Photoshop-Stilen auswählen oder das Bild des Verlaufs und des Werkzeugs hochladen können Generiert automatisch CSS3-Code (mit verschiedenen Versionen für verschiedene Browser) . Beispielsweise kann der zuvor eingegebene CSS-Code durch einen Code ersetzt werden, der keine Bilder verwendet. Der Browser generiert den Verlauf selbst aus einem CSS3-Code wie z.
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 59%,#7db9e8 100%);
Die Seite des betreffenden Tools lautet: http://www.colorzilla.com/gradient-editor/
Verwendung von CSS-Sprites für Bilder.
Auf den Websites sind häufig Symbole (Kalender, Autor, Suche, RSS usw.) vorhanden. Diese Symbole werden in der Regel in separaten Bildern angezeigt, d. H. In einer Bilddatei für jedes Symbol. Das bedeutet, dass wir, wenn wir 10 Symbole anzeigen müssen, 10 Anfragen an 10 verschiedene URLs stellen müssen, was nicht nur die Ladezeit erhöht, sondern auch den Ressourcenverbrauch von unserem Server oder VPS erhöht.
Das obige Problem wird mit der Verwendung von CSS-Sprites gelöst, die nichts anderes als eine Sammlung von Bildern sind, die zu einem einzigen Bild zusammengefasst sind. Wenn zum Beispiel vor dem Laden von 10 Bildern nur ein Bild kombiniert wird, werden bei einer einzelnen Anforderung an eine URL alle Symbole angezeigt und gleichzeitig die Serverlast reduziert.
Wir müssen bedenken, dass CSS-Sprites eine Einschränkung aufweisen und nicht dazu dienen, Gelder mit der CSS-Repeat-Eigenschaft zu erstellen.
Zu verstehen, wie CSS-Sprites funktionieren, kann zunächst problematisch sein, insbesondere, um die Position des Bereichs anzugeben, den wir zuschneiden möchten. Ist das Konzept jedoch erst einmal verstanden, ist es sehr einfach. In diesem Handbuch werde ich nicht Schritt für Schritt erklären, wie ein CSS-Sprite erstellt wird, da dies das Ziel eines weiteren zukünftigen Tutorials sein wird. Wer jedoch neugierig ist und nichts dagegen hat, auf Englisch zu lesen, wird hier ausführlich erläutert .
Laden Sie Bilder von einem CDN hoch.
Es ist seit langem in Mode, Bilder (und andere statische Inhalte wie CSS-Dateien, Javascript usw.) von einem externen Server, der als CDN (Content Delivery Network) bekannt ist, bereitzustellen .
Was sie anbieten, ist ein Server, der sich nur mit der Bereitstellung statischer Ressourcen befasst , wodurch der Hauptserver von dieser Aufgabe befreit und die Ladezeit der Webseite verkürzt wird.
Unternehmen, die CDN-Dienste anbieten, verteilen diese Images auf verschiedenen Servern in verschiedenen Ländern. Wenn ein Benutzer ein Image herunterlädt, erfolgt dies vom Server im nächstgelegenen Land.
Es gibt kostenlose CDN-Dienste wie Cloudflare , über die wir bereits in einem früheren Artikel gesprochen haben. Um jedoch das volle Potenzial eines CDN auszuschöpfen, müssen Sie einen Dienst ohne Einschränkungen bezahlen.
Meiner Meinung nach macht diese Optimierung Sinn, wenn das Volumen und die Besuche sehr hoch sind und wir viel statischen Inhalt anbieten müssen, aber für einen persönlichen Blog sehe ich nicht viel Sinn.
Ich hoffe, Ihnen hat der Leitfaden zur Bildoptimierung gefallen und Sie fanden ihn nützlich. Wenn Sie Fragen, Kommentare oder Kritik haben, sind Sie herzlich willkommen. Ich möchte Sie dazu ermutigen, Ihre Meinung zu äußern.