So ändern Sie die Größe eines Bildes für das Web

In diesem Beitrag wird erläutert, wie Sie die Größe eines Bilds für das Web ändern. Erstens in Pixeln, damit das Bild richtig auf die Webseite passt. Dann in Kilobyte, um die Dateigröße zu reduzieren, ohne das Bild zu stark zu beeinträchtigen.

Warum ändern wir die Größe von Bildern für das Web?

Wir möchten, dass Bilder auf dem Bildschirm gut aussehen und für Website-Besucher schnell heruntergeladen werden können.

Websites mit schnell ladenden Bildern werden in Suchmaschinen höher eingestuft.

Weil Suchmaschinen es vorziehen, Benutzer auf Websites zu leiten, die eine gute Erfahrung bieten.

Es gibt zwei Schritte für ein schnelles Laden von Bildern:

• Der erste Schritt besteht darin, die Größe des Bildes in Pixeln zu ändern – und sollte an erster Stelle stehen.
  Das ist die Breite und die Höhe. Es muss genau die richtige Größe für seinen Platz auf der Website haben.
  Seit der Einführung responsiver Websites gibt es einige Besonderheiten bei der Bildgröße.
  Ein Bild muss die richtige Größe für ein Handy, ein Tablet, einen Desktop und einen Fernseher haben, auf die später eingegangen wird.
• Der zweite Schritt ist die Verkleinerung des Bildes in Kilobytes – bekannt als Komprimierung.
  Beim Komprimieren werden die Farben in einem Bild reduziert oder kombiniert, sodass die Größe in Kilobyte verringert wird. Dies ist möglich, ohne zu viel Qualität zu verlieren.

Die Durchführung dieser beiden Aufgaben – Größenänderung und Komprimierung – wird als Bildoptimierung für das Web bezeichnet.

Ich zeige Ihnen die Best Practices zum Ändern der Größe eines Bildes und wie Sie dies tun.

Die Komplikationen bei responsiven Bildern

Beginnen wir mit einem Blick auf responsive Bilder – solche, deren Größe so angepasst wird, dass sie auf verschiedenen Bildschirmgrößen gut aussehen.

Wir entwerfen zuerst für Mobilgeräte, daher beginne ich mit der Bezugnahme auf die mobile Version einer Website.

Auf mobilen Websites erstreckt sich das Bild in der Regel über die gesamte Bildschirmbreite. Bilder stapeln sich über dem Text und Benutzer sind es gewohnt, schnell lange, mobilfreundliche Webseiten herunterzuscrollen.

Für ein mobiles Gerät ist eine sehr gute Breite für ein Bild 640 Pixel. Die Höhe kann beliebig sein.

Aber die Bildgröße endet hier nicht. Eine Größe passt nicht allen.

Bilder auf verschiedenen Geräten

Denken wir an dasselbe Bild auf einem extra großen Monitor oder einem Fernsehbildschirm – ja, Websites sind jetzt über Ihr Smart-TV zugänglich.

Das Bild kann sich in einer Spalte links vom Text befinden.

Es kann sich wie bei der mobilen Version über die Breite des Bildschirms erstrecken. Wir nennen diese Heldenbilder.

Stellen Sie sich vor, wie groß dieses Bild jetzt sein muss?

Für einen Fernseher wäre ein pixelgenaues Bild 1920 Pixel breit – oder mehr.

Wenn Sie das Bild für ein Handy bereits auf 640 Pixel verkleinert haben, sieht es schrecklich aus, wenn Sie versuchen, es auf 1920 Pixel hochzuskalieren. Sie würden es um mehr als 400% dehnen.

Das Hochskalieren von Bildern sieht nicht gut aus – die Pixel dehnen sich und das Bild erscheint unscharf.

Auch das Festlegen, Bilder mit 1920 Pixeln beizubehalten, löst das Problem nicht. Diese werden so langsam heruntergeladen, insbesondere bei langsamen Internetverbindungen.

Um die Komplikationen zu erhöhen: Ein Bild sollte die genaue Pixelgröße für die Verwendung auf der Seite haben. Suchmaschinen möchten gerne eine gute Vorstellung von Breite und Höhe – den sogenannten Dimensionen – haben.

Sie sehen also – es gibt keine Standardgröße und alles wird recht kompliziert. Alles, was wir tun können, ist unser Bestes.

WordPress-Plugins für adaptive Bilder

Es gibt einige WordPress-Plugins, die dabei helfen, dem Gerät die richtige Bildgröße bereitzustellen, sogenannte adaptive Bilder.

Grundsätzlich wird zuerst ein kleines Bild heruntergeladen – egal ob in Größe oder Auflösung.

Wenn die Bildschirmauflösung groß ist, bietet das Plugin die größere Version. Dies beschleunigt die Wartezeit für den Besucher.

Dies ist die Lösung, wenn Sie große Hero-Bilder verwenden möchten, sich aber Sorgen um die Downloadzeit machen.

Hier sind zwei adaptive Bild-Plugins, die mir gefallen:

• Adaptive Bilder für WordPress von Nevma
  Sendet einfach kleinere Versionen der Bilder an mobile Geräte, also ein sehr einfaches Plugin, das die Arbeit erledigt, sobald die Einstellungen nach der Aktivierung gespeichert wurden.
