{"id":123657,"date":"2025-03-03T08:20:27","date_gmt":"2025-03-03T06:20:27","guid":{"rendered":"https:\/\/elementor.com\/blog\/wie-man-ein-bild-in-css-html-skaliert\/"},"modified":"2026-01-09T16:52:03","modified_gmt":"2026-01-09T14:52:03","slug":"wie-man-ein-bild-in-css-html-skaliert","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/","title":{"rendered":"Wie man ein Bild in CSS HTML skaliert"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

An dieser Stelle kommt die Bildgr\u00f6\u00dfen\u00e4nderung mittels CSS ins Spiel. Mit CSS<\/a> (Cascading Style Sheets) verf\u00fcgen Sie \u00fcber leistungsf\u00e4hige Werkzeuge, um zu steuern, wie Bilder auf Ihrer Webseite erscheinen, und stellen sicher, dass sie optimal aussehen, ohne die Ladezeiten der Seite zu beeintr\u00e4chtigen.<\/span><\/p>\n

Dieser Leitfaden wird Sie mit allem ausstatten, was Sie ben\u00f6tigen, um die Bildgr\u00f6\u00dfen\u00e4nderung in CSS wie ein Profi zu beherrschen. Ob Sie einen pers\u00f6nlichen Blog, einen eleganten Online-Shop oder eine komplexe Webanwendung erstellen, Sie werden lernen, wie Sie Ihre Bilder zum Strahlen bringen. <\/span><\/p>\n

Grundlagen der Bildgr\u00f6\u00dfen\u00e4nderung verstehen <\/span><\/h2>\n

Bilddimensionen und Aufl\u00f6sung<\/span><\/h3>\n

Bevor wir CSS-Techniken erkunden, beginnen wir damit, die Kernkonzepte von Bilddimensionen und Aufl\u00f6sung zu verstehen.<\/span><\/p>\n

    \n
  • Pixel:<\/b> Bilder im Web bestehen aus winzigen Quadraten, die als Pixel bezeichnet werden. Jedes Pixel enth\u00e4lt Farbinformationen. Je mehr Pixel ein Bild hat, desto h\u00f6her ist seine Aufl\u00f6sung und desto mehr Details kann es darstellen.<\/span><\/li>\n
  • Bilddimensionen:<\/b> Bilddimensionen werden in Breite und H\u00f6he ausgedr\u00fcckt, gemessen in Pixeln (z.B. 1200px x 800px). Diese Dimensionen bestimmen den physischen Raum, den ein Bild auf einer Webseite einnimmt.<\/span><\/li>\n
  • Seitenverh\u00e4ltnis:<\/b> Das Seitenverh\u00e4ltnis ist die proportionale Beziehung zwischen der Breite und H\u00f6he eines Bildes (z.B. 16:9, 4:3). Die Beibehaltung des Seitenverh\u00e4ltnisses ist entscheidend bei der Gr\u00f6\u00dfen\u00e4nderung von Bildern, um Verzerrungen zu vermeiden.<\/span><\/li>\n<\/ul>\n

    Bilddateiformate<\/span><\/h3>\n

    Das Web unterst\u00fctzt verschiedene Bilddateiformate, jedes mit seinen St\u00e4rken und idealen Anwendungsf\u00e4llen. Lassen Sie uns kurz die g\u00e4ngigsten untersuchen, denen Sie begegnen werden:<\/span><\/p>\n

      \n
    1. JPEG (JPG):<\/b> Dieses Format eignet sich am besten f\u00fcr Fotografien und Bilder mit komplexen Farben und Farbverl\u00e4ufen. Es unterst\u00fctzt einstellbare Kompression, um Qualit\u00e4t und Dateigr\u00f6\u00dfe auszubalancieren.<\/span><\/li>\n
    2. PNG: <\/b> ist ideal f\u00fcr Logos, Grafiken und Bilder, bei denen Transparenz ben\u00f6tigt wird. Es unterst\u00fctzt verlustfreie Kompression (kein Qualit\u00e4tsverlust).<\/span><\/li>\n
    3. GIF:<\/b> Wird haupts\u00e4chlich f\u00fcr einfache Animationen und Grafiken verwendet. Begrenzte Farbpalette.<\/span><\/li>\n
    4. SVG: <\/b> ist ein vektorbasiertes Format, perfekt f\u00fcr Logos, Icons und Illustrationen. Es ist unendlich skalierbar ohne Qualit\u00e4tsverlust.<\/span><\/li>\n<\/ol>\n

      Das Verst\u00e4ndnis dieser Dateiformate ist wichtig, da die Wahl des richtigen Formats erheblichen Einfluss auf die Gr\u00f6\u00dfe Ihrer Webbilder und deren Ladezeiten haben kann. Und denken Sie daran, GenericProductName unterst\u00fctzt nahtlos all diese Dateitypen und erm\u00f6glicht es Ihnen, das perfekte Bild f\u00fcr jede Situation auf Ihrer Webseite zu verwenden.<\/span><\/p>\n

      Auswirkungen auf die Web-Performance<\/span><\/h3>\n

      Warum ist all dieses Gerede \u00fcber Pixel, Bildformate und Gr\u00f6\u00dfen\u00e4nderung wichtig? Es l\u00e4uft auf die Web-Performance hinaus. Gro\u00dfe, nicht optimierte Bilder sind ein Hauptgrund f\u00fcr langsame Webseiten. Hier ist der Grund:<\/span><\/p>\n

        \n
      • Bandbreitenverbrauch:<\/b> Gro\u00dfe Bilddateien erfordern mehr Daten, die vom Server zum Browser des Besuchers \u00fcbertragen werden m\u00fcssen, was wertvolle Bandbreite verbraucht.<\/span><\/li>\n
      • Erh\u00f6hte Ladezeiten:<\/b> Der Browser ben\u00f6tigt Zeit, um gro\u00dfe Bilddateien herunterzuladen und zu verarbeiten, was die Anzeige der gesamten Seite verz\u00f6gert und zu einer frustrierenden Benutzererfahrung f\u00fchrt.<\/span><\/li>\n
      • Negative SEO-Auswirkungen:<\/b> Suchmaschinen wie Google betrachten die Seitengeschwindigkeit als Ranking-Faktor. Langsame Webseiten k\u00f6nnen in den Suchergebnissen benachteiligt werden.<\/span><\/li>\n
      • Schlechte Benutzererfahrung (UX):<\/b> Nicht optimierte Bilder, insbesondere auf mobilen Ger\u00e4ten mit langsameren Verbindungen, k\u00f6nnen die Benutzererfahrung ruinieren und dazu f\u00fchren, dass Besucher Ihre Webseite verlassen, bevor sie vollst\u00e4ndig geladen ist.<\/span><\/li>\n<\/ul>\n

        Deshalb ist die Bildgr\u00f6\u00dfen\u00e4nderung zusammen mit anderen Optimierungstechniken ein Eckpfeiler beim Aufbau schneller, ansprechender Webseiten \u2013 besonders wenn Sie ein visuell reichhaltiges Erlebnis bieten m\u00f6chten!<\/span><\/p>\n

        CSS-Techniken zur Bildgr\u00f6\u00dfen\u00e4nderung<\/span><\/h2>\n

        width- und height-Eigenschaften<\/span><\/h3>\n

        Die grundlegendste Methode zur Gr\u00f6\u00dfen\u00e4nderung von Bildern in CSS ist die Verwendung der <\/span>width<\/span>– und <\/span>height<\/span> -Eigenschaften. Sie k\u00f6nnen die angezeigte Gr\u00f6\u00dfe eines Bildes direkt steuern, indem Sie diese Eigenschaften mit verschiedenen Werten festlegen:<\/span><\/p>\n

          \n
        1. Pixel (px):<\/ci> Diese bieten die pr\u00e4ziseste Kontrolle \u00fcber Bilddimensionen (z.B. Breite: 300px; H\u00f6he: 200px).<\/ci><\/li>\n
        2. Prozents\u00e4tze (%):<\/ci> Dies macht Bilder responsiv, indem sie relativ zu ihrem \u00fcbergeordneten Container skaliert werden k\u00f6nnen (z.B. Breite: 50%; H\u00f6he: auto, um ein Bild die H\u00e4lfte der Breite seines Containers einnehmen zu lassen).<\/ci><\/li>\n<\/ol>\n

          Beispielcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\n\t\t\t\t\tHTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 400px; height: 300px;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23408f6 elementor-widget elementor-widget-text-editor\" data-id=\"23408f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Wichtiger Hinweis:<\/ci><ci id=\"gid_1\"> Ber\u00fccksichtigen Sie stets responsives Design bei der Verwendung von <\/ci><ci id=\"gid_2\">width<\/ci><ci id=\"gid_3\"> und <\/ci><ci id=\"gid_4\">height<\/ci><span style=\"font-weight: 400;\">. Mit Elementor verf\u00fcgen Sie \u00fcber intuitive visuelle Steuerelemente zur Anpassung von Bildgr\u00f6\u00dfen f\u00fcr verschiedene Bildschirmgr\u00f6\u00dfen, um sicherzustellen, dass Ihre Bilder auf jedem Ger\u00e4t perfekt aussehen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">max-width und max-height Eigenschaften<\/span><\/h3>\n<p><ci id=\"gid_0\">W\u00e4hrend <\/ci><ci id=\"gid_1\">width<\/ci><ci id=\"gid_2\"> und <\/ci><ci id=\"gid_3\">height<\/ci><ci id=\"gid_4\"> explizite Dimensionen festlegen, sind die Eigenschaften <\/ci><ci id=\"gid_5\">max-width<\/ci><ci id=\"gid_6\"> und <\/ci><ci id=\"gid_7\">max-height<\/ci><ci id=\"gid_8\"> \u00e4u\u00dferst n\u00fctzlich, um Gr\u00f6\u00dfengrenzen festzulegen und gleichzeitig die Responsivit\u00e4t beizubehalten.<\/ci><\/p>\n<p><span style=\"font-weight: 400;\">So funktionieren sie:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">max-width:<\/ci><ci id=\"gid_1\"> Verhindert, dass ein Bild eine bestimmte Breite \u00fcberschreitet, erm\u00f6glicht aber bei Bedarf eine Verkleinerung (z.B. <\/ci><ci id=\"gid_2\">max-width: 100%;<\/ci><ci id=\"gid_3\"> stellt sicher, dass das Bild niemals mehr als 100% der Breite seines Containers einnimmt).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">max-height:<\/ci><ci id=\"gid_1\"> Funktioniert \u00e4hnlich und setzt eine Obergrenze f\u00fcr die H\u00f6he eines Bildes (z.B. <\/ci><ci id=\"gid_2\">max-height: 400px;<\/ci><ci id=\"gid_3\"> w\u00fcrde verhindern, dass das Bild h\u00f6her als 400 Pixel wird).<\/ci><\/li>\n<\/ul>\n<p><b>Warum diese verwenden?<\/b><span style=\"font-weight: 400;\"> Sie sind ein Schl\u00fcsselinstrument, um zu verhindern, dass Bilder aus ihren Containern ausbrechen und Ihr Layout st\u00f6ren, insbesondere bei responsiven Designs.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Beispielcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b72f0 elementor-widget elementor-widget-code-highlight\" data-id=\"13b72f0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"max-width: 100%; height: auto;\"> \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd04060 elementor-widget elementor-widget-text-editor\" data-id=\"dd04060\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Profi-Tipp:<\/ci><ci id=\"gid_1\"> Oft ist das Setzen von <\/ci><ci id=\"gid_2\">max-width: 100%;<\/ci><ci id=\"gid_3\"> mit <\/ci><ci id=\"gid_4\">height: auto;<\/ci><ci id=\"gid_5\"> Ihre beste Wahl f\u00fcr responsives Bildgr\u00f6\u00dfen\u00e4nderung, aber wir werden die Gr\u00fcnde daf\u00fcr in der n\u00e4chsten Unter\u00fcberschrift er\u00f6rtern!<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Beibehaltung des Seitenverh\u00e4ltnisses mit &#8218;auto&#8216;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Erinnern Sie sich an die Seitenverh\u00e4ltnisse, die wir zuvor besprochen haben? Die Beibehaltung dieser w\u00e4hrend der Gr\u00f6\u00dfen\u00e4nderung ist entscheidend, um zu verhindern, dass Ihre Bilder gequetscht, gestreckt oder verzerrt aussehen. Hier kommt der  <\/span><ci id=\"gid_0\">auto<\/ci><ci id=\"gid_1\">-Wert zur Rettung:<\/ci><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Festlegung einer Dimension, die andere &#8218;auto&#8216;:<\/ci><ci id=\"gid_1\"> Wenn Sie entweder <\/ci><ci id=\"gid_2\">width<\/ci><ci id=\"gid_3\"> oder <\/ci><ci id=\"gid_4\">height<\/ci><ci id=\"gid_5\"> auf einen spezifischen Wert (Pixel oder Prozentsatz) setzen und die entgegengesetzte Dimension auf <\/ci><ci id=\"gid_6\">auto<\/ci><ci id=\"gid_7\">, berechnet der Browser automatisch die fehlende Dimension, um das Seitenverh\u00e4ltnis zu erhalten.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Warum das wichtig ist<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Visuelle Integrit\u00e4t:<\/ci><ci id=\"gid_1\"> Stellt sicher, dass Ihre Bilder bestm\u00f6glich und wie beabsichtigt aussehen.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Layout-Harmonie:<\/ci><ci id=\"gid_1\"> Verhindert, dass Bilder das Design Ihrer Website st\u00f6ren.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Professionalit\u00e4t:<\/ci><ci id=\"gid_1\"> Verzerrte Bilder k\u00f6nnen einen unprofessionellen Eindruck vermitteln.<\/ci><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Beispielcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a0b08 elementor-widget elementor-widget-code-highlight\" data-id=\"c9a0b08\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 100%; height: auto;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e1ee92 elementor-widget elementor-widget-text-editor\" data-id=\"1e1ee92\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Elementor-Tipp:<\/ci><ci id=\"gid_1\"> Der visuelle Editor von Elementor macht es unglaublich einfach, Bilder zu skalieren und dabei automatisch die Seitenverh\u00e4ltnisse beizubehalten, was Ihnen ein perfektes Gleichgewicht zwischen Kontrolle und Bequemlichkeit bietet.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Hintergrundbilder und background-size<\/span><\/h3>\n<p><ci id=\"gid_0\">Anstatt das <\/ci><ci id=\"gid_1\"><cx id=\"gid_2\"><\/cx>img<cx id=\"gid_3\"><\/cx><\/ci><span style=\"font-weight: 400;\"> -Tag zu verwenden, erm\u00f6glicht CSS das Setzen von Bildern als Hintergr\u00fcnde verschiedener Elemente. Dies er\u00f6ffnet kreative Designm\u00f6glichkeiten und leistungsstarke Skalierungstechniken unter Verwendung der  <\/span><ci id=\"gid_0\">background-size<\/ci><ci id=\"gid_1\">-Eigenschaft.<\/ci><\/p>\n<p><ci id=\"gid_0\">Hier sind die Schl\u00fcsselwerte f\u00fcr <\/ci><ci id=\"gid_1\">background-size<\/ci><ci id=\"gid_2\">:<\/ci><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\">  Das Bild skaliert, um vollst\u00e4ndig in den Container zu passen, w\u00e4hrend es sein Seitenverh\u00e4ltnis beibeh\u00e4lt. Einige Bereiche des Hintergrunds k\u00f6nnen leer bleiben, wenn das Seitenverh\u00e4ltnis des Bildes nicht mit dem des Containers \u00fcbereinstimmt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\">  Das Bild skaliert, um den Container vollst\u00e4ndig zu bedecken, w\u00e4hrend es sein Seitenverh\u00e4ltnis beibeh\u00e4lt. Dies kann dazu f\u00fchren, dass Teile des Bildes beschnitten werden, wenn die Seitenverh\u00e4ltnisse nicht \u00fcbereinstimmen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">100% 100%:<\/ci><ci id=\"gid_1\"> Zwingt das Bild dazu, sich zu strecken, um die gesamte Breite und H\u00f6he des Containers zu f\u00fcllen, was m\u00f6glicherweise das Seitenverh\u00e4ltnis verzerrt.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Benutzerdefinierte Werte:<\/ci><ci id=\"gid_1\"> Sie k\u00f6nnen auch spezifische Pixel- oder Prozentwerte f\u00fcr <\/ci><ci id=\"gid_2\">background size (z.B. background-size: 500px 300px)<\/ci><ci id=\"gid_3\"> festlegen.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispielcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90bf6ea elementor-widget elementor-widget-code-highlight\" data-id=\"90bf6ea\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.my-element {\r\n  background-image: url(\"my-image.jpg\");\r\n  background-size: cover; \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9b8899 elementor-widget elementor-widget-text-editor\" data-id=\"a9b8899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Anwendungsf\u00e4lle<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Hero-Bereiche:<\/ci><ci id=\"gid_1\"> Erstellen Sie visuell beeindruckende Hero-Bereiche mit gro\u00dfen Hintergrundbildern.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Text-Overlays:<\/ci><ci id=\"gid_1\"> Kombinieren Sie Hintergrundbilder mit Text f\u00fcr ansprechende Effekte.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Muster:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie kleine, sich wiederholende Bilder, um interessante Hintergrundmuster zu erzeugen.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">object-fit-Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  Eigenschaft bietet eine pr\u00e4zise Kontrolle dar\u00fcber, wie ein Bild (oder Video) in seine Inhaltsbox eingepasst wird. Betrachten Sie es als das CSS-Pendant zu den  <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\">&#8211; und <\/span><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\">-Konzepten, die wir bei <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> er\u00f6rtert haben, jedoch mit noch mehr Optionen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fill:<\/b><span style=\"font-weight: 400;\"> Das Bild wird gestreckt (m\u00f6glicherweise verzerrt), um die gesamte Inhaltsbox auszuf\u00fcllen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> Das Bild wird skaliert, um vollst\u00e4ndig in die Inhaltsbox zu passen, wobei das Seitenverh\u00e4ltnis beibehalten wird (\u00e4hnlich wie <\/span><span style=\"font-weight: 400;\">background-size: contain<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> Das Bild wird skaliert, um die gesamte Inhaltsbox abzudecken, wobei das Seitenverh\u00e4ltnis beibehalten wird. M\u00f6glicherweise werden Teile des Bildes beschnitten (\u00e4hnlich wie <\/span><span style=\"font-weight: 400;\">background-size: cover<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none:<\/b><span style=\"font-weight: 400;\"> Das Bild wird in seiner Originalgr\u00f6\u00dfe angezeigt, ohne Gr\u00f6\u00dfen\u00e4nderung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale-down:<\/b><span style=\"font-weight: 400;\"> Das Bild w\u00e4hlt zwischen <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> und <\/span><span style=\"font-weight: 400;\">none<\/span><span style=\"font-weight: 400;\">, je nachdem, ob die Bildgr\u00f6\u00dfe kleiner oder gr\u00f6\u00dfer als die Inhaltsbox ist.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispielcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f13963 elementor-widget elementor-widget-code-highlight\" data-id=\"8f13963\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3e025 elementor-widget elementor-widget-text-editor\" data-id=\"fc3e025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Visuelle Vergleiche:<\/b><span style=\"font-weight: 400;\"> Es ist oft am besten, die verschiedenen <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\"> -Werte in Aktion zu sehen, um ihre Unterschiede vollst\u00e4ndig zu erfassen. Erw\u00e4gen Sie die Aufnahme einer Reihe von Bildbeispielen, die jeden Wert innerhalb dieses Artikelabschnitts demonstrieren.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Wann object-fit verwendet werden sollte<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Produktbilder:<\/b><span style=\"font-weight: 400;\"> Gew\u00e4hrleisten Sie eine konsistente Darstellung von Produktfotos innerhalb von Containern mit fester Gr\u00f6\u00dfe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Miniaturansichten:<\/b><span style=\"font-weight: 400;\"> Erstellen Sie einheitliche Miniaturansichtsgalerien, bei denen die Seitenverh\u00e4ltnisse variieren k\u00f6nnen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vom Benutzer hochgeladene Inhalte:<\/b><span style=\"font-weight: 400;\"> Kontrollieren Sie, wie potenziell unvorhersehbare Bildgr\u00f6\u00dfen angezeigt werden.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Responsive Bildgr\u00f6\u00dfenanpassung <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Media Queries<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Medienabfragen sind der Eckpfeiler des responsiven Webdesigns. Sie erm\u00f6glichen es Ihnen, unterschiedliche CSS-Stile basierend auf spezifischen Bedingungen anzuwenden, wie zum Beispiel der Bildschirmgr\u00f6\u00dfe oder der Ger\u00e4teausrichtung des Browsers des Besuchers.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Grundlegende Medienabfragen-Syntax<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8e6a6 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8e6a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\n\n@media (min-width: 768px) {\n\n\u00a0\u00a0\/* CSS styles for screens 768px or wider *\/\n\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c89ad42 elementor-widget elementor-widget-text-editor\" data-id=\"c89ad42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Breakpoints:<\/b><span style=\"font-weight: 400;\"> Die <\/span><span style=\"font-weight: 400;\">min-width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\">, etc., innerhalb von Medienabfragen definieren Breakpoints, an denen sich Ihr Design \u00e4ndert. \u00dcbliche Breakpoints zielen auf Tablets, Mobiltelefone und gr\u00f6\u00dfere Desktop-Computer ab.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Medienabfragen f\u00fcr Bilder<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Sie k\u00f6nnen Medienabfragen verwenden, um Bilder \u00fcber verschiedene Bildschirmgr\u00f6\u00dfen hinweg unterschiedlich zu skalieren:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c475496 elementor-widget elementor-widget-code-highlight\" data-id=\"c475496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-560d7f7 elementor-widget elementor-widget-text-editor\" data-id=\"560d7f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Erl\u00e4uterung:<\/b><span style=\"font-weight: 400;\"> In diesem Beispiel nehmen Bilder auf kleineren Bildschirmen die volle Containerbreite ein und schrumpfen dann auf 50% der Containerbreite auf Bildschirmen, die breiter als 768px sind.<\/span><\/p>\n<p><b>Wichtiger Hinweis:<\/b><span style=\"font-weight: 400;\">  Denken Sie immer zuerst an mobile Ger\u00e4te! Beginnen Sie mit dem Design f\u00fcr kleinere Bildschirme und verwenden Sie dann Medienabfragen, um das Layout f\u00fcr gr\u00f6\u00dfere Displays schrittweise zu verbessern.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Fl\u00fcssige Skalierungstechniken<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend Medienabfragen Ihnen viel Kontrolle geben, m\u00f6chten Sie manchmal, dass Bilder \u00fcber alle Bildschirmgr\u00f6\u00dfen hinweg gleichm\u00e4\u00dfig und proportional skalieren, nicht nur an bestimmten Breakpoints. Hier sind ein paar M\u00f6glichkeiten, dies zu erreichen:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Max-width: 100% und Height: auto (Wiederholung):<\/b><span style=\"font-weight: 400;\">  Wenn Sie sich erinnern, haben wir diese Technik fr\u00fcher vorgestellt. Ihre wahre St\u00e4rke liegt in ihrer automatischen Anpassungsf\u00e4higkeit \u2013 Bilder werden niemals die Breite ihres Containers \u00fcberschreiten, und ihre H\u00f6he wird proportional angepasst.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kombination von Prozentangaben mit Medienabfragen:<\/b><span style=\"font-weight: 400;\">  Sie k\u00f6nnen Prozentangaben f\u00fcr die Breite innerhalb von Medienabfragen verwenden, um fl\u00fcssige Layouts mit gezielten Anpassungen zu erstellen. Zum Beispiel:<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-478ee4c elementor-widget elementor-widget-code-highlight\" data-id=\"478ee4c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg { \r\n  width: 100%; \r\n  height: auto;  \r\n}\r\n@media (min-width: 768px) {\r\n  img {\r\n    width: 50%;  \/* Images occupy 50% of their container on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc19d3d elementor-widget elementor-widget-text-editor\" data-id=\"fc19d3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Fl\u00fcssige Gr\u00f6\u00dfenanpassung ist nicht immer die perfekte L\u00f6sung. Manchmal funktionieren Bilder mit festen Abmessungen besser innerhalb bestimmter Designelemente. Es ist wichtig, die richtigen Skalierungstechniken strategisch basierend auf Ihrem Gesamtlayout zu w\u00e4hlen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Das &#8217;srcset&#8216;-Attribut<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\">-Attribut, das mit dem <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> -Tag verwendet wird, bietet eine M\u00f6glichkeit, dem Browser mehrere Versionen desselben Bildes in unterschiedlichen Aufl\u00f6sungen anzubieten. Dies erm\u00f6glicht es dem Browser, das am besten geeignete Bild basierend auf dem Ger\u00e4t und der Bildschirmgr\u00f6\u00dfe des Benutzers auszuw\u00e4hlen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Grundlegende Syntax<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2825604 elementor-widget elementor-widget-code-highlight\" data-id=\"2825604\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\"\r\n     srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44082ef elementor-widget elementor-widget-text-editor\" data-id=\"44082ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Der &#8218;w&#8216;-Deskriptor:<\/b><span style=\"font-weight: 400;\"> Informiert den Browser \u00fcber die Breite jeder Bildversion.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Vorteile<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verbesserte Leistung durch Vermeidung unn\u00f6tig gro\u00dfer Bilddownloads.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimierte Darstellung f\u00fcr hochaufl\u00f6sende Bildschirme.<\/span><\/li>\n<\/ol>\n<p><b>Hinweis:<\/b> <span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> ist ein leistungsf\u00e4higes Instrument f\u00fcr fortgeschrittene responsive Bildoptimierung, das h\u00e4ufig in Kombination mit anderen von uns diskutierten Techniken verwendet wird.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Optimierung und beste Praktiken <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Bildoptimierungswerkzeuge<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend Sie Bilder manuell mit Bildbearbeitungssoftware verkleinern k\u00f6nnen, rationalisieren dedizierte Optimierungswerkzeuge den Prozess und erschlie\u00dfen zus\u00e4tzliche Leistungsgewinne:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Elementors Bildoptimierer: <\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Dieses leistungsstarke Werkzeug ist nahtlos in die Elementor-Erfahrung integriert und vereinfacht die Bildoptimierung innerhalb Ihres WordPress-Workflows.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Wichtige \u00dcberlegungen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verlustbehaftet vs. Verlustfrei:<\/b><span style=\"font-weight: 400;\"> Verlustbehaftete Komprimierung bietet eine gr\u00f6\u00dfere Reduzierung der Dateigr\u00f6\u00dfe, jedoch mit einem gewissen Verlust an Bildqualit\u00e4t. Verlustfreie Komprimierung bewahrt die volle Qualit\u00e4t auf Kosten geringf\u00fcgig gr\u00f6\u00dferer Dateien. W\u00e4hlen Sie basierend auf dem Bildtyp sorgf\u00e4ltig aus.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bildformat (Wiederholung):<\/b><span style=\"font-weight: 400;\"> Bedenken Sie, dass JPEGs im Allgemeinen besser f\u00fcr Fotos geeignet sind, w\u00e4hrend PNGs bei Grafiken hervorragend abschneiden. Die Wahl des richtigen Formats vor der Optimierung ist entscheidend!<\/span><\/li>\n<\/ol>\n<p><b>Profi-Tipp:<\/b><span style=\"font-weight: 400;\"> Oft bietet die Verwendung einer Kombination aus Elementor Bildoptimierer f\u00fcr die grundlegende Bildbearbeitung und spezialisierten externen Diensten f\u00fcr spezifische Anforderungen die gr\u00f6\u00dfte Flexibilit\u00e4t und die besten Ergebnisse.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">image-rendering Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">image-rendering<\/span><span style=\"font-weight: 400;\">  Eigenschaft gibt dem Browser Hinweise darauf, wie er das Rendering priorisieren sollte, wenn ein Bild vergr\u00f6\u00dfert oder verkleinert wird. Hier sind die g\u00e4ngigen Werte:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto:<\/b><span style=\"font-weight: 400;\">  Der Standardwert des Browsers. Es wird typischerweise versucht, ein Gleichgewicht zwischen Geschwindigkeit und Qualit\u00e4t zu erreichen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>pixelated:<\/b><span style=\"font-weight: 400;\"> Beh\u00e4lt ein scharfes, pixeliges Erscheinungsbild bei, ideal f\u00fcr Retro-Grafiken oder wenn absichtlich harte Pixelkanten bei der Vergr\u00f6\u00dferung erhalten bleiben sollen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>smooth:<\/b><span style=\"font-weight: 400;\"> Priorisiert ein weicheres, weniger pixeliges Aussehen (dies kann bei der Vergr\u00f6\u00dferung von Bildern zu Unsch\u00e4rfe f\u00fchren).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispiel<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5c62 elementor-widget elementor-widget-code-highlight\" data-id=\"16d5c62\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  image-rendering: pixelated; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f3c46 elementor-widget elementor-widget-text-editor\" data-id=\"78f3c46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Wann es anzuwenden ist<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixel-Art:<\/b> <span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> ist essentiell f\u00fcr Pixel-Art, um deren beabsichtigte \u00c4sthetik beizubehalten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Leistungs\u00fcberlegungen:<\/b><span style=\"font-weight: 400;\"> In einigen F\u00e4llen kann die Wahl von <\/span><span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> geringf\u00fcgige Verbesserungen der Renderinggeschwindigkeit f\u00fcr vergr\u00f6\u00dferte Bilder bieten.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Moderne Browser sind recht gut in der automatischen Bildwiedergabe. Verwenden Sie  <\/span><span style=\"font-weight: 400;\">image rendering<\/span><span style=\"font-weight: 400;\"> strategisch, da das \u00dcberschreiben der Standardeinstellungen manchmal unbeabsichtigte Konsequenzen haben kann.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">\u00dcberlegungen zur Gr\u00f6\u00dfen\u00e4nderung f\u00fcr spezifische Bildtypen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns die wichtigsten Dinge aufschl\u00fcsseln, die bei der Gr\u00f6\u00dfen\u00e4nderung einiger der h\u00e4ufigsten Bildtypen, denen Sie auf Websites begegnen werden, zu beachten sind:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Hero-Bilder<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gro\u00dfe, aufmerksamkeitserregende Bilder m\u00fcssen in allen Gr\u00f6\u00dfen atemberaubend aussehen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Die Optimierung der Dateigr\u00f6\u00dfe ist entscheidend (erw\u00e4gen Sie Formate wie WebP, falls unterst\u00fctzt).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verwenden Sie Medienabfragen oder <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\">, um eine optimale Aufl\u00f6sung f\u00fcr verschiedene Bildschirmgr\u00f6\u00dfen sicherzustellen.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Bildergalerien<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verwenden Sie Miniaturansichten, die schnell laden und auf optimierte Vollversionen verlinken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementieren Sie Techniken wie Lazy Loading f\u00fcr reibungslose Bilderladeerlebnisse.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Konsistente Seitenverh\u00e4ltnisse \u00fcber Galeriebilder hinweg schaffen einen polierten Look.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Produktbilder (E-Commerce)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hochwertige Bilder sind f\u00fcr die Steigerung von Konversionen unerl\u00e4sslich.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u00f6glicherweise wird eine Zoomfunktion ben\u00f6tigt, die gr\u00f6\u00dfere Bildformate erfordert.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Konsistente Gr\u00f6\u00dfen\u00e4nderung und Wei\u00dfraum schaffen einen \u00fcbersichtlichen Produktkatalog.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Erw\u00e4gen Sie die Verwendung eines <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cdn\/\"   title=\"What Is A CDN (Content Delivery Network)?\u00a02026 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"33305\">CDN<\/a> (wie Cloudflare Enterprise, das in Elementor Hosting enthalten ist) f\u00fcr eine schnelle weltweite Bildauslieferung.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Von Benutzern hochgeladene Inhalte<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementieren Sie serverseitige Plausibilit\u00e4tspr\u00fcfungen, um Bilddimensionen und Dateigr\u00f6\u00dfen zu begrenzen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Automatische Optimierung zur Verhinderung des Hochladens massiver, nicht optimierter Bilder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Zeigen Sie den Benutzern klare Richtlinien zu akzeptierten Bildformaten und Gr\u00f6\u00dfenbeschr\u00e4nkungen an.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Browser-Kompatibilit\u00e4t<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend moderne Browser eine hervorragende support f\u00fcr die meisten CSS-Bildgr\u00f6\u00dfen\u00e4nderungstechniken bieten, ist es wichtig, sich potenzieller Inkonsistenzen bewusst zu sein und zu wissen, wie man sie angeht.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">\u00c4ltere Browser<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sie unterst\u00fctzen m\u00f6glicherweise <\/b><span style=\"font-weight: 400;\">nicht support neuere Funktionen wie <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\"> oder fortgeschrittenes <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">-Verhalten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polyfills<\/b><span style=\"font-weight: 400;\"> oder Fallbacks k\u00f6nnten notwendig sein, um eine konsistente Erfahrung auf \u00e4lteren Browsern zu bieten (falls deren Unterst\u00fctzung erforderlich ist).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Herstellerpr\u00e4fixe<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Gelegentlich<\/ci><ci id=\"gid_1\"> erfordern experimentelle CSS-Funktionen Herstellerpr\u00e4fixe (z.B. <\/ci><ci id=\"gid_2\">-webkit-<\/ci><ci id=\"gid_3\">, <\/ci><ci id=\"gid_4\">-moz-<\/ci><ci id=\"gid_5\">) f\u00fcr die breiteste Kompatibilit\u00e4t, bis sie vollst\u00e4ndig standardisiert sind.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Testen<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Testen Sie<\/ci><ci id=\"gid_1\"> die Bildanzeige Ihrer Website gr\u00fcndlich auf verschiedenen Browsern und Ger\u00e4ten.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Werkzeuge<\/ci><ci id=\"gid_1\"> wie BrowserStack erleichtern browser\u00fcbergreifende Tests.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Progressive Enhancement<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Beginnen Sie<\/ci><ci id=\"gid_1\"> mit einer soliden Basisleistung, die \u00fcberall funktioniert.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Verwenden Sie <\/ci><ci id=\"gid_1\">Techniken wie Funktionserkennung, um erweiterte Bildgr\u00f6\u00dfen\u00e4nderungsfunktionen f\u00fcr Browser zu implementieren, die support unterst\u00fctzen.<\/ci><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Mit Elementor werden viele dieser Kompatibilit\u00e4tsprobleme f\u00fcr Sie gel\u00f6st, wodurch eine responsive und browser\u00fcbergreifende Bildanzeige gew\u00e4hrleistet wird, ohne dass Sie jede kleine Eigenheit untersuchen m\u00fcssen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Fortgeschrittene Techniken zur Gr\u00f6\u00dfen\u00e4nderung <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Viewport-Einheiten (vh, vw)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Viewport-Einheiten bieten eine M\u00f6glichkeit, Elemente relativ zum Viewport (dem sichtbaren Bereich des Browsers) zu dimensionieren. So beziehen sie sich auf die Bildgr\u00f6\u00dfen\u00e4nderung:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">vh:<\/ci><ci id=\"gid_1\"> 1vh entspricht 1% der Viewport-H\u00f6he.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">vw:<\/ci><ci id=\"gid_1\"> 1vw entspricht 1% der Viewport-Breite.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispiel<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-575ca47 elementor-widget elementor-widget-code-highlight\" data-id=\"575ca47\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-height: 80vh;  \/* Image height will never exceed 80% of the viewport height *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb67780 elementor-widget elementor-widget-text-editor\" data-id=\"cb67780\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Anwendungsf\u00e4lle mit Bildern<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Festlegen flexibler Gr\u00f6\u00dfen:<\/ci><ci id=\"gid_1\"> Kombinieren Sie Prozents\u00e4tze und feste Einheiten, um Elemente zu erstellen, die sich in der Gr\u00f6\u00dfe \u00e4ndern, aber bestimmte Abst\u00e4nde beibehalten (z.B. eine Seitenleiste, die 30% der Breite minus einem festen 20px-Rand einnimmt).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Komplexe Berechnungen:<\/ci><ci id=\"gid_1\"> Erstellen Sie ausgekl\u00fcgelte Regeln zur Gr\u00f6\u00dfen\u00e4nderung, die mehrere Faktoren ber\u00fccksichtigen.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Responsive Anpassungen:<\/ci><ci id=\"gid_1\"> Verwenden Sie <\/ci><ci id=\"gid_2\">calc()<\/ci><ci id=\"gid_3\"> innerhalb von Medienabfragen, um die Bildgr\u00f6\u00dfen\u00e4nderung an bestimmten Breakpoints feinzujustieren.<\/ci><\/li>\n<\/ul>\n<p><ci id=\"gid_0\">Hinweis:<\/ci><ci id=\"gid_1\"> Die Browser-support f\u00fcr <\/ci><ci id=\"gid_2\">calc()<\/ci><ci id=\"gid_3\"> ist hervorragend, aber die Kompatibilit\u00e4t sollte immer im Auge behalten werden.<\/ci><\/p>\n<h4><span style=\"font-weight: 400;\">Beispiel<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c38189b elementor-widget elementor-widget-code-highlight\" data-id=\"c38189b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-width: 100%;  \r\n  height: auto; \r\n}\r\n@media (min-width: 900px) {\r\n  img {\r\n    width: calc(50% - 30px); \/* Image takes up 50% of its container minus 30px on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a618b elementor-widget elementor-widget-text-editor\" data-id=\"d0a618b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">CSS-Filter und -Transformationen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS-Filter und -Transformationen bieten M\u00f6glichkeiten, Bilder visuell zu manipulieren und er\u00f6ffnen kreative M\u00f6glichkeiten, die \u00fcber die grundlegende Gr\u00f6\u00dfen\u00e4nderung hinausgehen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Filter<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">grayscale:<\/ci><ci id=\"gid_1\"> Konvertiert ein Bild in Graustufen.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">sepia:<\/ci><ci id=\"gid_1\"> Wendet einen Sepia-Ton im Vintage-Stil an.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">blur:<\/ci><ci id=\"gid_1\"> Verwischt ein Bild.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">brightness, contrast, saturation:<\/ci><ci id=\"gid_1\"> Passen Sie diese visuellen Eigenschaften an.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Und mehr!<\/b><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Transformationen<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">scale:<\/ci><ci id=\"gid_1\"> Skaliert ein Bild nach oben oder unten.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">rotate:<\/ci><ci id=\"gid_1\"> Rotiert ein Bild.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">skew, translate:<\/ci><ci id=\"gid_1\"> Wendet Verzerrungseffekte an oder positioniert ein Bild neu.<\/ci><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Beispiel<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc42968 elementor-widget elementor-widget-code-highlight\" data-id=\"cc42968\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg:hover {\r\n  filter: grayscale(100%); \r\n  transform: scale(1.1); \/* Image scales up slightly on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eae8283 elementor-widget elementor-widget-text-editor\" data-id=\"eae8283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Hinweis zur Leistung:<\/b><span style=\"font-weight: 400;\"> \u00dcberm\u00e4\u00dfige Verwendung von Filtern und Transformationen kann sich potenziell auf die Seitenladegeschwindigkeiten auswirken, insbesondere auf \u00e4lteren Ger\u00e4ten. Setzen Sie sie strategisch f\u00fcr gezielte Effekte ein.<\/span><\/p>\n<p><ci id=\"gid_0\">Elementor-Integration:<\/ci><ci id=\"gid_1\"> Elementor bietet intuitive visuelle Steuerelemente f\u00fcr die Anwendung vieler dieser Effekte und erm\u00f6glicht es Ihnen, mit Bildtransformationen zu experimentieren, ohne Code von Hand schreiben zu m\u00fcssen.<\/ci><\/p>\n<h2><span style=\"font-weight: 400;\">Fazit <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In diesem Leitfaden haben Sie gelernt, dass die Gr\u00f6\u00dfen\u00e4nderung von Bildern nicht nur darum geht, Bilder passend zu machen. Es ist ein entscheidender Aspekt der Webperformance, der Benutzererfahrung und der Aufrechterhaltung einer professionellen Online-Pr\u00e4senz.<\/span><\/p>\n<p><ci id=\"gid_0\">Durch das Verst\u00e4ndnis, wie CSS-Eigenschaften wie <\/ci><ci id=\"gid_1\">width<\/ci><ci id=\"gid_2\">, <\/ci><ci id=\"gid_3\">height<\/ci><ci id=\"gid_4\">, <\/ci><ci id=\"gid_5\">object-fit<\/ci><ci id=\"gid_6\"> und <\/ci><ci id=\"gid_7\">background-size<\/ci><span style=\"font-weight: 400;\">  funktionieren, haben Sie leistungsstarke Werkzeuge zur Kontrolle der Bildanzeige erhalten. Wir haben responsive Bildtechniken und Optimierungsverfahren untersucht und sogar fortgeschrittene M\u00f6glichkeiten der Gr\u00f6\u00dfen\u00e4nderung behandelt.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wenn Sie WordPress-Benutzer sind, vereinfacht Elementor den gesamten Prozess. Von intuitiven Steuerungen zur Bildgr\u00f6\u00dfen\u00e4nderung und dem integrierten <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/products\/image-optimizer\/\"   title=\"Image Optimizer\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20354\">Image Optimizer<\/a> bis hin zur nahtlosen Integration mit einer leistungsorientierten Hosting-L\u00f6sung wie Elementor Hosting haben Sie alles, um beeindruckende Visuals ohne Geschwindigkeitseinbu\u00dfen zu liefern.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Denken Sie daran:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Optimieren Sie Ihre Bilder <\/ci><ci id=\"gid_1\"><ci id=\"gid_2\">bevor<\/ci><\/ci><ci id=\"gid_3\"> Sie sie hochladen.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ber\u00fccksichtigen Sie stets den Zweck und Kontext des Bildes bei der Auswahl von Techniken zur Gr\u00f6\u00dfen\u00e4nderung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Testen Sie die visuelle Darstellung Ihrer Website auf verschiedenen Ger\u00e4ten, um ein perfektes Erlebnis f\u00fcr alle Besucher sicherzustellen.<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.<\/p>\n","protected":false},"author":2024234,"featured_media":123658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[513],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressourcen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man ein Bild in CSS HTML skaliert<\/title>\n<meta name=\"description\" content=\"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein Bild in CSS HTML skaliert\" \/>\n<meta property=\"og:description\" content=\"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T14:52:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"16\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Wie man ein Bild in CSS HTML skaliert\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2026-01-09T14:52:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\"},\"wordCount\":3016,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"articleSection\":[\"Ressourcen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\",\"name\":\"Wie man ein Bild in CSS HTML skaliert\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2026-01-09T14:52:03+00:00\",\"description\":\"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressourcen\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man ein Bild in CSS HTML skaliert\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man ein Bild in CSS HTML skaliert","description":"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein Bild in CSS HTML skaliert","og_description":"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.","og_url":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:27+00:00","article_modified_time":"2026-01-09T14:52:03+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Itamar Haim","Gesch\u00e4tzte Lesezeit":"16\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Wie man ein Bild in CSS HTML skaliert","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2026-01-09T14:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/"},"wordCount":3016,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","articleSection":["Ressourcen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/","url":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/","name":"Wie man ein Bild in CSS HTML skaliert","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2026-01-09T14:52:03+00:00","description":"Bilder sind das Lebenselixier moderner Webseiten. Sie fesseln die Aufmerksamkeit, vermitteln Emotionen und bestimmen den Ton f\u00fcr Ihre gesamte Online-Pr\u00e4senz. Doch beeindruckende Visuals haben einen Haken: Nicht optimierte Bilder k\u00f6nnen die Geschwindigkeit Ihrer Webseite erheblich beeintr\u00e4chtigen. Langsame Webseiten frustrieren Besucher, schaden Ihrem Suchmaschinenranking und untergraben letztendlich Ihre gesamte Online-Strategie.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/wie-man-ein-bild-in-css-html-skaliert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Ressourcen","item":"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/"},{"@type":"ListItem","position":3,"name":"Wie man ein Bild in CSS HTML skaliert"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=123657"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123657\/revisions"}],"predecessor-version":[{"id":150119,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123657\/revisions\/150119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/123658"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=123657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=123657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=123657"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=123657"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=123657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}