Medienperformance # Acht Verfahren zur Bild-SEO-Optimierung Acht Bild-SEO-Verfahren für Semantik, Abmessungen, Formate, Leistung, Auffindbarkeit und Erfolgsmessung. Veröffentlicht am 11. August 2026 ## Wichtigste Erkenntnisse * Verwenden Sie das img-Element für bedeutungstragende Inhalte und verfassen Sie einen Alternativtext für die Rolle des Bildes im jeweiligen Kontext. * Legen Sie intrinsische Abmessungen fest, um Layout-Verschiebungen zu reduzieren. * Liefern Sie mithilfe responsiver Quellenauswahl Abmessungen, die nahe an der gerenderten Fläche liegen. Suchmaschinen entdecken Bilder über Seiten und Feeds, während Nutzer sie über Layout, Kontext, Barrierefreiheit und Geschwindigkeit erleben. Die wirkungsvollste Bild-SEO verbessert die Seite für beide Gruppen. ## In diesem Leitfaden 1. [Bilder zugleich für Nutzer und Auffindbarkeitssysteme optimieren](#image-seo-optimization-section-1) 2. [Semantisches Markup und relevanten umgebenden Text verwenden](#image-seo-optimization-section-2) 3. [Alternativtext aus der Funktion des Bildes ableiten](#image-seo-optimization-section-3) 4. [Stabile, verständliche Bild-URLs erstellen](#image-seo-optimization-section-4) 5. [Abmessungen reservieren und responsive Quellen auswählen](#image-seo-optimization-section-5) 6. [Formate und Qualität durch visuellen Vergleich auswählen](#image-seo-optimization-section-6) 7. [Wichtige Bilder ohne Verzögerung auffindbar machen](#image-seo-optimization-section-7) 8. [Auffindbarkeit mit kanonischen Seiten und Feeds unterstützen](#image-seo-optimization-section-8) 9. [Eine kontrollierte Derivat-Pipeline aufbauen](#image-seo-optimization-section-9) 10. [Such- und Seitenergebnisse nach der Veröffentlichung messen](#image-seo-optimization-section-10) ## Worauf es besonders ankommt * Wählen Sie anhand visueller Tests und der erforderlichen Unterstützung effiziente Formate und eine geeignete Qualität. * Verwenden Sie stabile, aussagekräftige URLs, ohne Dateinamen als Ersatz für den Seitenkontext zu betrachten. * Halten Sie wichtige Bilder für Crawler zugänglich und nehmen Sie geeignete Assets bei Bedarf in Bilder-Sitemaps auf. * Platzieren Sie Bilder in der Nähe relevanter Überschriften und erklärender Texte. * Messen Sie Impressionen und Klicks in Suchdaten zusammen mit Seitenleistung und Conversion. ## Bilder zugleich für Nutzer und Auffindbarkeitssysteme optimieren Bild-SEO bezeichnet die Praxis, nützliche visuelle Inhalte auf einer von Crawlern erfassbaren Seite verständlich, auffindbar und effizient zu machen. Suchsysteme bewerten die Seite, den umgebenden Text, Links, strukturierte Informationen und die Bildressource gemeinsam. Eine komprimierte Datei mit einem schlüsselwortreichen Namen kann weder eine inhaltsarme Seite noch eine blockierte Ressource oder ein Bild ausgleichen, das keinen Mehrwert bietet. Beginnen Sie mit der Aufgabe des Nutzers. Ein Original-Produktfoto kann eine Kaufentscheidung erleichtern, ein Diagramm eine technische Frage beantworten und eine Grafik eine Analyse stützen. Dekorative Stockbilder können die Gestaltung verbessern, rechtfertigen aber weniger Aufwand für die Indexierung. Entscheiden Sie vor dem Festlegen von Markup und Laderichtlinie, welche Bilder Inhalte und welche Dekoration sind und welches wahrscheinlich das wichtigste visuelle Element der Seite ist. ### Bedeutung Das Bild sollte Informationen vermitteln, die zur Seite und zur Absicht des Nutzers passen. ### Zugriff Crawler und Nutzer müssen die Ressource mit den vorgesehenen Berechtigungen abrufen und decodieren können. ### Kontext Überschriften, Bildunterschriften, Texte in der Nähe und das Seitenthema sollten erklären, warum das Bild vorhanden ist. ### Leistung Abmessungen, codierte Bytes, Zeitpunkt der Auffindbarkeit und Decodierung sollten zur gerenderten Funktion passen. ## Semantisches Markup und relevanten umgebenden Text verwenden Platzieren Sie aussagekräftige Bilder in `img`- oder `picture`-Elementen statt in CSS-Hintergründen. Verwenden Sie Abbildungen und Bildunterschriften, wenn eine Bildunterschrift den Lesern nützt, aber versehen Sie nicht jedes dekorative visuelle Element mit zusätzlicher Semantik. Das Bild sollte nahe der Überschrift und dem Absatz erscheinen, die es unterstützt. Eine klare Seitenstruktur bietet Lesern und Indexierungssystemen eine bessere Erklärung als vom Inhalt losgelöste Metadaten. Belassen Sie wichtige Inhalte im HTML. In ein Bild eingebetteter Text lässt sich schwerer vergrößern, übersetzen, kopieren und aktualisieren sowie mit assistiven Technologien schwerer interpretieren. Wenn ein Diagramm Beschriftungen enthält, fassen Sie seine Schlussfolgerung im Text zusammen und erläutern Sie komplexe Zusammenhänge ausführlicher in Textform. Links zu größeren Versionen sollten klare barrierefreie Bezeichnungen haben. Das Ziel darf Nutzer nicht ohne Kontext in einer übergroßen Datei festhalten. ## Alternativtext aus der Funktion des Bildes ableiten Alternativtext ersetzt das Bild, wenn es nicht wahrgenommen werden kann. Beschreiben Sie die Informationen, die im konkreten Seitenkontext benötigt werden, nicht jedes sichtbare Detail. Bei einem Produktbild können Modell und Ansicht genügen, eine Grafik sollte ihre wichtigste Schlussfolgerung vermitteln und bei einem Porträt neben einer namentlichen Autorenangabe kann allein der Name der Person ausreichen. Verwenden Sie für ein rein dekoratives Bild `alt=""`, damit assistive Technologien es überspringen können. Vermeiden Sie Schlüsselwortlisten, Formulierungen wie „Bild von“ und Wiederholungen einer angrenzenden Bildunterschrift. Das Attribut `title` enthält optionale Zusatzinformationen und ersetzt `alt` nicht. Viele Nutzer können nicht zuverlässig auf Hover-Text zugreifen. Wenn ein Bild der einzige Inhalt eines Links ist, sollte sein Alternativtext das Ziel oder die Aktion des Links beschreiben. Prüfen Sie diese Entscheidungen manuell, da automatisierte Prüfungen auf Vorhandensein den Nutzen nicht beurteilen können. ### Informatives Bild Beschreiben Sie das relevante Motiv oder die relevante Information prägnant. ### Funktionales Bild Beschreiben Sie die Aktion oder das Ziel, für die beziehungsweise das das Bild steht. ### Komplexes Bild Verwenden Sie einen kurzen Alternativtext sowie eine ausführliche Erklärung oder Datentabelle in der Nähe. ### Dekoratives Bild Verwenden Sie einen leeren Alternativtext und halten Sie das Bild aus dem Informationsfluss der Seite heraus. ## Stabile, verständliche Bild-URLs erstellen Verwenden Sie Dateinamen und Pfade, die das Asset für die zuständigen Personen identifizieren und einen gewissen Kontexthinweis liefern, beispielsweise `ceramic-filter-installation.webp` statt einer fortlaufenden Kameranummer. Halten Sie Namen prägnant, schreiben Sie sie gemäß den Projektkonventionen gegebenenfalls klein und verwenden Sie einheitliche Trennzeichen. Dateinamen erleichtern die Organisation, doch Seiteninhalt und Alternativtext liefern die eigentliche Erklärung. Ändern Sie eine öffentliche URL möglichst nicht, wenn sich Metadaten oder Komprimierungseinstellungen ändern. Stabile URLs erhalten Verweise und reduzieren unnötige Cache-Aktualisierungen. Unveränderliche URLs mit Inhalts-Hash ermöglichen dagegen ein aggressives Caching, erfordern jedoch, dass das Seiten-Markup auf jede neue Version verweist. Entscheiden Sie sich bewusst für eine einzige Strategie. Platzieren Sie keine geheimen Daten, E-Mail-Adressen von Nutzern oder instabilen signierten Abfragezeichenfolgen in crawlbaren Bild-URLs. ## Abmessungen reservieren und responsive Quellen auswählen Legen Sie intrinsische Werte für `width` und `height` fest, damit der Browser das richtige Seitenverhältnis reservieren kann, bevor die Datei geladen wird. CSS kann das Bild weiterhin flexibel skalieren. Reservierter Platz reduziert Layout-Bewegungen, verhindert, dass sich Links in der Nähe unter dem Zeiger verschieben, und sorgt für ein vorhersehbareres Ladeerlebnis. Wenn Art Direction das Seitenverhältnis ändert, benötigt jede `picture`-Quelle kompatible Abmessungen oder einen anderen expliziten Layoutplan. Verwenden Sie `srcset` mit Breitenangaben und einem genauen Wert für `sizes`, wenn sich die gerenderte Fläche je nach Layout ändert. Der Browser kann dann anhand der Fläche, der Gerätedichte und der aktuellen Bedingungen einen Kandidaten auswählen. Eine einzelne riesige Quelldatei, die per CSS verkleinert wird, muss dennoch vollständig übertragen und decodiert werden. Leiten Sie die Breiten der Kandidaten aus gemessenen Komponenten ab, statt willkürliche Abstufungen zu erzeugen, die zusätzlichen Speicher- und Invalidierungsaufwand verursachen. ### Thumbnail-Ansicht Verwenden Sie ein kleines, für die Kartengestaltung zugeschnittenes Derivat und nicht das lediglich per CSS verkleinerte Original. ### Artikelinhalt Stellen Sie Kandidaten bereit, deren Breiten sich an den tatsächlichen Inhaltsspalten orientieren, und bewahren Sie wichtige Details. ### Hero-Bild Verwenden Sie einen per Art Direction festgelegten Ausschnitt, wenn das Motiv bei einem breiten Viewport andernfalls verloren ginge. ### Zoomansicht Laden Sie das große Asset erst, nachdem der Nutzer die Detailansicht angefordert hat, und stellen Sie klare Abmessungen und Bedienelemente bereit. ## Formate und Qualität durch visuellen Vergleich auswählen JPEG bleibt für Fotos eine praktische Wahl, PNG für verlustfreie Grafiken oder Transparenz, SVG für vertrauenswürdige Vektorgrafiken und neuere Formate für effizient codierte fotografische oder gemischte Inhalte, sofern die Zielclients sie decodieren können. Die Formatwahl allein bestimmt nicht die Performance. Abmessungen, Encoder-Einstellungen, Transparenz, Metadaten und die visuellen Eigenschaften jedes Bildes beeinflussen das Ergebnis. Vergleichen Sie repräsentative Bilder in ihren gerenderten Abmessungen. Feine Schrift, Verläufe, Hauttöne, Produktfarben und Strichgrafiken weisen unterschiedliche Qualitätsprobleme auf, daher genügt ein einzelner Qualitätswert nicht als vollständige Richtlinie. Behalten Sie bei Bedarf aufgrund der Formatunterstützung ein Fallback bei und stellen Sie sicher, dass alle Quellen gleichwertige Inhalte zeigen. Entfernen Sie nicht benötigte Metadaten, sofern die Richtlinie dies zulässt, bewahren Sie jedoch Lizenz- und Urheberrechtsinformationen auf, zu deren Erhalt die Organisation verpflichtet ist. ## Wichtige Bilder ohne Verzögerung auffindbar machen Das wichtigste Bild im ohne Scrollen sichtbaren Bereich sollte im initialen HTML enthalten, mit Abmessungen versehen und cachefähig sein sowie mit angemessener Priorität angefordert werden. Laden Sie ein Bild, das voraussichtlich zum Largest Contentful Paint wird, nicht per Lazy Loading. Natives Lazy Loading ist für viele Bilder unterhalb des sichtbaren Bereichs sinnvoll. Werden jedoch alle Galerieelemente sofort geladen, verschwendet dies Bandbreite und kann mit den primären Ressourcen der Seite konkurrieren. Verbergen Sie wesentliche Bilder nicht hinter einer Nutzerinteraktion oder clientseitigem Rendering, wenn sie zusammen mit der Landingpage auffindbar sein sollten. Stellen Sie sicher, dass Robots-Richtlinien, Authentifizierung, Hotlink-Schutz und Antwort-Header den vorgesehenen Crawler-Zugriff erlauben. Geben Sie unter einer Bild-URL einen echten Bildinhaltstyp und einen erfolgreichen Status zurück, nicht eine HTML-Fehlerseite. Weiterleitungsketten und ablaufende Signaturen schaffen zusätzliche Fehlerquellen. ## Auffindbarkeit mit kanonischen Seiten und Feeds unterstützen Eine Bilder-Sitemap kann dabei helfen, wichtige Ressourcen auffindbar zu machen, insbesondere in komplexen Galerien oder stark skriptbasierten Anwendungen. Sie behebt jedoch keine unzugängliche Seite. Nehmen Sie nur Bilder auf, die von der Website indexiert werden dürfen, und halten Sie ihre Speicherorte mit den kanonischen Seiten-URLs synchron. Entfernen Sie gelöschte oder private Assets unverzüglich, statt in generierten Feeds dauerhaft Fehler zu hinterlassen. Verwenden Sie strukturierte Daten nur, wenn Seite und Inhalt die Anforderungen des ausgewählten Schemas erfüllen, und stellen Sie sicher, dass jede Eigenschaft korrekt und dort sichtbar ist, wo die Richtlinien dies verlangen. Strukturierte Daten sind kein Ort für themenfremde Suchbegriffe. Bilder für Produkte, Rezepte, Artikel und Organisationen können unterschiedliche Anforderungen an Seitenverhältnis und Inhalt haben. Validieren Sie daher die vollständige Seite, statt eine Bild-URL isoliert zu testen. ## Eine kontrollierte Derivat-Pipeline aufbauen Der `/image/resize`-Robot von Transloadit kann die ausdrücklich festgelegten Breiten und Zuschneidestrategien erstellen, die für bekannte Seitenbereiche erforderlich sind, während `/image/optimize` die Dateigröße unterstützter Bildausgaben reduzieren kann. Exportieren Sie geprüfte Varianten in anwendungseigenen Speicher und bewahren Sie einen dauerhaften Datensatz mit Quellrevision, Objektschlüssel, Format, Breite, Höhe, Dateigröße in Byte und Rolle auf. Anhand dieses Datensatzes können Vorlagen konsistente intrinsische Abmessungen und responsives Markup erzeugen. Erstellen Sie Transformations-URLs nicht ad hoc in jeder Vorlage. Eine gemeinsame Derivatrichtlinie verhindert, dass Seiten nahezu identische Größen anfordern, und macht die erneute Verarbeitung nachvollziehbar. Transloadit bereitet Dateien auf und exportiert sie. Smart CDN kann transformierte Dateien aus anwendungseigenem Speicher ausliefern. Die Anwendung bleibt für die URL-Richtlinie, die HTML-Semantik, Cache- und Zugriffsanforderungen, Sitemaps sowie die Entscheidung verantwortlich, Smart CDN oder eine andere Auslieferungsebene zu verwenden. Medienverarbeitung und Auslieferung ersetzen weder ein Inhaltssystem noch eine Suchstrategie. ### Quellmasterdatei Bewahren Sie eine autorisierte hochwertige Quelldatei auf, aus der sich künftige Derivate erneut erzeugen lassen. ### Variantenmanifest Ordnen Sie jeder semantischen Rolle Abmessungen, Format, Speicherschlüssel und Quellrevision zu. ### Vorlagenausgabe Rendern Sie `src`, `srcset`, `sizes`, intrinsische Abmessungen und Alternativtext anhand validierter Datensätze. ### Lebenszyklus Löschen oder verarbeiten Sie zugehörige Varianten auf vorhersehbare Weise neu, wenn sich eine Quelle ändert oder eine Einwilligung widerrufen wird. ## Such- und Seitenergebnisse nach der Veröffentlichung messen Prüfen Sie wichtige Landingpages auf fehlende Alternativtexte, falsche Abmessungen, übergroße Downloads, blockierte URLs, fehlerhafte Antworten, doppelte Assets und per Lazy Loading geladene Hauptbilder. Untersuchen Sie die Auswahl der Anfragen und das Rendering mit Browserwerkzeugen und synthetischen Tests. Nutzen Sie anschließend Felddaten zur Performance, um reale Geräte und Caches zu verstehen. Testen Sie die visuelle Qualität, statt die Reduzierung der Dateigröße als einziges Erfolgskriterium zu betrachten. Erfassen Sie Bildimpressionen und Klicks zusammen mit Seitenimpressionen, Nutzerinteraktion, Conversion und Leistungsmetriken. Segmentieren Sie nach Seitentyp und Bereitstellungsdatum, damit sich eine Vorlagenänderung kohärent evaluieren lässt. Suchergebnisse schwanken aus vielen Gründen. Führen Sie daher nicht jede Veränderung auf eine einzelne Bildbearbeitung zurück. Bewahren Sie einen Ausgangszustand auf, führen Sie Änderungen kontrolliert ein und überwachen Sie neben dem Traffic auch Crawling-Fehler und Speicherkosten. ### Technische Validierung Prüfen Sie Status, Inhaltstyp, Crawling-Richtlinie, kanonische Seite, Abmessungen, responsive Auswahl und die Gültigkeit strukturierter Daten. ### Nutzererlebnis Prüfen Sie Layoutstabilität, Ladepriorität, Barrierefreiheit, visuelle Qualität, Zoomverhalten und Fehlerzustände. ### Suchbeobachtung Vergleichen Sie Impressionen und Klicks nach Seitengruppe über einen aussagekräftigen Zeitraum, ohne voreilig einen kausalen Zusammenhang zu behaupten. ### Betrieb Überwachen Sie die Verzweigung von Derivaten, Cache-Misses, verwaiste Objekte, Verarbeitungsfehler und den Speicherlebenszyklus. ## Wissenswerte technische Details * Mit responsiven srcset-Kandidaten kann der Browser Layoutbreite, Gerätedichte und aktuelle Bedingungen berücksichtigen. Die Auslieferung einer einzigen übergroßen Datei verschwendet Bytes, bevor CSS sie verkleinern kann. * Ein beschreibender Alternativtext fördert die Barrierefreiheit und liefert Kontext. Keyword-Stuffing und die Wiederholung einer sichtbaren Bildunterschrift verschlechtern jedoch die Nutzererfahrung, ohne einen sinnvollen Mehrwert zu bieten. * Das LCP-Bild sollte im initialen HTML auffindbar, korrekt priorisiert, mit Abmessungen versehen und cachefähig sein. Wahlloses Lazy Loading kann die wichtigste visuelle Darstellung verzögern. * Moderne Formate können die Übertragungsgröße reduzieren. Browseraushandlung und Fallback müssen jedoch sicherstellen, dass Crawler und Nutzer weiterhin ein decodierbares Bild mit dem vorgesehenen Inhalt erhalten. * Eine Bilder-Sitemap kann die Auffindbarkeit von Bildern verbessern, die über Skripte oder komplexe Galerien geladen werden. Eine kanonische Seitenstruktur und Crawlbarkeit bleiben jedoch grundlegend. * Die Performance sollte auf Seitenebene gemessen werden, da Decodierungsaufwand, Anfragepriorität, Layout, Caching und JavaScript einen kleinen Unterschied bei den codierten Bytes überwiegen können. ## Ein praxisnaher Ansatz 1. 1\ Prüfen Sie wichtige Landingpages auf fehlende Abmessungen, schwachen Alternativtext, übergroße Assets und blockierte URLs. 2. 2\ Definieren Sie anhand tatsächlich gerenderter Bereiche und unterstützter Browser eine Derivatrichtlinie. 3. 3\ Aktualisieren Sie Markup, Sitemaps und strukturierte Daten, sofern der Inhalt dafür geeignet ist. 4. 4\ Überwachen Sie nach der Bereitstellung Such- und Nutzermetriken nach Landingpage-Cluster. Ein vierstufiger Medienworkflow ## Wann Transloadit hilfreich ist Erstellen Sie mit /image/resize und /image/optimize korrekt dimensionierte Derivate in effizienten Formaten. Bewahren Sie stabile Ergebnismetadaten auf, damit Vorlagen intrinsische Abmessungen und aussagekräftige URLs aus Anwendungsdatensätzen rendern können. ## Architekturgrenze Bildoptimierung unterstützt Suchleistung und Barrierefreiheit, ersetzt jedoch weder nützliche Inhalte noch crawlbares HTML, beschreibenden Kontext, strukturierte Daten oder Richtlinien von Suchmaschinen. ## Häufig gestellte Fragen ### Welches Bildformat eignet sich am besten für SEO? Es gibt kein universell bestes Format. Wählen Sie die kleinste visuell akzeptable Darstellung, die Zielbrowser und Crawler decodieren können, und bieten Sie bei Bedarf einen Fallback an. Korrekte Abmessungen, responsive Auswahl, Seitenkontext und Ladeverhalten sind oft wichtiger als die Formatbezeichnung. ### Verbessern beschreibende Dateinamen allein das Ranking von Bildern? Nein. Ein eindeutiger Dateiname erleichtert die Verwaltung von Assets und kann einen kleinen kontextuellen Hinweis liefern, ersetzt aber weder nützliche Seiteninhalte noch aussagekräftigen Alternativtext, crawlbares Markup oder ein relevantes Bild. Vermeiden Sie Keyword-Stuffing und halten Sie öffentliche URLs stabil. ### Sollte jedes Bild einen beschreibenden Alternativtext haben? Für jedes `img` ist eine bewusste Entscheidung zum Alternativtext erforderlich, dekorative Bilder sollten jedoch normalerweise `alt=""` verwenden. Informative und funktionale Bilder benötigen einen prägnanten Text, der ihrer jeweiligen Rolle entspricht. Komplexe Diagramme benötigen außerdem eine Erklärung oder Datendarstellung in unmittelbarer Nähe. ### Sollte das größte Bild einer Seite per Lazy Loading geladen werden? Nicht, wenn es sofort sichtbar ist und wahrscheinlich das Largest-Contentful-Paint-Element darstellt. Nehmen Sie dieses Bild in das initiale HTML auf und priorisieren Sie es angemessen. Verwenden Sie Lazy Loading für weiter unten auf der Seite platzierte Bilder, die für die erste Ansicht nicht benötigt werden. ### Ist eine Bilder-Sitemap erforderlich? Nein. Sie kann die Auffindbarkeit wichtiger Assets in komplexen Galerien oder skriptgesteuerten Seiten verbessern, doch klares, crawlbares HTML und eine kanonische Seitenstruktur haben Vorrang. Halten Sie Sitemap-Einträge aktuell und öffentlich und beschränken Sie sie auf Bilder, zu deren Bereitstellung die Website berechtigt ist. ## Erstellen Sie den Workflow Entwickeln Sie das Konzept mithilfe der Robot-Dokumentation und funktionsfähiger Demos zu einer getesteten Assembly weiter. ### Relevante Robots * [/image/resize](/de/docs/robots/image-resize.md) * [/image/optimize](/de/docs/robots/image-optimize.md) * [Lesen Sie die API-Dokumentation](/de/docs.md) * [Entdecken Sie funktionsfähige Demos EN (English)](/demos.md) * [Kostenlosen Workspace erstellen](/c/signup/) Medienperformance ## Mit verwandten Leitfäden fortfahren * [Vier Wege für Bilder und Badges in GitHub-READMEs](/de/guides/images-in-github-readmes.md)\ Fügen Sie Bilder über Repository-Dateien, Issue-Anhänge, Raw-URLs, HTML oder generierte Assets zu einem GitHub-README hinzu. * [Fünf bewährte Verfahren für HTML- und CSS-Hintergrundbilder](/de/guides/html-background-image-best-practices.md)\ Fünf bewährte Verfahren für CSS-Hintergrundbilder, die Komposition, Barrierefreiheit und Seitenleistung ausgewogen berücksichtigen. * [React-Bilder: fünf Wege vom statischen Import zum Nutzer-Upload](/de/guides/import-images-in-react.md)\ Vergleichen Sie statische Importe, öffentliche Pfade, externe URLs, CSS-Importe und Ergebnisse von Laufzeit-Uploads in React. * [Sechs zuverlässige Wege, Bilder in Python zu speichern](/de/guides/save-images-in-python.md)\ Bilder aus Bytes, URLs, Pillow, OpenCV, Uploads und verwalteten Verarbeitungsergebnissen speichern, ohne die Fehlerbehandlung zu beeinträchtigen. * [Responsive Bilder über eine einzige URL ausliefern](/de/guides/serve-responsive-images-from-one-url.md)\ Leiten Sie jede Bildgröße aus einer kanonischen URL ab, cachen Sie die Ergebnisse am Edge und halten Sie die Encoding-Kosten trotz wachsendem Traffic stabil.