• Adaptives Shortpixel-Bild von ShortPixel
  Dieses Plugin ist clever. Es beginnt, Bilder für verschiedene Bildschirme zuzuschneiden und zu komprimieren, sobald es aktiviert wird. Obwohl Sie bei Bedarf mehr Kontrolle haben können. Auch die ShortPixel-Dokumentation ist umfassend. Sie können sogar ein Bild vor und nach der Komprimierung mit ihrem Bildkomprimierungstest vergleichen.
  

Was ich also tun würde, ist diese adaptiven Plugins zu verwenden, aber verlassen Sie sich nicht vollständig auf sie und laden Sie Fotos direkt von einer Kamera auf Ihre WordPress-Site. Halten Sie Ihre Medienbibliothek sauber.

Ändern Sie zuerst die Größe des Bildes und komprimieren Sie es minimal, um die KB zu verkleinern. Sobald Sie es in WordPress hochladen, erledigt das adaptive Bild-Plugin den Rest.

Beginnen wir mit der Größenänderung eines Bildes für das Web.

Größe eines Bildes für das Web ändern – in Pixel

Wählen Sie Ihre Bildbreite mit allem, was wir besprochen haben.

• Ein Fotograf würde Bilder von hervorragender Qualität brauchen. Um sie in voller Bildschirmbreite auf einem extra großen Monitor anzuzeigen, benötigen sie ein ziemlich großes Bild. Größe Fotos auf mindestens 1920 Pixel.
• Jedem anderen rate ich, 1200 Pixel zu wählen. Dies ist ein guter Ausgleich. Personen auf besonders großen Monitoren sehen eine Pixelierung auf Bildern in voller Breite, aber es ist ein Kompromiss für ein schnell geladenes Bild.

Für meine eigene Website und meinen Blog verwende ich Bilder mit einer Breite von maximal 1200 Pixeln, die meisten auf den Seiten sind 800 Pixel breit. Hier ist der Grund:

• Bilder in voller Breite werden auf meiner Website nie verwendet. Ich mag es, alles sehr schnell zu halten.
• Mein Geschäft ist nicht besonders visuell, die Leute müssen meine Fotos nicht in einer so hohen Auflösung sehen.
• Ich verwende separate Bilder mit exakter Größe für Open Graph und dafür ist nichts größer als 1200 erforderlich.
• Aus Google Analytics weiß ich, dass Nutzer, die meine Website besuchen, ein Handheld-Gerät oder einen Laptop verwenden. Nützliche Informationen.

Ich überlasse es Ihrem Ermessen.

Kostenlose Bildbearbeitungssoftware

Es gibt viele kostenlose Tools, die Ihnen online zur Verfügung stehen, sowie Bildbearbeitungsprogramme, die Sie herunterladen können.

Für Fotos bleiben Sie beim JPEG-Dateiformat, und das werden wir hier behandeln.

Wählen Sie für Vektoren PNG oder SVG – und das ist für ein zukünftiges Tutorial.

GIMP-Bildbearbeitungssoftware

'GIMP' (das GNU Image Manipulation Program) ist ein völlig kostenloser Bildeditor.

Laden Sie die aktuelle stabile Version von GIMP von der Website herunter.

GIMP bietet ein Tutorial zum Ändern der Größe (Abmessungen) eines Bildes (Skalierung).

Online-Bildbearbeitung

Eine schnelle Suche nach "Bildgröße online ändern" in Google bietet Ihnen eine ganze Reihe von Optionen zum Hochladen, Ändern der Größe, Komprimieren und Herunterladen Ihres JPEGs.

Das erste Ergebnis, das ich fand, war resizeimage.net. Sehr einfach zu bedienen – es schneidet, skaliert und komprimiert ein Bild.

Wenn Sie das Bild zuschneiden möchten, verwenden Sie Option Nummer 2, aber ich habe das umgangen und bin direkt zu Option Nummer 4 gegangen, wo ich die Größe nach Pixeln ändern kann.

Geben Sie 1200 in das Breitenfeld ein, Nan in Höhe und aktivieren Sie das Kontrollkästchen Seitenverhältnis beibehalten.

Das Ausgabebildformat ist JPG.

Wählen Sie eine Komprimierungsoption.

Bei der progressiven Komprimierung wird eine pixelige Version des JPEG angezeigt, sobald sich der Besucher auf der Seite befindet. Die restlichen Informationen werden nach und nach heruntergeladen, um das endgültige Image zu erstellen. Ich mag diese Option sehr, weil der Besucher weiß, dass er warten muss.

Reduzieren Sie die Bildqualität um etwa 75 %, je nachdem, wie rücksichtslos Sie sein möchten.

Größe eines Bildes in KBs ändern – Komprimierung

Das Komprimieren unterscheidet sich stark von der Größenänderung. Alle Bilder sollten vor dem Hochladen komprimiert werden, auch wenn Sie ein adaptives Bild-Plugin verwenden.

Die Komprimierung verringert die Dateigröße des Bildes, indem die Pixel reduziert werden, sodass es schneller heruntergeladen wird.

Versuchen Sie während der Kompressionsphase, die Qualität des Bildes nicht zu sehr zu beeinträchtigen.

Versuchen Sie, ein Gleichgewicht zwischen dem gut aussehenden Bild und dem schnellen Herunterladen zu finden.

Bilder können auch mit der GIMP-Software komprimiert werden.

GIMP-Tutorial zum Ändern der Größe (FileSize) eines JPEG.