So ändern Sie die Bildgröße für das Web

Nur Pixel zählen

Bei der Bestimmung der richtigen Größe für ein für das Web bestimmtes Bild sind nur die Pixel (px) entscheidend – wie viele Pixel hoch und wie viele Pixel breit das Bild ist. Ein Pixel ist in diesem Fall im Wesentlichen ein Farbpunkt.

Die Anzahl der Pixel innerhalb eines Bildes ist die Bildgröße und die Anzahl der Pixel, die in einem Quadratzoll gepackt sind, wenn Sie dieses Bild drucken, ist die Auflösung.

Die Auflösung ist im Web bedeutungslos, da das Gerät (Monitor, Telefon usw.), mit dem Sie das Bild betrachten, seine Auflösung bestimmt. Ein alter 17″ CRT-Computermonitor war im Allgemeinen 1024px breit und 768px hoch. Heutige Tablets haben die gleiche Anzahl von Pixeln in einer viel kleineren physikalischen Größe => mehr Punkte pro Zoll => höhere Auflösung.

Also – wenn Sie planen, ein Bild im Web zu verwenden, achten Sie auf seine Größe in Pixeln.

So finden Sie die Größe (in Pixeln) eines Bildes im Web heraus

Nehmen wir an, Sie haben eine Drupal-Website und erinnern sich nicht mehr daran, wie groß Ihr Homepage-Bild sein soll. Wenn Sie Firefox installiert haben, ist es wirklich einfach.

Klicken Sie mit der rechten Maustaste auf das Bild, wenn Sie die Webseite in Firefox anzeigen.
Wählen Sie’Bild anzeigen‘. Dadurch wird das Bild selbst in einem Tab geöffnet.
Schauen Sie oben im Browserfenster nach. Es wird den Dateinamen gefolgt von den Abmessungen des Bildes in Pixeln haben. Sie können dies mit dem obigen 200 x 200-Pixel-Bild ausprobieren.

Die beste Größe eines Bildes hängt davon ab, wie Sie es verwenden möchten. Wenn Sie ein Bild im Text einer Seite mit dem Textumbruch nach rechts oder links schweben lassen, möchten Sie im Allgemeinen, dass das Bild 200 – 300 Pixel breit ist.

Bilddatei-Typen für das Web

Die meisten Bilder im Web fallen immer noch in eine von drei Arten:

  1. jpg (oder jpeg) = Verwendung für Fotos und Bilder mit vielen verschiedenen Farben, aber ohne Transparenz.
  2. png = Verwendung für Bilder mit transparentem Hintergrund. In einigen älteren Browsern wie dem IE 6 wurde die Darstellung nicht korrekt durchgeführt.
  3. gif = nicht empfohlen. png ist besser. Niemals für Fotos verwenden, da die maximale Anzahl der Farben 256 beträgt.

Größenänderung im Vergleich zum Zuschneiden

Wenn Sie Bilder für einen beliebigen Zweck speichern, hören Sie zwei wichtige Begriffe zum Ändern der Größe eines Bildes: Größenänderung und Zuschneiden. Die Größenänderung ändert die Größe eines Bildes bei gleichbleibendem Verhältnis von Höhe zu Breite. Wenn Sie mit einem rechteckigen Bild begonnen haben und die Größe ändern, um es kleiner zu machen, haben Sie immer noch ein Rechteck mit dem gleichen Verhältnis, nicht ein Quadrat.

Wenn Sie ein Bild als genauen Satz von Abmessungen benötigen, müssen Sie es wahrscheinlich zuschneiden. Das Zuschneiden entfernt Teile des Bildes und kann das Verhältnis von Breite zu Höhe ändern.

Beide Methoden werden Sie in der Regel verwenden, wenn Sie eine Reihe von Bildern benötigen, die alle exakt gleich groß sind (z.B. Bilder in einer Diashow, Profilfotos der Fakultät).

Bildgröße ändern

Also, was verwende ich? Hier sind einige Möglichkeiten, wie Sie die Pixelgröße ändern könnten:

Web Resizer

Web Resizer ist ein kostenloses Online-Tool zum Ändern der Größe, Zuschneiden und Optimieren von Bildern für das Web. Sie müssen keine spezielle Software herunterladen – laden Sie einfach Ihr Bild hoch und schon können Sie loslegen.

  • Um die Größe zu ändern, ändern Sie die Anzahl der Pixel im Textfeld „Neue Größe“.
  • Um zu beschneiden, klicken Sie auf den Link „Bild beschneiden“ unterhalb des Upload-Feldes.
  • Nehmen Sie Ihre Änderungen vor, klicken Sie auf „Änderungen übernehmen“ und dann auf „Dieses Bild herunterladen“.

Web Resizer ist auch das absolut einfachste Werkzeug, das wir gefunden haben, um Bilder mit gekrümmten Ecken zu erstellen. Klicken Sie im Abschnitt „Rahmen“ auf das Optionsfeld neben dem Kreis und geben Sie eine Zahl größer als Null in das Textfeld ein. (Siehe das Bild rechts.)

Der einzige Nachteil von Web Resizer ist, dass es nur Bilder bis zu 5 MB akzeptiert, so dass Sie, wenn Sie mit einem wirklich großen Bild beginnen, es nicht verwenden können.

GIMP

GIMP ist eine Open-Source (kostenlose) Bildbearbeitungsanwendung ähnlich wie Adobe Photoshop.

Adobe Photoshop

Adobe Photoshop ist eine kommerzielle Bildbearbeitungssoftware. Es ist relativ teuer, obwohl es einfachere, kostengünstigere Versionen wie Photoshop Elements gibt, die im Allgemeinen über alle Funktionen verfügen, die Sie benötigen. Wenn Sie Photoshop bereits besitzen, ist es ein fantastisches Werkzeug. Es ist auch im A&S Creative Lab sowie in einigen unserer Klassenzimmer erhältlich.

In neueren Versionen kann die Größenänderung und Speicherung eines für das Web optimierten Bildes in einem einfachen Schritt durchgeführt werden.

  • Wenn Ihr Bild geöffnet ist, wählen Sie File->Save for web. Es öffnet sich ein neues Dialogfenster.
  • Wählen Sie einen guten Dateityp aus dem Dropdown-Menü oben. (Siehe Abschnitt oben – wird wahrscheinlich jpeg sein)
  • Ändern Sie die Breite (in Pixel) unter Bildgröße und lassen Sie die Höhe automatisch ausfüllen.
  • Die restlichen Standardeinstellungen sind in der Regel in Ordnung. Klicken Sie auf Speichern.

Das Zuschneiden ist etwas komplizierter, da Sie den Bereich des Bildes auswählen müssen, den Sie behalten möchten. Eine Auswahl wird verwendet, um einen Bereich eines zu ändernden Bildes zu bestimmen. Der Bereich außerhalb der gestrichelten Auswahlgrenze ist geschützt, während der Bereich innerhalb der gestrichelten Auswahlgrenze bearbeitet wird.

Picasa

Picasa ist ein kostenloses Tool von Google. Es verfügt über eine kleine Anzahl von Bearbeitungswerkzeugen, die relativ einfach zu bedienen sind. Es ist nützlich, wenn Sie eine Anzahl von Fotos haben, die alle auf die gleiche Breite skaliert werden müssen.

  • Öffnen Sie Picasa und wählen Sie mehrere Fotos aus, indem Sie auf Strg (PC) oder Befehlstaste (Apple) klicken und gedrückt halten.
  • Gehen Sie zu Datei und wählen Sie „Bild in Ordner exportieren“.
  • Wählen Sie den Speicherort, an dem Sie die Bilder speichern möchten.
  • Unter „Bildgröße“ wählen Sie „Größe ändern“ und geben Sie die Anzahl der Pixel ein, die die Bilder umfassen sollen.