Bilder sind eines der wichtigsten Elemente einer anständigen Website. Sie erregen die Aufmerksamkeit der Besucher, machen Ihre Inhalte besser teilbar und zwingen Ihre Nutzer, Maßnahmen zu ergreifen (z. B. beim Kauf Ihrer Produkte).

Wenn Sie jedoch Bilder mit hoher Auflösung oder solche mit großen Dateigrößen hinzufügen, kann dies dazu führen, dass Ihre Website langsamer wird und dem Endbenutzer eine schlechte Benutzererfahrung bietet. Es gibt wirklich keine Entschuldigung für eine schlechte Benutzererfahrung mit der Fülle von Tools, die Ihnen helfen können, Ihre Bilder ohne merklichen Qualitätsverlust zu komprimieren und sogar den Prozess für Sie zu automatisieren.

In diesem Artikel zeige ich Ihnen zahlreiche Möglichkeiten zur Optimierung von Bildern für die Verwendung im Internet und insbesondere auf WordPress-Websites.

Wählen Sie das richtige Dateiformat

JPEG und PNG sind zwei der beliebtesten Bilddateiformate im Web. JPEG ist ein komprimiertes Format, das normalerweise für Fotos verwendet wird, die viele Farben enthalten, während PNGs viel besser für Fotos mit Text, Illustrationen, Logos, Screenshots und transparenten Bildern sind. Ein anderes gebräuchliches Format ist das GIF, das am besten für Bilder mit wenigen Farben oder Bilder mit großen Bereichen der gleichen Farbe geeignet ist. GIF wird heute hauptsächlich für animierte Bilder im Web verwendet.

Die meisten Bildbearbeitungssoftware ermöglicht es Ihnen, Ihre Datei in vielen verschiedenen Formaten zu speichern. Wenn Sie das richtige Format auswählen, wird sichergestellt, dass Sie das schärfste Bild erhalten, das die Benutzererfahrung auf Ihrer Website verbessern sollte.

Verwenden Sie die richtige Größe und Auflösung

Sie müssen vorsichtig sein, wenn Sie Bilder zu Ihrer Site hinzufügen. Es wird als beste Methode angesehen, Ihre Bilder in der gleichen Breite und Höhe zu speichern, in der sie auf der Website erscheinen, und zwar so klein wie möglich, ohne dass die Qualität darunter leidet.

Komprimiere deine Bilder vor dem Hochladen

Es gibt viele Tools, mit denen Sie Ihre Bilder komprimieren können, bevor Sie sie auf Ihren Server hochladen. Photoshop hat zum Beispiel eine praktische "Speichern für Web & Geräte" -Funktion, mit der Sie die Format- und Qualitätseinstellungen wählen können. Sie sehen auch die Dateigröße für Ihr Bild, wenn Sie eine bestimmte Einstellung anwenden. Andere Bildbearbeitungstools wie GIMP bieten ähnliche Optionen.

Es gibt auch Online-Komprimierungstools wie Picresize, Kraken.io und TinyPNG, mit denen Sie Ihre hochauflösenden Bilder hochladen, optimieren und das komprimierte Format für die Verwendung im Web herunterladen können.

Bilder nach dem Hochladen komprimieren

Zu diesem Zweck gibt es mehrere Plugins, und eines der populäreren ist WP Smush, das hilft, JPEG-, PNG- oder GIF-Formate einzeln oder in großen Mengen mit dedizierten Servern zu optimieren. Es entfernt einfach Metadaten und unbenutzte Farben aus den Dateien, um die Dateigröße zu verringern. Mit der kostenlosen Version sind Sie auf 1MB und weniger begrenzt, aber Sie können diese Einschränkung durch ein Upgrade auf die Pro-Version, die bis zu 5MB erlaubt, entfernen.

Ein weiteres großartiges Plugin mit ähnlichen Funktionen ist der EWWW Image Optimizer, mit dem Sie Ihre Bilder in das Format konvertieren können, das die niedrigste Dateigröße bietet.

Es gibt noch andere, die im WordPress-Repository verfügbar sind. Das sind die beiden, die ich vorher benutzt habe, und beide funktionieren gut, also sollten sie auch für dich gut genug sein.

Markieren Sie Ihre Bilder richtig

Abgesehen davon, dass Sie Ihre Bilder in der Größe ändern, ist es eine gute Möglichkeit, auf Ihrer Website eine gute Erfahrung zu erzielen, indem Sie Ihre Bilder ordnungsgemäß taggen. Dies bedeutet, dass Sie das Attribut " alt " immer dann verwenden müssen, wenn Ihr Bild nicht geladen werden konnte, oder Screenreader verwenden, damit Ihre Besucher eine textbasierte Beschreibung des Bildes erhalten. Es hilft auch Suchmaschinen Bilder auf Ihrer Website besser zu indizieren und kann Ihnen eine erhebliche Menge an Suchverkehr abholen.

Hinzufügen von Bildunterschriften, wo notwendig, ist eine weitere gute Möglichkeit, um Ihre Website-Besucher das Bild besser zu verstehen. Serring richtige beschreibende Titel Tags und Bild Dateinamen hilft auf die gleiche Weise. Anstatt also Ihre Bilder als " FXSCSUYE.jpg " zu speichern, verwenden Sie einen beschreibenden Titel und einen Namen mit Keywords, die für Ihr Thema und Ihre Website relevant sind. Dies ist auch aus SEO-Sicht gut.

Faules Laden

Lazy Loading ist eine Technik, die von vielen Websites verwendet wird, um Bandbreite zu sparen, indem nur Bilder geladen werden, wenn ein Benutzer zum Ansichtsrahmen des Bildes scrollt. Die ersten Bilder werden sofort geladen, andere warten, bis sich der Benutzer vor dem Laden in der Nähe des Bildes befindet. Wenn Sie diese Funktion zu Ihrer Website hinzufügen, können Sie und Ihre Benutzer Bandbreite sparen und die Geschwindigkeit Ihrer Webseiten verbessern. BJ Lazy Load ist ein großartiges Plugin, um Lazy Loading auf Ihrer WordPress-Website hinzuzufügen.

Verwenden Sie ein Content-Delivery-Netzwerk

Die Verwendung eines Content Delivery Network (CDN) reduziert die Belastung Ihres Servers erheblich und erhöht die Leistung Ihrer Website. Ein CDN wird einfach Ressourcen von dem Server bereitstellen, der dem Standort des Benutzers am nächsten ist, der es anfordert. Wenn beispielsweise ein Besucher aus Peking ein Bild anfordert und das von Ihnen verwendete CDN über einen Server in Seoul und Sydney verfügt, wird das Bild vom Server in Seoul bereitgestellt.

MaxCDN ist ein hoch bewertetes CDN, das Sie ausprobieren können, und es gibt andere wie CloudFlare, CDN.net und mehr.

Endeffekt

Die Optimierung von Bildern für die Verwendung im Web ist eine der größten Möglichkeiten, die Ladezeit und die Benutzerfreundlichkeit Ihrer Website zu verbessern. Wenn Sie weitere Optimierungstechniken haben, die Sie gerne teilen möchten, tun Sie dies bitte in den Kommentaren unten.