Bildbearbeitung vor dem Hochladen auf deine Webseite

Teile diesen Beitrag!

Wunderst du dich über zu lange Ladezeiten auf deinem Blog/deiner Webseite ?
Daran könnten die Bilder Schuld sein !!

Ich zeige dir, wie du Bilder so bearbeitest, dass sie perfekt auf deine Webseite passen und nicht zu lange laden.

Zwei wichtige Faktoren sind bei der Bildbearbeitung zu beachten:

  • der richtige Ausschnitt bzw. das Format des Bildes (z.B. 1400×800 px)
  • die Qualität bzw. die Pixelmenge (z.B. 3,2 MB) des Bildes

Beides muss passen, der richtige Ausschnitt ist dafür zuständig, dass es gut aussieht, die Qualität des Bildes ist verantwortlich für die Ladezeit des Bildes.

Beginnen wir mit einem geeigneten Bildbearbeitungprogramm:

Wenn du noch kein Programm zum Bearbeiten deiner Fotos besitzt, solltest du dir erst mal ein geeignetes Programm herunterladen. Kosten muss das nichts ! Natürlich ist es schön mit Photoshop (oder auch Photoshop Elements) zu arbeiten, aber für den „normalen“ Webseiten- und Blogbesitzer genügt ein kostenloses Programm durchaus ! Ich habe gute Erfahrungen mit PICASA und Zoner gemacht, oder wenn du mit Ebenen arbeiten möchtest gibt es GIMP als Freeware. Aber auch Photoscape oder Magix Foto Designer kommen in Frage.
Nach dem Herunterladen solltest du dich mit dem Programm vertraut machen und damit ein bisschen herumspielen. Je besser du dich auskennst, um so leichter wird hinterher die Bildbearbeitung im täglichen Geschäft. Meine Screenshot sind von PICASA

Ausschnitt/Format des Bildes wählen:

Abhängig von dem Zweck deines Bildes musst du nun den Bildausschnitt festlegen: Hochformat, Querformat, quadratisch – erlaubt ist, was passt !

Header dürfen z.B. nicht zu hoch sein, Bilder für Blogposts sollten über die gesamte Breite des Texts gehen…etc. Oder du möchtest ein Detail mehr in den Mittelpunkt rücken ? Machmal hast du auch schon eine Vorgabe, wie z.B. bei den Facebook-Profilbildern (180x180px).
Ich handhabe das wie folgt: habe ich eine Vorgabe, dann gebe ich das bei PICASA so ein und habe automatisch das richtige Verhältnis (aber noch nicht die richtige Größe !), habe ich keine Vorgabe schneide ich nach Augenmaß.
Die Verkleinerung auf die richtige Pixelgröße/Qualität erfolgt bei PICASA in einem 2.Schritt.
Beispiel: Ich habe das Headerbild so zugeschnitten, dass es mir gefällt, die Dateigröße beträgt jetzt 1,41MB – das ist zum Hochladen viel zu groß !!

Größe bzw. Qualität des Bildes anpassen:

Die Breite des (Header)Bildes lege ich auf 1400px fest, da das so in mein WordPress-Theme passt, das verringert die Größe der Datei schon mal erheblich (im Original ist die Breite 4000px). Außerdem kann ich noch festlegen wie hoch die Qualität des Bildes sein soll. Hohe Qualität = große Dateigröße, geringe Qualität = geringe Dateigröße.
Ich verkleinere das Bild also auf 1400px, mittlere Qualität – jetzt befinde ich mich schon bei einer Dateigröße von ca. 60 kb !

Diese Funktion, die auch die Qualität des Bildes verändert, heißt in jedem Programm etwas anders, bei PICASA z.B. findet man sie unter „Bild in Ordner exportieren“, in Photoshop heißt sie „Für Web speichern“ und bei Zoner „JPEG für Web speichern“…

Wenn du dein Bild so bearbeitet hast, kannst du es unbesorgt hochladen !

 

Hast du Fragen ? Welches Programm nutzt du zur Bildbearbeitung ??

Teile diesen Beitrag!

1 Kommentar zu „Bildbearbeitung vor dem Hochladen auf deine Webseite“

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Der Elementor Basics Mini-Kurs:

Was ist ärgerlicher, als beim Design der eigenen Webseite festzustellen, dass all deine tollen Ideen nicht mit deinem Wordpress Theme umsetzbar sind?

Aber halt! Dafür gibt es ja inzwischen die Wordpress Pagebuilder, mit denen das Webdesign auch für Nicht-Programmierer easypeasy geworden ist. Nur ein paar Elemente per drag-and-drop hin und her geschoben und schon hast du deine super Webseite.

OK, zugegeben, ganz so einfach ist es nun doch nicht…du brauchst vor allem einen Plan, eine Idee, sonst wirst du von den Möglichkeiten vermutlich erschlagen.

Aber!

Um überhaupt erstmal einen Eindruck von den Möglichkeiten zu bekommen, kannst du dich hier für meinen kostenlosen ELEMENTOR BASICS Mini-Kurs anmelden. Elementor ist der Pagebuilder meines Vertrauens … und vielleicht auch bald deiner.

Elementor macht das Design einer Webseite, die genau so aussieht, wie du das möchtest, super einfach! Keine Beschränkungen durch Themevorgaben mehr!

In meinem ELEMENTOR BASICS Mini-Kurs zeige ich dir in vier Videolektionen an vier Tagen die Grundlagen von Elementor, damit du siehst, ob Elementor eine Option für dein Webdesign ist.

Elementor ist in der Grundversion übrigens kostenlos und funktioniert mit jedem Wordpress Theme!

Also melde dich gleich hier an!

 
 
 

Ja

Wenn du das Häkchen nicht setzt, bekommst du nur den ELEMENTOR BASICS Kurs, versprochen!

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne: 

Umekos Designletter

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand  meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Das neueste aus dem Blog:

Wordpress Pagebuilder

Bist du mit dem Theme deiner WordPress Webseite unzufrieden, möchtest aber nicht gleich wechseln? Möchtest du mehr Entscheidungsmöglichkeiten für dein Webseitendesign? Brauchst du eine andere Seitenaufteilung als von deinem Theme vorgegeben? Und möchtest du dieses alles, ohne vorher Programmieren zu lernen?

Weiterlesen
Ist Wordpress kompliziert

Immer häufiger stolpere ich im Internet über die Aussage, dass WordPress so kompliziert zu bedienen und unübersichtlich sei, dass man lieber auf Squarespace oder ähnliches ausweichen sollte. Als überzeugter WordPressnutzer wollte ich mal etwas Licht in dieses Dunkel bringen…

Weiterlesen

Umekos Designletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne meinen Designletter.

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Meld dich gleich an: