Responsive Webseiten-Vorlage

Menü

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

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

Akropolis von Rhodos: der Apollo-Tempel
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.

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.

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

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)

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:

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.