Logo feines web
blockHeaderEditIcon
Adresse
blockHeaderEditIcon

agentur feines web
St.-Vitus-Str. 3, ​85232 Günding 

Menu
blockHeaderEditIcon

BildFeinerBlog
blockHeaderEditIcon

Bild feiner Blog

Beispiel BildbearbeitungBilder zuschneiden und einfügen

Warum Sie diesen Artikel lesen sollten:
Sie erhalten Informationen zu den Bildformaten und eine einfache Anleitung rund um's Thema "Bilder auf Ihre Webseite hochladen".  

Sie brauchen:
- Das Wissen, wie Sie Bilder auf Ihre Website laden können.
- Ihre ausgewählten Bilder 
- Bildbearbeitungsprogramm (Empfehlungen kostenlose Bildbearbeitungsprogramme)
- Bildtitel (ALT-Attribut & Title-Tag)
- "sprechender" Dateiname

Die beschriebenen Maßnahmen haben Auswirkungen auf:
- geringere Ladezeit
- weniger Speicherbedarf
- mehr Kundenfreundlichkeit
- Optimierung für mobile Geräte
- Suchmaschinenoptimierung

Informationen

Vielleicht haben Sie sich schon mal gewundert, dass das Laden einer Webseite unterschiedlich lange dauert. Das liegt oftmals an der Dateigröße der Dokumente, die übers Internet auf Ihren PC bzw. Ihr Smartphone übertragen werden.

Der Faktor den Sie am einfachsten ändern können, sind die Bilder Ihrer Webseite. Bei manchen Systemen können Sie auch größere Bilder hochladen, die dann verkleinert angezeigt werden. Der Haken dabei ist, dass das große Bild, also die große Datei, geladen wird. Das Bild wird nur verkleinert angezeigt. Ein unbearbeitetes, direkt vom Handy oder Fotoapparat heruntergeladenes Bild kann durchaus 1 MB oder größer sein. Im Schnitt sind auf der Startseite 4-6 Bilder, also 4-6 MB oder mehr, die beim Seitenaufruf erstmal geladen werden müssen.

Für manche Handy-Netze (und -Tarife) eine enorme Herausforderung. Je nach Versorgung kann das auch die Bandbreite des heimischen Internetanschlusses sprengen.

Kurz-Anleitung

Das können Sie einfach lösen, indem Sie die Bilder vor dem Hochladen auf die passende Größe zuschneiden und die Auflösung anpassen.
Im allgemeinen sind es nur 4 Schritte, egal, welches Programm Sie verwenden: 

  1. Bild im Bildbearbeitungsprogramm öffnen
  2. Größe anpassen (z.B. 200 x 135 Pixel)
  3. Auflösung auf 96 dpi einstellen
  4. unter einem "sprechenden" Dateinamen speichern

Ein so bearbeitetes Bild hat dann nur noch um die 100 KB, also knapp ein Zehntel der vorherigen Dateigröße. Und so gehen Sie vor:

  • Öffnen Sie das zu bearbeitende Bild in Ihrem Bildbearbeitungsprogramm (Datei - öffnen)
  • im Menü bzw. in der Menüleiste auf "Bild" - "Größe ändern" klicken
  • Hier finden Sie die Werte für die Bildbreite und die -Höhe, meist als Pixel angegeben z.B. 960 x 720
  • ändern Sie diese in die gewünschten Werte und achten Sie darauf, dass das Seiten-Verhältnis beibehalten wird (Proportional)
  • jetzt noch die Auflösung auf 72 DPI einstellen 
  • Wenn Sie möchten, können Sie das Foto noch nachschärfen, das finden Sie unter "Effekte" - "nachschärfen". Bei PNG/GIF Grafiken ist das nicht nötig.
  • jetzt noch unter dem "sprechenden Dateinamen" abspeichern  und Sie können es auf Ihre Website hochladen und einfügen.

 

Bildformate (.jpg, .png, .gif)

Das sind die häufigsten Bildformate für Websites:
.jpg (sprich: tschäipeg) wird für Fotos verwendet, weil der Farbumfang am größten ist. 
.png (pi-än-dschi) kommt für Grafiken, Logos etc. in Frage und kann auch transparent sein
.gif (giff) wird meist für animierte Grafiken verwendet

