\n Es gab eine Zeit, in der Sie sicher zwischen einer Desktop-Webseite und einer mobilen Webseite unterscheiden konnten. So sehr, dass eine ganze Branche um die Umnutzung von Desktop-Sites f\u00fcr Mobilger\u00e4te herum entstand.\n<\/p>\n
\n Eine Zeit lang waren Sie niemand, wenn Sie keine separate mobile Website auf einer separaten Domain hatten. Dann begannen sich die Dinge zu \u00e4ndern.\n<\/p>\n
\n Mobile Displays wurden bis zur Unkenntlichkeit verbessert. So auch mobile Browser. Tablets warf ein weiteres Element in die Gleichung. 4G kam hinzu. Retina-Displays boten Endnutzern ein neues Ma\u00df an Klarheit.\n<\/p>\n
\n Pl\u00f6tzlich war die Grenze zwischen Desktop und Mobilger\u00e4t verschwommen.\n<\/p>\n
\n Gleichzeitig gab es eine wachsende Vielfalt in der Gr\u00f6\u00dfe und Aufl\u00f6sung von Desktop-Displays.\n<\/p>\n
\n Und ein wachsendes Kopfzerbrechen f\u00fcr Webdesigner.\n<\/p>\n
\n Vorbei sind die Zeiten, in denen Sie nur eine Handvoll Viewport-Gr\u00f6\u00dfen ber\u00fccksichtigen mussten. Die Dinge wurden kompliziert.\n<\/p>\n
\n Gl\u00fccklicherweise gab es Abhilfe in Form von Medienanfragen und dem Konzept des responsiven Designs.\n<\/p>\n
\n Dank Medienabfragen wurde es m\u00f6glich, Stile und Layout \u2013 sogar Inhalte \u2013 je nach Ansichtsfensterbreite und Bildschirmaufl\u00f6sung des Benutzers zu variieren. Nat\u00fcrlich sind Media Queries bei weitem nicht das einzige Werkzeug in der Trickkiste des Responsive Designers, aber man kann durchaus sagen, dass sie die Grundlage der Technik bilden.\n<\/p>\n
\n Das waren gro\u00dfartige Neuigkeiten f\u00fcr Mobilger\u00e4te. Responsive Design bedeutete, dass Sie verschiedene Versionen derselben Website effektiv auf verschiedenen Ger\u00e4ten bereitstellen konnten. Und das alles, ohne eine separate mobile Website auf einer anderen Domain zu entwickeln.\n<\/p>\n
\n Website-Eigent\u00fcmer beginnen zu erkennen, dass sich Endbenutzer um die Leistung k\u00fcmmern. Insbesondere Einzelh\u00e4ndler beginnen zu erkennen, dass das Einsparen von Millisekunden ohne Ladezeit zu Millionen in der Bilanz f\u00fchren kann.\n<\/p>\n
\n Gl\u00fccklicherweise bieten responsive Websites einen klaren Leistungsvorteil gegen\u00fcber ihren dedizierten mobilen Cousins: Die Weiterleitung zu einer mobilen Domain entf\u00e4llt.\n<\/p>\n
\n Trotzdem hat es Responsive Design geschafft, sich einen gewissen Ruf f\u00fcr schlechte Leistung zu erwerben.\n<\/p>\n
\n In gewisser Weise ist das ziemlich unfair, aber es lohnt sich, einen Blick auf die zus\u00e4tzlichen Leistungsherausforderungen zu werfen, die reaktionsschnelles Design f\u00fcr Unvorsichtige mit sich bringt \u2026\n<\/p>\n
\n Bilddateien sind gro\u00df. Und weil sie gro\u00df sind, sind sie oft f\u00fcr langsame Ladezeiten verantwortlich. Sie sind daher ein guter Ausgangspunkt f\u00fcr alle, die versuchen, die Leistung einer Website zu optimieren.\n<\/p>\n
\n Leider war eine der ersten L\u00f6sungen zur reaktionsschnellen Bereitstellung von Bildern nicht besonders leistungsf\u00e4hig.\n<\/p>\n
\n Die Technik ist wunderbar einfach. Verwenden Sie einfach max-width: 100%, um sicherzustellen, dass Bilder auf die Breite des enthaltenden Elements skaliert werden:\n<\/p>\n
img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n\n Wenn der Container verkleinert wird, um sich an kleinere Ansichtsfenster anzupassen, werden alle darin enthaltenen Bilder mit verkleinert. Einfach!\n<\/p>\n
\n Aber es gibt ein Problem. Die Gr\u00f6\u00dfe des Bildes kann auf dem Bildschirm schrumpfen, aber die Gr\u00f6\u00dfe der Datei bleibt gleich. Dies ist aus Performance-Sicht alles andere als ideal. Sie k\u00f6nnten ein Bild mit 800 x 800 Pixeln \u00fcber die Leitung senden, nur damit es mit 80 x 80 Pixeln angezeigt wird: Mit anderen Worten, Sie k\u00f6nnten Hunderte (oder Tausende) unn\u00f6tiger Bytes \u00fcbertragen. Das Laden des Bildes dauert nicht nur sehr lange, all diese redundanten Bytes k\u00f6nnten das wertvolle Datenvolumen des Endbenutzers aufbrauchen.\n<\/p>\n
\n Dies ist jedoch nicht der einzige \u2013 und nicht einmal der beste \u2013 Weg, responsive Bilder zu liefern. Zum einen funktioniert ein Bild, das mit einer Breite von 800 Pixeln funktioniert, nicht unbedingt so gut mit verschiedenen Bruchteilen dieser Gr\u00f6\u00dfe.\n<\/p>\n
\n Um dies zu umgehen, k\u00f6nnen Sie eine Medienabfrage verwenden, um je nach Gr\u00f6\u00dfe des Darstellungsbereichs verschiedene Versionen des Bildes anzuzeigen, indem Sie eine Medienabfrage verwenden und Folgendes anzeigen: keine.\n<\/p>\n
\n CSS:<\/strong>\n<\/p>\n@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n HTML:<\/strong>\n<\/p>\n<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n\n Auf diese Weise k\u00f6nnen Sie verschiedene Versionen eines Bildes anzeigen, anstatt nur dasselbe Bild in unterschiedlichen Gr\u00f6\u00dfen. Die Anzahl der Bytes wird jedoch nicht verringert. Tats\u00e4chlich wird die Gesamtseitengr\u00f6\u00dfe gr\u00f6\u00dfer, da alle Bilder geladen werden, unabh\u00e4ngig davon, ob sie angezeigt werden oder nicht.\n<\/p>\n
\n Eine bessere Alternative \u2013 wenn es praktisch ist \u2013 ist die Verwendung von Hintergrundbildern anstelle von <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>Elementen. Dies ist vorzuziehen, da Bilder, auf die in CSS verwiesen wird, nur geladen werden, wenn sie verwendet werden (solange es sich nicht um Daten-URIs handelt):\n<\/p>\n@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n Das funktioniert gut: Besucher laden nur die Bilder herunter, die sie ben\u00f6tigen, wann immer sie sie brauchen. Das Problem ist, dass es unordentlich ist und Inhalte effektiv als Stil behandelt. Als solches f\u00fchrt dies m\u00f6glicherweise zu einem Wartbarkeitsproblem und kann auch dazu f\u00fchren, dass wichtige Bilder von Suchmaschinen ignoriert werden.\n<\/p>\n
\n Warum verwenden Sie stattdessen nicht SVG (skalierbare Vektorgrafiken): ein Bildformat, das von Natur aus skalierbar ist? SVG-Bilder haben auch den Vorteil, dass sie einfach mit CSS gestaltet werden k\u00f6nnen (siehe dieses gro\u00dfartige Tutorial<\/a>, wie man SVGs mit CSS responsive macht). Das ist perfekt f\u00fcr Icons und Logos, aber leider k\u00f6nnen Sie SVGs nicht f\u00fcr Fotos verwenden \u2013 f\u00fcr diese m\u00fcssen Sie auf Rasterformate wie JPEG zur\u00fcckgreifen.\n<\/p>\n\n Eine weitere Option besteht darin, eine von mehreren JavaScript-L\u00f6sungen zu verwenden, um responsive Bilder bereitzustellen. Dies ist eine beliebte Methode, f\u00fcgt jedoch eine weitere Ebene der Komplexit\u00e4t hinzu. Da JavaScript die DOM-Konstruktion blockiert, kann au\u00dferdem jede L\u00f6sung, die JavaScript verwendet, das Rendering aufhalten. Obwohl es einige sehr clevere Plugins gibt, geben Sie sich durch die Einf\u00fchrung von JavaScript in die Gleichung bis zu einem gewissen Grad mit dem kleineren von zwei \u00dcbeln ab.\n<\/p>\n
\n Bis vor kurzem waren dies die einzigen Optionen.\n<\/p>\n
\n Jetzt jedoch bringen die Elemente und und die Attribute srcset und size endlich wirklich reaktionsschnelle Bilder ins Web. <source \/><\/code>Die neue Spezifikation beginnt auch, Browserunterst\u00fctzung zu erhalten, mit vollst\u00e4ndiger Unterst\u00fctzung in Chrome und Opera und Unterst\u00fctzung f\u00fcr die Aufl\u00f6sungsumschaltung in Safari. Bis andere Browser aufholen, gibt es ein ausgezeichnetes JavaScript- Polyfill<\/a>.\n<\/p>\n\n In dieser sch\u00f6nen neuen Welt k\u00f6nnen Sie mit srcset eine Liste mit Kandidatenbildern erstellen, aus der der Browser ausw\u00e4hlen kann. Sie k\u00f6nnen dann eine Medienabfrage im Gr\u00f6\u00dfenattribut verwenden, um die Gr\u00f6\u00dfe festzulegen, in der das Bild angezeigt wird. Wenn Sie das Element zusammen mit Medienabfragen innerhalb eines oder mehrerer Elemente verwenden, k\u00f6nnen Sie einen unterschiedlichen Bereich von Bildern f\u00fcr unterschiedliche Bedingungen angeben (z. B. f\u00fcr Darstellungsfenster bis zu einer bestimmten Breite Bild a, b oder c verwenden und f\u00fcr gr\u00f6\u00dfere Darstellungsfenster Bild verwenden x, y oder z). Dies ist n\u00fctzlich, wenn Sie eine zugeschnittene Version eines Bildes f\u00fcr Benutzer mit kleinen Bildschirmen bereitstellen m\u00fcssen.\n<\/p>\n