Die perfekte Webseite Teil-4

Die perfekte Webseite Teil-4

Die Bild Elemente. Wieder ein neuer Teil auf dem Weg zur Perfekten Webseite. Bilder mal schnell rein machen, Ja nee is klar. Hören wir aber sehr oft. Was hier viele nicht wissen weil es zum Teil automatisiert ist, auch Bilder können auf dem Weg zur Perfekten Webseite, zum Stolperstein werden.

Sollte wir nun komplett auf Bilder in den Webseite verzichten? Einfacher wäre es, 1 Bild sagt manches mal mehr als 1000 Worte. Und ich denke Bilder machen eine Webseite gerade aus.

Nein, Durch einfache Handgriffe können wir Bilder in den Seiten so platzieren das diese ein nächster Schritt zur Perfekten Webseite ergeben. Wie verhalt sich ein Bild im Quellcode der Seite. Im Normalfall (bei einfachen einsetzten) so.

intro_image_mega4_new

 

<img src=“hier ist der Bildpfad“>

So sollte das aber nicht bleiben, die meisten CMS Systeme unterstützen, wie gesagt, das schon automatisch.

Was muss das Bild haben?

1. Den Bildpfad (wo das Bild auf dem Server liegt)

2. Die höhe und breite des Bildes (Wie hoch und Breit das Bild ist, aber ohne px Angabe)

3. Einen Alternativ Text (Es steht ein Text wenn das Bild nicht vorhanden ist)

4. Einen Titel (Der Titel dient, wie bei Links der Benutzerfreundlichkeit)

5. Lange Beschreibung (dient, wie bei Links der Benutzerfreundlichkeit)

Hört sich viel an, ist es auch, wenn man überlegt das es nur ein Bild ist. Aber wie alles was ich hier so schreibe auch notwendig. Ein sauber eingebundenes Bild sieht also wie folgt aus:

<img width=“Breite des Bildes“ height=“höhe des Bildes“ longdesc=“Ausführliche Beschreibung“ title=“der Titel des Bildes“ alt=“Alternative Text“ src=“Pfad des Bildes .jpg“>

Wenn wir das hier so sehen, ist das wirklich viel, für ein Bildchen. Richtig lustig wir es aber dann wenn das Bild noch einen Link bekommt. Wir erinnern uns Links sollten auch einen Titel und den Verweis auf die entsprechende Seite haben.

Dann Sieht das ganze nämlich so aus.

<a title=“titel des Links“ href=“linke zur Seite“><img width=“Breite des Bildes“ height=“höhe des Bildes“ longdesc=“Ausführliche Beschreibung“ title=“der Titel des Bildes“ alt=“Alternative Text“ src=“Pfad des Bildes .jpg“></a>

Das so was schon optisch den Quellcode aufbläst, verhält sich in der Realität genau so. Wir denken bei jedem Bild, an unser Teil-1 der Perfekten Webseite. Zu mindesten auf der Startseite an die Größe der selbigen. Wird dem entsprechen schwer wenn auf der Startseite schon 20 Bilder verbaut sind. Wie auch im Teil-1 beschrieben kommt es nicht auf die Bildgröße an, sondern um das was um das Bild herum getackert wird.

Was hier auch noch erwähnt werden sollte sind TOTE Bilder, diese werden gerne von TYPO3 gebacken. TYPO3 lädt gerne und alles temporär. Dadurch kann es aber auch passieren das Bilder im Browser zwar sichtbar sind, diese aber schon 3x gewechselt haben. Beobachten lässt sich dies an den Bildern selbst. Wenn Ihr also mal auf eine TYPO3 Generierten Seite seid, schaut euch mal ein Bild im Quelltext an. Hier werdet Ihr feststellen das, das Bild eigentlich immer nur eine Nummer hat. Wenn Ihr euch nun die Nummer merkt, anschließend euren Browser Cache leert, und euch dann das selbe Bild noch mal anschaut wird es eine andere Nummer haben.

Das ganze ist bei einer Handgeschmiedeten Seite natürlich nicht.

So nun dürft Ihr erst mal eure Bilder bearbeiten und ich schreibe mal den nächsten Teil-5 über Bestandteile die Notwendig sind.

Teile uns

KOMMENTARE (1) “Die perfekte Webseite Teil-4”

  • Alex sagt:
    14. September 2011 in 9:16 Antworten

    Vielen Dank für den Artikel! Hab noch nie gesehen, dass die langen Beschreibungen genutzt werden. Für SEO Zwecke reicht ALT und TITLE vollkommen aus und am besten sollen diese die unterschiedlichen Inhalte haben. In der Praxis ist es aber echt schwierig. Die Webagenturen sollen sich aber wirklich Mühe geben, es wird sich lohnen.

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website