nicht zu empfehlen sind .bmp und .tiff. BMP kommt oft aus dem Scanner, Nachteil ist die Dateigröße, die kann schon mal 20 (zwanzig) MB sein. 
TIFF Bilder bilden oft den Ursprung für die spätere Bildbearbeitung, sind aber auch sehr groß. 

Was hat das jetzt mit der Suchmaschinenoptimierung zu tun? 

Die Bildgröße, der "sprechende" Dateiname, das sog. "ALT Attribut" und der "Title-Tag" werden von Suchmaschinen wie Google, Bing, Yahoo usw. ausgelesen. Je kleiner die Datei und je besser die Beschreibung des Bildinhaltes ist, umso einfacher tut sich die Suchmaschine beim Auslesen und letztlich beim Anzeigen in den Suchergebnissen.

Was ist mit "sprechender" Dateinamen gemeint?

Der "sprechende" Dateiname hilft Ihnen schon selbst, Ihre Bilder auszuwählen. Bei 50 Bildern im Album mit Dateinahmen von _DSC0200 bis _DSC250 ist die Auswahl anhand des Dateinamens schwierig. Dateinamen wie Wintertanne04.jpg oder Kachelofen02.jpg helfen da schon ein bisschen. Für die Feinauswahl kmmen Sie nicht darum herum, sich die Bilder anschauen.

Google und Co. können die Bilder nicht anschauen. Sie haben nur die digitalen Angaben wie Dateiname, ALT-Attribut und Title Tag zur Verfügung. Speichern Sie also die Bilder, die auf ihre Webseite kommen mit einem "sprechenden" Dateinamen wie eben Hobelbank01.jpg ab. Ich speichere die Bildernamen auch noch mit der Bildbreite (z.B. Hobelbank01_400.jpg). Das hilft mir, in der Bilderverwaltung der Website die richtige Größe auszuwählen, wenn mehrere Größen des Bildes vorhanden sind.

Was hat es mit dem "ALT-Attribut" bzw. dem "alternativen Text" auf sich?

Das "ALT-Attribut" soll ein Bild beschreiben, wenn dieses im Browser nicht angezeigt werden kann. Beispielsweise bei geringer Bandbreite, z. B. im Mobilnetz. Anstelle des Bildes wird das ALT-Attribut eingeblendet. Bei einem Logo wäre ein sinnvoller Eintrag "Logo Schreinerei Baum". Ganz Pfiffige schreiben gleich noch das Hauptkeyword hinein, aber das ist ein anderes Thema.

Wichtig ist aber schon, dass ein Bezug zum Unternehmen hergestellt wird. Ein Beispiel: Das ALT-Attribut (und der Bildtitel) eines Bildes mit einer Brotzeit auf einem Holztisch würde ich für ein Gasthaus mit "kernige Brotzeit auf rustikalem Holztisch" benennen. Das selbe Bild auf der Website der Schreinerei, die den Tisch hergestellt hat, würde bei mir "Ahorn Holztisch mit deftiger Brotzeit" heissen.

Für Menschen mit Sehbehinderung wird der "alternative Text" mit speziellen Programmen, z. B. Screenreader, vorgelesen. Ohne alternativen Text werden evlt. Teile des Dateinamens vorgelesen. Ein Bild ohne ALT-Attribut und dem Dateinamen _DSC 235.jpg gibt Sehbehinderten keine brauchbaren Bild-Informationen.

Der "Title-Tag" oder Bildtitel

Hier kann man auch ein relevantes Keyword unterbringen, die eigentliche Funktion ist aber die etwas verzögerte Anzeige des Bildtitels, wenn man mit der Maus darüberfährt. Gerade bei Bildern ohne Bilduntertitel kann das für den Betrachter sehr nützlich sein.

Empfehlungen für kostenlose Bildbearbeitungsprogramme:

- IrfanView (einfach, schnell, reicht um Bilder zuzuschneiden)
- Paint.net (für eine erweiterte Bildbearbeitung, z.B. Freistellen von Objekten)
- GIMP (für erweiterte Bildbearbeitung, noch umfangreicher wie Paint.net)

das geht auch online:
- www.verkleinern.de
- www.online-verkleinern.de
- www.fotosverkleinern.de

oder geben Sie in Ihre Suchmaschine "Bilder komprimieren" ein und wählen Sie das für Sie Passendste.

So, das war's für heute. Viel Spaß und Erfolg beim nächsten Bild hochladen.

Ihr 

Franz Konietzko

comments powered by Disqus
Benutzername:
User-Login
Ihr E-Mail
*