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?

Dateigrösse in der Listen-Übersicht der WordPress-Mediathek anzeigen

3. Dezember 2025 functions.php | Mediathek | WordPress

In der Listenansicht der WordPress-Mediathek lässt sich auf einfache Weise auch die Dateigrösse der gespeicherten Bilder oder anderer Dateien der Mediathek anzeigen. Wie es geht, zeigen wir Ihnen heute.

Bild-Links in WordPress-Beiträgen deaktivieren

11. Februar 2026 functions.php | Mediathek | WordPress

Eine Freundin hatte in ihrem umfangreichen Fotoblog hunderte von Bildern dargestellt. Unglücklicherweise war jedes einzelne Bild mit einem Link auf sich selbst versehen. Wir haben eine Lösung gesucht, um die Bildlinks in allen Beiträgen zu ...

Lästige Dateiportionierung in der WordPress-Mediathek deaktivieren

19. April 2026 functions.php | Mediathek | WordPress

Die Mediathek von WordPress zeigt enthaltene Files standardmässig nur portionenweise: 80 Dateien und dann kommt ein «Mehr Laden»-Button, der mich nervt. Muss nicht sein. Heute bauen wir den «Infinite Scroll» wieder ein. Wir benötigen eine ...

Plugin-Empfehlung «WP SmartCrop» – für Bildausschnitte, die zeigen, was gemeint ist

11. Juli 2021 Mediathek | Plugins | WordPress

Ab und an geht ja WordPress ein wenig willkürlich mit den Bildausschnitten um, welche die Mediathek automatisch erstellt. Bei Porträtbildern kann da auch mal der Hals als zentrales Element im Fokus stehen, bei Landschaftsaufnahmen ein völlig ...

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.