Seite für Einzel-Bild im Großformat

Startseite > Einzel-Bild im Großformat

Seite für Einzel-Bild im Großformat

Hier sehen Sie eine Beispiel-Seite zur Anzeige von Bildern im Großformat. Man könnte Bilder zwar auch direkt im Browser oder in einer Light Box, Fancy Box oder sonstigen Javascript-Konstruktion anzeigen lassen. Das wäre aber nicht suchmaschinenfreundlich. Wem die Aufnahme seines Bildes in den Bilderindex von Google™ und Co. wichtig ist, sollte es in eine HTML-Seite einbetten und in Titel, Beschreibung, Überschrift, Fließtext und im alt-Attribut des img-Elements beschreiben.

In der CSS-Stylesheet-Datei stehen mehrere CSS-Klassen fix und fertig zur Nutzung bereit: für Querformat-Bilder in den Auflösungen 600 * 450 px und 640 * 480 px und für Hochformat-Bilder in der Auflösung 345 * 460 px. Mit diesen CSS-Klassen paßt sich die angezeigte Bildgröße automatisch der verfügbaren Bildschirmbreite auch auf schmalen Endgeräten wie Smartphones an: Als Höchstbreite max-width ist jeweils die tatsächliche Breite des Bildes in Pixel eingetragen.

Da die Bilder zentriert ausgerichtet sind, empfiehlt es sich, die Überschriften ebenfalls mittig anzuordnen: <h2 id="a1" class="mittig"> Querformat-Bild ...</h2>

Unten auf dieser Seite erhalten Sie außerdem einige Tipps zur Bildbearbeitung für Webseiten.

⇓ Querformat-Bild: Auflösung 600 * 450 px
⇓ Querformat-Bild: Auflösung 640 * 480 px
⇓ Hochformat-Bild: Auflösung 345 * 460 px
⇓ Tipps zur Bildbearbeitung für Webseiten

Querformat-Bild: Auflösung 600 * 450 px

Für Querformat-Bilder in der Auflösung 600 * 450 px ist die CSS-Klasse bquer600 verfügbar.

Text zur Bildbeschreibung: Dies ist ein Text zwecks Test auf breiten und schmalen Bildschirmen (Bild: Gösta Thomas)

Bei mehreren vorhandenen Bildern bietet man den Besuchern am Besten die Möglichkeit, bequem vor- und zurückzublättern (fertig verwendbare CSS-Klasse blaettern, hier nur Demo-Links), und zeigt auch einen Link zur übergeordneten Bildergalerie an.

« voriges Bild

nächstes Bild »

Bildergalerie

HTML-Quelltext:

<div class="bquer600">
  <img src="./bilder/103-rhodos-akropolis-q-g.jpg" alt="...">
</div>
<div class="bqtxt600">
  Text zur Bildbeschreibung: ... (Bild: Gösta Thomas)
</div>

Querformat-Bild: Auflösung 640 * 480 px

Für Querformat-Bilder in der Auflösung 640 * 480 px ist die CSS-Klasse bquer640 verfügbar.

Text zur Bildbeschreibung: Dies ist ein Text zwecks Test auf breiten und schmalen Bildschirmen (Bild: Gösta Thomas)

« voriges Bild

nächstes Bild »

Bildergalerie

HTML-Quelltext:

<div class="bquer640">
  <img src="./bilder/mostar-kriva-cuprija.jpg" alt="...">
</div>
<div class="bqtxt640">
  Text zur Bildbeschreibung: ... (Bild: Gösta Thomas)
</div>

Hochformat-Bild: Auflösung 345 * 460 px

Für Hochformat-Bilder in der Auflösung 345 * 460 px ist die CSS-Klasse bhoch345 verfügbar.

Rhodos: Meer und Strand an der Nordspitze

Text zur Bildbeschreibung: Dies ist ein Text zwecks Test auf breiten und schmalen Bildschirmen (Bild: Gösta Thomas)

« voriges Bild

nächstes Bild »

HTML-Quelltext:

<div class="bhoch345">
  <img src="./bilder/rhodos-meer-strand.jpg" alt="...">
</div>
<div class="bhtxt345">
  Text zur Bildbeschreibung: ... (Bild: Gösta Thomas)
</div>

Tipps zur Bildbearbeitung für Webseiten

Die hier gezeigten Bilder sind nur Beispielbilder. Aber Sie wollen auf Ihren Webseiten Ihre eigenen Bilder anzeigen. Beachten Sie bitte: Browser können Bilder in verschiedenen Formaten darstellen. Wegen der weichen Darstellung der Übergänge sind das JPG-Format und das WEBP-Format für Fotos besonders geeignet. Das GIF- und das PNG-Format eignen sich eher für Symbole, Logos und Banner.

Keiner Ihrer Besucher erwartet von Ihren Bildern Kunstdruck-Qualität, die am Bildschirm technisch ohnehin nicht möglich ist. Aber fast alle Besucher erwarten, daß eine Seite einschließlich der Bilder spätestens nach einer Sekunde vollständig auf dem Bildschirm angezeigt wird. Stellen Sie also keine Bilddateien auf Ihre Webseiten, deren Download ewig dauert. Als Obergrenze für die Übertragungsgröße von Bildern gelten 50 KB bis höchstens 100 KB. Wenn Sie mehrere Bilder auf einer Seite anzeigen wollen, verwenden Sie Miniaturen, deren Speicherplatz insgesamt diese Grenze nicht übersteigt.

Wichtige Tipps zur Bildbearbeitung:

Verringern Sie die Bildauflösung auf die (auf breiten Bildschirmen) höchstens angezeigte Bildgröße, zB auf 640 * 480 px. Ihre Besucher haben nichts davon, wenn sie Bilder in Kamera-Originalgröße (zB 2048 * 1536 px oder noch größer) runterladen müssen, die dann vom Browser auf 640 * 480 px runterskaliert werden.
Speichern Sie das Bild mit verringerter Qualität (oft reicht eine Bildqualität von 76 bis 80 Prozent schon aus) und verwenden Sie das Kompressionsverfahren Progressiv (kann je nach Bildverarbeitungsprogramm auch anders heißen).
Löschen Sie beim Speichern die eingebetteten EXIF-, IPTC- und XMP-Daten sowie das eingebettete Miniaturbild. Das alles nützt keinem Ihrer Besucher, beansprucht aber mehrere KB Übertragungsgröße.
Ratsam im Hinblick auf SEO ist auch die Verwendung von sprechenden Bilddateinamen wie zB rhodos-akropolis.jpg statt kamera-generierter Namen wie DSC12345.jpg.

Programm-Tipp: XnView Classic:

Falls Sie nicht schon ein Bildbearbeitungsprogramm haben, empfehle ich Ihnen für solche Aufgaben das Programm XnView Classic (Download-Größe: 4,6 bis 25,8 MB je nach Version, kostenlos für privaten Gebrauch, Preis für geschäftliche Nutzung: 29,- €, für Windows, Linux und MacOS, Sprache wählbar: auch Deutsch ). Ich selbst nutze XnView schon seit über 20 Jahren.

« vorige Seite

nächste Seite »