So laden Sie Bilder auf Ihre Website hoch

iBCScorp™ ist ein Webentwicklungsunternehmen. In den letzten 15 Jahren haben die Mitarbeiter von iBCScorp.com (Internet Business Services Consulting Company) viele Veränderungen in der Art und Weise beobachtet, wie Websites erstellt werden.

Eine große Veränderung ist die verbesserte Möglichkeit für Kunden, ihre Inhalte auf einer Website dynamisch zu verwalten. In den letzten Jahren haben Content-Management-Systeme, Webgalerien, Posts, Blogs, Nachrichtenartikel und fast alle Arten von Medien-Content-Management-Systemen es Kunden zunehmend einfacher gemacht, ihre Websites selbst zu bearbeiten.

Als Internet-Unternehmensberatungsunternehmen gefällt iBCScorp™ dieser Wandel. Wenn wir unseren Kunden die Kontrolle über ihre Website geben, können sie leichter, schneller und kostengünstiger Änderungen an ihrer Website vornehmen. Aus diesem Grund verkaufen wir unseren Kunden viele Content-Management-Systeme. CMS-Systeme wie Joomla, Magento, SilverStripe, Drupal, Dolphin und WordPress, um nur einige zu nennen, haben es den Menschen sehr leicht gemacht, ihre eigenen Inhalte zu verwalten.

Wir finden diese Änderung gut, aber es kann für manche Leute manchmal frustrierend sein, das Steuer Leuten zu überlassen, die wenig Erfahrung mit Webentwicklung oder der Funktionsweise des Internets oder von Webseiten haben. Ein Problem, das recht häufig auftritt, ist: Wie lade ich Bilder konsistent auf meine Website, damit sie jedes Mal richtig aussehen?

Während die genaue Vorgehensweise je nach Tool unterschiedlich sein kann, sind die Grundkonzepte dieselben.

In diesem Beitrag wird den Benutzern von Content-Management-Systemen (CMS) erklärt, wie sie sich auf das Laden von Bildern in Joomla, Drupal, SilverStripe, WordPress und Dolphin vorbereiten sowie auf das Laden von Bildern in beliebige Webseiten – ob benutzerdefiniert oder nicht.

Das Konzept ist dasselbe; die Logistik, wie das Bild auf die Seite gebracht wird, unterscheidet sich je nach Bearbeitung der Seite.

In diesem Tutorial werden die Grundlagen der Bildbearbeitung erläutert. Diese Grundlagen gelten unabhängig davon, welches Softwareprogramm Sie zur Bearbeitung verwenden. Wir zeigen Ihnen ein Beispiel für die Bildbearbeitung mit Microsoft Paint für Ihre Website, da es sich um eine gängige und kostenlose Anwendung handelt, die Prinzipien jedoch überall gleich sind.

Bilder für Ihre Website vorbereiten

Welche Dateigröße sollten die Bilder auf meiner Website haben?

Sie möchten die Dateigröße Ihres Bildes klein halten, ohne die Qualität Ihres Bildes zu beeinträchtigen. Bei einem großen Bild (ungefähr 600 x 600 Pixel) sollte die Dateigröße etwa 50 KB – 60 KB betragen. Bei einem mittelgroßen Bild (ungefähr 300 x 500 Pixel) sollte die Dateigröße etwa 25 KB – 50 KB betragen. Bei einem kleinen Bild/Miniaturbild (ungefähr 100 x 100 Pixel) sollte die Dateigröße etwa 10 KB betragen.

Als Referenz: Wenn Sie Bilder von einer Kamera hochladen, sind die meisten Bilder etwa 1400 x 1400 Pixel groß, wenn nicht sogar größer.

Wie behebe ich das Problem?

Durch die Größenanpassung Ihrer Bilder können Sie die Dateigröße reduzieren.

Welche Abmessungen sollten die Bilder auf meiner Site haben?

Je nachdem, wofür Sie Ihre Bilder verwenden, müssen sie unterschiedliche Größen haben.

Miniaturansichten – nicht größer als 150 x 150 Pixel

Bio-Bild – ungefähr 300 x 300 Pixel

Galeerenbild - nicht größer als 700 x 700 Pixel

Produktbild - ungefähr 500 x 500 Pixel

Die meisten Content-Management-Systeme (CMS) passen die Größe an, in der Ihr Bild angezeigt wird. Dennoch kann Ihr Bild immer noch zu groß sein und dadurch Ihre Site verlangsamen.

Wie behebe ich das Problem?

Durch die Reduzierung der Dateigröße werden die Bilder auf Ihrer Website schneller geladen und die Geschwindigkeit Ihrer Website erhöht.

Wie vermeide ich Verzerrungen?

Sie sollten die Größe Ihrer Bilder auf die Größe anpassen, die Sie auf Ihrer Website anzeigen möchten. Wenn Sie ein Bild von einer Kamera hochladen, sind die meisten Bilder etwa 1400 x 1400 Pixel groß, wenn nicht sogar größer.

Bilder werden verzerrt, wenn Ihre Website das Bild größer anzeigt als das Originalbild.

Wie behebe ich das Problem?

Wenn Sie die Größe eines Bilds ändern, sollten Sie nur die Größe des Originals verringern.

Warum ist mein Bild unscharf?

Bilder werden unscharf, wenn die Bildproportionen nicht stimmen. Dies kann passieren, wenn die Website das Bild in einer anderen Größe anzeigt als das Bild tatsächlich hat. Dies kann auch passieren, wenn Sie die Größe des Bildes ändern, d. h. die Höhe um 30 % und die Breite um 50 % reduzieren oder ein Bild in Miniaturgröße nehmen und es wirklich groß anzeigen.

Wie behebe ich das Problem?

Achten Sie beim Ändern der Bildgröße darauf, dass die Bildproportionen gleich bleiben.

Warum dauert das Laden meiner Seite so lange?

Bilder können große Dateien sein, was dazu führen kann, dass das Laden Ihrer Website lange dauert und Ihre Website langsam läuft.

Wie behebe ich das Problem?

Durch die Reduzierung der Bilddateigröße können Sie die Ladegeschwindigkeit Ihrer Website erhöhen.

Kostenlose Software zur Behebung des Problems

Es gibt eine Menge Bildbearbeitungsprogramme, die Sie nutzen können. Einige der besten, die wir gefunden haben, sind:

Gimp

- Dieses Programm funktioniert ähnlich wie Photoshop und ist ein tolles Werkzeug. Gimp ist eine kostenlose Bildbearbeitungssoftware.

Paint.NET

- Dies ist ein großartiges und einfach zu verwendendes Tool. Paint.NET ist eine kostenlose Bildbearbeitungssoftware.

Fotolandschaft

- Dieses Programm ist großartig, da es viele tolle Tools bietet, die Sie nutzen können. Photoscape ist eine kostenlose Bildbearbeitungssoftware.

So bereiten Sie mit Microsoft Paint Bilder für Ihre Website vor

Öffnen Sie Microsoft Paint:

Klicken Sie auf Start > Alle Programme > Zubehör > Paint

Öffnen Sie Ihr Bild:

Klicken Sie auf Datei (oben links) > Öffnen. Navigieren Sie zu Ihrem Bild und klicken Sie auf Öffnen

Ändern der Bildgröße:

Klicken Sie auf Bild (oben links) > dann auf Strecken/Verzerren. Ein neues Fenster wird angezeigt, in das Sie die neue Breite und Höhe als Prozentsatz der aktuellen Größe eingeben können. Ändern Sie beide Werte auf die gleiche Zahl, d. h. 50 % Höhe, 50 % Breite, um die Bildqualität hoch zu halten.