Wissensdatenbank & Anleitung
Bildgrößenänderung: Pixelinterpolation und Seitenverhältnisse
Bei der
Bildgrößenänderung handelt es sich um die Manipulation der horizontalen und vertikalen Pixelabmessungen eines Rasterbilds. Die Bereitstellung riesiger 4K-Bilder auf einem Mobilgerät beeinträchtigt die Leistung und ruiniert die Core Web Vitals.
Das Hochladen riesiger unkomprimierter Fotos auf Cloud-Server verbraucht Bandbreite und gefährdet die Privatsphäre. Dieser Resizer nutzt lokale HTML5-Canvas-APIs vollständig clientseitig, was bedeutet, dass Ihre sensiblen Bilder im Speicher Ihres Browsers zugeschnitten und skaliert werden.
Formel & Berechnungsmethode
Neue Höhe = (Originalhöhe / Originalbreite) * Neue Breite
Um zu verhindern, dass Ihre Bilder gequetscht oder gestreckt wirken, müssen Sie das Seitenverhältnis sperren. Die Formel berechnet die genaue proportionale Höhe basierend auf Ihrer gewünschten Breite.
Best Practices & Tipps
- Nie hochskalieren (Upsample): Rasterbilder (wie JPEG oder PNG) bestehen aus festen Pixeln. Die Skalierung eines 500-Pixel-Bildes auf 1000 Pixel zwingt den Browser dazu, fehlende Pixel zu erraten, was zu einem verschwommenen, pixeligen Durcheinander führt.
- Responsive Bilder bereitstellen: Generieren Sie nicht nur eine Größe. Generieren Sie mehrere Größen (z. B. 400 Pixel, 800 Pixel, 1200 Pixel) und verwenden Sie das HTML-Attribut „srcset“, damit der Browser die optimale Größe für den Bildschirm des Benutzers herunterladen kann.
- Vor der Größenänderung zuschneiden: Wenn das Motiv Ihres Fotos winzig ist, schneiden Sie das Bild zuerst eng um das Motiv herum zu. Wenn Sie die Größe eines nicht zugeschnittenen Bilds ändern, wird das Motiv nur noch kleiner.
Häufig gestellte Fragen
Was ist ein Seitenverhältnis?
Ein Seitenverhältnis ist das proportionale Verhältnis zwischen Breite und Höhe. Standard-Breitbildvideos haben ein Format von 16:9, herkömmliche Fotos haben ein Format von 3:2 und Instagram-Beiträge haben normalerweise ein Format von 1:1 (quadratisch).
Reduziert die Größenänderung eines Bildes dessen Dateigröße?
Drastisch. Durch die Reduzierung der Bildgröße von 4000 Pixel auf 1000 Pixel werden Millionen von Pixeln eliminiert, wodurch sich die endgültige Dateigröße in Megabyte exponentiell verringert.
Welche Interpolationsmethode wird verwendet?
Moderne Webbrowser wenden beim Verkleinern von Bildern über die Canvas-API automatisch hochwertige bikubische oder bilineare Interpolationsalgorithmen an, um glatte Kanten zu gewährleisten.