Lesefortschritt:

Responsive Bildversionen mit dem picture-Tag festlegen

29. Juni 2025 | HTML, Mediathek

Trick # 472 | Dieser Beitrag beinhaltet 532 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Responsive-Webdesign ist fraglos wichtig. Doch bei Bildern ist das nicht ganz ohne. Dabei können Sie auch mit einfachem HTML Bildversionen anzeigen lassen, die zur Desktop- oder Mobilversion passen. Der picture-Tag hilft Ihnen dabei.

Kopieren Sie folgenden HTML-Code und fügen Sie ihn in der Text- oder HTML-Ansicht Ihres WYSIWYG-Editors ein. Passen Sie dabei die Pfade zum jeweils zu verwendenden Bild an:

<picture>
   <source media="(min-width: 968px)" srcset="https://ihredomain.ch/pfad-zum-DESKTOP-bild.jpg">
   <source media="(min-width: 360px)" srcset="https://ihredomain.ch/pfad-zum-MOBILE-bild.jpg">
   <img src="https://ihredomain.ch/pfad-zum-FALLBACK-bild.jpg">
</picture>

Der <img>-Tag wird nur dann verwendet, wenn das Ansichtsfenster mit keinem der <source>-Tags übereinstimmt oder wenn der Browser <source> nicht unterstützt. Es ist also der gute Platz für ein Fallback-Bild.

In unserem Beispiel sieht das dann so aus:

Desktop-Ansicht

Mobile-Ansicht

neueres iPhone

Fallback-Ansicht

älteres iPhone

Locker! Oder?

Black & White: Website im Handumdrehen schwarz-weiss darstellen

13. Februar 2022 CSS-Stylesheet | HTML | WordPress

Das Internet ist bunt. Farben in allen Schattierungen - mal grell, mal pastell. Schwarz-weiss ist out. Falls die Website aber (aus welchem Grund auch immer) dauerhaft oder temporär in dezenten Grautönen dargestellt werden soll, hilft ein ...

Sei gegrüsst – Die tageszeitabhängige Begrüssung

1. April 2021 HTML | Scripts

Das «Willkommen» ist wohl der Klassiker unter den Begrüssungstexten auf Websites. Einigen war das wohl zu schnöde und sie wichen auf tageszeitabhängige Begrüssungen aus. Ob das jetzt sinnvoll ist oder nicht: wir wollen wenigstens mal zeigen, ...

WordPress-Theme die Funktion «Beitragsbild» hinzufügen

7. Februar 2021 functions.php | Mediathek | WordPress

Es gibt kaum WordPress-Themes, die nicht bereits die Funktion «Beitragsbild» anbieten. Fehlt sie in Ihrem Theme, kann sie rasch nachgerüstet werden. Ein ganz kleiner Hack zwischendurch.

Richtig coole Tooltips – nur mit HTML und CSS-Code

2. Juli 2025 CSS-Stylesheet | HTML

Tool-Tipps sind kleine Erklärungstexte, welche beim Hovern z.B. über einen Text angezeigt werden. Die Tool-Tipps erscheinen meist in langweiligem grau-in-grau. Doch das muss nicht sein. Richtig coole Tool-Tipps sind nämlich im Handumdrehen möglich.

Keine Inhalte gefunden.

Divi-Module

Dr.-Code-Specials

Geplante Beiträge

Child-Theme erstellen

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.

mehr Infos

Member-Bereich

Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.

Jetzt kostenlos und spamfrei registrieren

Themenidee?

Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

Themenvorschlag

Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.

Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.