Jeder kann es für grundlegende Bildoptimierungstechniken für jede Art von Website (einschließlich WordPress) verwenden. Inklusive vieler Fakten, Statistiken und Screenshots.
Im Juli 2021 gab es mehr als 1,94 Milliarden Websites. Dies ist ein großer Wettbewerb. Was ist ein guter Weg, um aufzufallen? Tolle Bilder. Tatsächlich dominiert das Sehen bei der Interaktion mit und der Aufnahme von Informationen alle anderen Sinne.
Hier sind drei kurze Fakten, die Ihnen helfen, die Bedeutung von Bildern für Menschen (und SEO) zu verstehen:
- 90% aller vom Gehirn übermittelten Daten sind visuelle Daten.
- Die Zeit, die das menschliche Gehirn benötigt, um Bilder zu verarbeiten, entspricht der Zeit, die es braucht, um 1000 Wörter zu lesen. (Ja, es stellt sich heraus, dass dieses alte Sprichwort tatsächlich auf wissenschaftlichen Fakten basiert.)
- Drei Tage später liegt der Wiedererkennungswert von visuellen Inhalten noch bei 65 %, während der Wiedererkennungswert von geschriebenem Text nur noch bei 10 % liegt.
Da der größte Teil des Suchvolumens von Mobiltelefonen stammt – die Aufmerksamkeitsspanne der Menschen sinkt auf 8 Sekunden – müssen Websites eine schnelle, reibungslose und ansprechende Benutzererfahrung bieten. Die Bildoptimierung ist ein wichtiger Teil dieses Puzzles.
Was kann die Bildoptimierung für meine Nutzer (und SEO) tun?
- Indem Sie die Geschwindigkeit der Website für einige Sekunden verlangsamen, können Sie die Absprungraten reduzieren und das Website-Engagement erhöhen.
- Es hilft, die Seitenladegeschwindigkeit zu erhöhen, was ein wichtiger Google-Ranking-Faktor ist. -Es kann helfen, Ihre Keyword-Prominenz zu verbessern.
- Es hilft bei der umgekehrten Bildsuche, was einen enormen Mehrwert darstellen kann, insbesondere wenn Sie ein produktbasiertes Unternehmen sind.
- Viele Geräte und Desktops verwenden hochauflösende Bildschirme, was die Nachfrage nach qualitativ hochwertigen Bildern erhöht.
Grundtechniken zum Optimieren von Bildern
Dies sind einige Tipps, die jeder auf jede Art von Website (einschließlich WordPress) anwenden kann, damit Sie sich nicht allein auf die Anmut von Entwicklern und Designern verlassen müssen.
1. Wählen Sie den richtigen Bildtyp: Vektor oder Raster?
Vektorbilder sind einfach und werden aus Linien, Punkten und Polygonen erstellt. Vektorbilder werden am besten für Formen, Logos, Symbole und flache Bilder verwendet. Beim Heranzoomen sind sie kaum verpixelt, was sie für hochauflösende Geräte geeignet macht. Darüber hinaus können Sie dieselbe Bilddatei auf mehreren Plattformen (und im responsiven Website-Design) verwenden, ohne mehrere Variationen verwenden zu müssen.
Rasterbilder hingegen sind aus rechteckigen Rastern zusammengesetzte Bilder, die jeweils mit mehreren Farbwerten (Pixeln) gefüllt sind. Rasterbilder verleihen den Bildern, die Sie vermitteln möchten, Tiefe, Emotion und psychologische Anziehungskraft, da sie echt aussehen. Wenn sie jedoch nicht richtig behandelt werden, beeinträchtigen sie die Ladegeschwindigkeit Ihrer Website erheblich! Darüber hinaus müssen Sie möglicherweise mehrere Dateivarianten speichern, um sicherzustellen, dass sie auf verschiedenen Plattformen kompatibel und für das responsive Design geeignet sind.
2. Wählen Sie das beste Bildformat – SVG, JPG, PNG oder GIF?
Das beste Format für Vektorgrafiken: SVG ist die einzige und beste Wahl für Vektorbilder. Dank der flachen Bilddarstellung profitieren Sie zudem von der hohen Qualität, die sich einfach erweitern lässt.
Das beste Format für Rasterbilder:
PNG: Generieren Sie hochwertige Bilder mit großen Dateigrößen. Es wird nur empfohlen, wenn Sie jedes Detail des Bildes speichern möchten.
JPG: Generieren Sie qualitativ hochwertige Bilder mit einer kleinen Dateigröße. Dies sind jedoch verlustbehaftete Bilder, was bedeutet, dass Sie einige kleine Bilddetails dauerhaft verlieren. JPG ist zweifellos das bevorzugte Bildformat, es ermöglicht Ihnen das einfache Herunterladen und Hochladen von Bildern. Dies ist der häufigste Grund für sie – etwa 72,3% der Websites verwenden das JPG-Bildformat und die meisten Mobiltelefone speichern Bilder als “.JPG”-Dateien. Sie werden besonders für E-Commerce-Websites und soziale Medien empfohlen.
Gif: Wenn Sie nach Animationen suchen, ist GIF die ideale Wahl, da es 256 verschiedene Farben im 24-Bit-RGB-Farbraum unterstützt. Derzeit verwenden nur 26,6% der Websites das GIF-Format.
3. Größe des Bildes ändern
Wie ist das Seitenverhältnis?
Das Seitenverhältnis stellt die Breite und Höhe des Bildes dar und wird im Format “x:y” geschrieben.
Warum ist das wichtig?
Erinnern Sie sich an die Zeit, als Sie versuchten, ein Bild zu skalieren und es buchstäblich in unverhältnismäßige Ausmaße zu reißen? Deshalb spart es Sie. Wenn Sie beim Zuschneiden oder Ändern der Größe eines Bildes auf das Seitenverhältnis verweisen, können Sie die Machbarkeit und Ästhetik der Bildgröße beibehalten.
4. Benennen von Bildern – Best Practices
Suchmaschinen haben Gehirne ohne Augen. Wenn Sie Ihr Bild also nicht richtig benennen, können sie Ihr Bild nicht “lesen” und Sie werden nicht entsprechend eingestuft. Hier erscheinen Ihre Keywords. Wie ich oben erwähnt habe, können Sie die Keyword-Dichte und die Chancen auf ein Ranking erhöhen, wenn Sie Ihre Bilder benennen. Lassen Sie uns dies an einem Beispiel erklären:
Wie speichern Menschen normalerweise Bilder – “Zufallszahlen und Buchstaben”, “Blumentanz” und “Was denke ich?”
Wie soll man Bilder speichern – fünf Tipps zur Bildoptimierung im Jahr 2021 und die ideale Methode zur Bildbenennung
Benennen Sie Ihr Bild mit allen Kleinbuchstaben, mit Bindestrichen dazwischen und ohne Leerzeichen. Wie Sie sehen, habe ich im Beispiel “Fünf Tipps zur Optimierung von Bildern” das Stichwort “Bildoptimierung” verwendet. Sie werden überrascht sein, wie sehr das beim Ranking hilft.
Bonus
Sie können auch Folgendes verwenden, um die Verwendung von Schlüsselwörtern im Seiteninhalt zu verbessern:
- Alternativ-Text (Wenn Ihr Bild langsam geladen wird, wird dieser Text anstelle des Bildes angezeigt, um Benutzern mitzuteilen, was dort angezeigt werden soll.)
- Titel (Text, der eine kurze Beschreibung enthält und den Benutzern hilft, mehr über das Bild zu erfahren).
Wenn Sie eine E-Commerce-Website haben, können Sie sogar strukturierte Daten verwenden, um Suchmaschinen spezifischere Informationen zu Farben, Typen, Größen und weiteren Produkten bereitzustellen.
5. Die Bytegröße der komprimierten Bilddatei
Das Komprimieren von Dateien ist wahrscheinlich der einfachste, aber auch der wichtigste Teil der Bildoptimierung, da es direkt mit der Ladezeit der Website zusammenhängt. Der erste bis vierte Punkt bereiten die letzte Stufe der Bildoptimierung vor.
Zwei Beispiele dafür, wie viel Ladezeit Ihr Endergebnis aufwenden kann:
- Pro 100 Millisekunden Erhöhung der Seitenladezeit sinken die Verkäufe von Amazon.com um 1%.
- Die Suchzeit zeigt, dass der Umsatz von Google pro 500 Millisekunden Zeiterhöhung um 20 % sinkt.
Was ist die ideale Bilddateigröße?
Dateigrößen unter 70 kb sind Ihr Ziel. Für große Dateien mit einer Größe von fast 300 KB ist die beste erreichbare Dateigröße 100 KB. Dadurch können Sie Ihre Bildladezeit sparen und erhalten gleichzeitig verlustbehaftete komprimierte Bilder, die die visuelle Qualität nicht beeinträchtigen.
Wie kann man die Dateigröße eines Bildes reduzieren?
Alles, was Sie tun müssen, ist, diese Dateien auf die Dateikomprimierungs-Site zu stellen und alles ist fertig. Dies sind einige gute kostenlose Online-Tools zur Komprimierung von Bilddateien:
TinyPNG / TinyJPG-(.png- und .jpg-Dateien komprimieren – 135 kb auf 43,9 kb reduziert – kann bis zu 20 Bilder gleichzeitig verarbeiten – unterstützt Dropbox)
Image Optimizer-(.png- und .jpg-Dateien komprimieren – 135 kb auf 49 kb reduziert – nur 1 Datei kann gleichzeitig verarbeitet werden)
WeCompress-(Komprimiere .png, .jpg und andere Dateien – 135 kb reduziert auf 48 kb – nur eine Datei wird gleichzeitig komprimiert)
EzGif-(Komprimieren Sie .gif und andere Dateien – 2 MiB reduziert auf 1,77 MiB – nur 1 Datei kann gleichzeitig verarbeitet werden. Sie können das Gif auch bearbeiten, bevor Sie es komprimieren.)
Bonus-Tipps
Verwenden Sie Webfonts anstelle von Bildern mit Text, weil sie besser aussehen, nicht mit dem Bild skaliert werden müssen, weniger Platz beanspruchen und Ladezeit sparen. Verwenden Sie für Ihre Bilder eine Auflösung von 72 dpi.
Abschließende Bemerkungen
Sie können all diese Bildoptimierungstechniken verwenden, bleiben aber trotzdem auf einer Website mit einer Ladezeit von 13 Sekunden oder schlechter hängen.
Zu diesem Zeitpunkt möchten Sie sich vielleicht fragen:
- Brauche ich all diese Bilder?
- Welche Bilder sind überflüssig?
- Was ist der beste Ort, um Bilder auf der Website zu platzieren?
Website-Inhalte, ob visuell oder schriftlich, haben eine verflochtene Beziehung, die Emotionen wecken und Menschen dazu inspirieren kann, sich weiter an Ihren Produkten oder Dienstleistungen zu beteiligen. Die Leute (oder zumindest ich) beurteilen ein Unternehmen nach seiner Website. Sagen Sie uns also bitte, welche beeindruckende Website Sie zuletzt besucht haben? Oder welche Bildoptimierung hast du gemacht?
