React-Native-Asset-Kompressor

• Sofortige Generierung der Varianten @1x @2x @3x: Erzeugen Sie alle drei React-Native-Dichte-Varianten in Sekunden aus einem einzigen Quellbild - vollständig in Ihrem Browser. Der React-Native-Asset-Kompressor skaliert Ihre @3x-Quelle mit hochwertiger Canvas-Interpolation auf @2x und @1x herunter, ohne Server-Upload und ohne Warten.
• Sicherer React-Native-Asset-Kompressor online: Ihre Bilder verlassen Ihr Gerät nie. Der React-Native-Asset-Kompressor läuft ausschließlich in Ihrem Browser - keine Server-Uploads, keine Datenübertragung, 100 % privat. Sicher für proprietäre App-Icons, Splashscreens und Produktionsassets von React Native.
• Mehrere Bilder in einem Durchgang verarbeiten: Laden Sie mehrere Bilder gleichzeitig hoch und erzeugen Sie Dichte-Varianten für alle in einem einzigen Durchlauf. Alle Ausgabedateien werden in einem sofort einsatzbereiten ZIP-Archiv mit der korrekten React-Native-Namenskonvention gebündelt - image.png, [email protected], [email protected].
• 100 % kostenlos für immer: Der React-Native-Asset-Kompressor ist völlig kostenlos, ohne Anmeldung, ohne Premium-Tarif, ohne Dateigrößenbeschränkung und ohne Werbung. Generieren Sie unbegrenzt React-Native-Asset-Dichte-Varianten zu null Kosten, für immer.

• Generierung von App-Icons für alle Bildschirmdichten: Erzeugen Sie die Varianten @1x, @2x und @3x Ihrer React-Native-App-Icons in einem Schritt. Der React-Native-Asset-Kompressor sorgt dafür, dass Ihre Icons auf jedem Gerät scharf aussehen - von Android-Displays mit niedriger Dichte bis zu hochauflösenden iPhone-Retina-Displays -, ohne manuelles Verkleinern in Photoshop oder Figma.
• Optimierung von Splashscreens und Onboarding-Bildern: Komprimieren und skalieren Sie Splashscreens und Onboarding-Illustrationen für alle drei Dichte-Varianten. Der React-Native-Asset-Kompressor reduziert Dateigrößen und erhält die visuelle Qualität - das beschleunigt das Laden Ihrer App und reduziert die Gesamtbundle-Größe für App-Store- und Play-Store-Einreichungen.
• Vorbereitung von UI-Assets und Illustrationen: Bereiten Sie UI-Illustrationen, Hintergrundbilder und dekorative Assets für React-Native-Bildschirme vor. Der React-Native-Asset-Kompressor erzeugt korrekt benannte Dichte-Varianten, die React Native zur Laufzeit automatisch auswählt - keine Codeänderungen nötig, legen Sie die Dateien einfach in Ihr Assets-Verzeichnis.
• Expo- und React-Native-CLI-Projekte: Funktioniert nahtlos mit Expo und mit reinen React-Native-CLI-Projekten. Der React-Native-Asset-Kompressor gibt Dateien nach der standardmäßigen React-Native-Namenskonvention aus (image.png, [email protected], [email protected]), die sowohl Expo als auch der Metro-Bundler automatisch erkennen.
• Design-Übergabe und Asset-Export: Konvertieren Sie Design-Exporte aus Figma, Sketch oder Adobe XD in React-Native-taugliche Dichte-Varianten. Der React-Native-Asset-Kompressor akzeptiert jeden PNG-, JPEG- oder WebP-Export und erzeugt alle drei Dichtedateien in einem ZIP - bereit zur Übergabe an Entwickler oder zum direkten Einsatz im Projekt.
• Vorbereitung für App-Store- und Play-Store-Einreichungen: Reduzieren Sie die Bundle-Größe Ihrer React-Native-App vor der Einreichung bei App Store und Play Store, indem Sie alle Bildassets komprimieren. Der React-Native-Asset-Kompressor wendet Qualitätskomprimierung auf jede Dichte-Variante an und hilft Ihnen, Größenlimits einzuhalten und Download-Konversionsraten zu verbessern.

React Native nutzt ein Pixeldichtesystem, um für jeden Bildschirm die korrekte Bildauflösung auszuliefern. Die drei Standarddichten sind @1x (Basisauflösung, ~1 CSS-Pixel = 1 Gerätepixel), @2x (Retina / Standard-High-DPI, 2 Gerätepixel pro CSS-Pixel) und @3x (hochauflösende iPhone- und Flaggschiff-Android-Displays, 3 Gerätepixel pro CSS-Pixel). Wenn Sie ein Bild mit require('./image.png') referenzieren, wählt React Native zur Laufzeit automatisch die korrekte Dichte-Variante anhand der Bildschirmdichte des Geräts. Unser React-Native-Asset-Kompressor erzeugt alle drei Varianten aus einem einzigen Quellbild - korrekt benannt und komprimiert.

1. 1 Quellbild hochladen: Ziehen Sie ein PNG-, JPEG-, WebP-, GIF- oder BMP-Bild per Drag & Drop hinein. Verwenden Sie Ihr höchstauflösendes Asset als Quelle - idealerweise die @3x-Version oder einen Design-Export mit der 3-fachen vorgesehenen Anzeigegröße. Die Datei wird in Ihren Browser geladen - es werden keine Daten an einen Server gesendet.
2. 2 Ausgabeformat, Qualität und Dichte-Varianten wählen: Wählen Sie PNG (empfohlen für Icons und Assets mit Transparenz) oder JPEG (kleiner für Fotos). Wählen Sie gegebenenfalls die JPEG-Qualität. Wählen Sie, welche Dichte-Varianten erzeugt werden sollen - alle drei, nur @2x und @3x oder nur @3x. Die Verarbeitung läuft vollständig in Ihrem Browser über die Canvas-API.
3. 3 Herunterladen und ins Projekt einfügen: Alle Dichte-Varianten werden als ZIP-Archiv gebündelt. Entpacken Sie es und legen Sie die drei Dateien in dasselbe Verzeichnis Ihres React-Native-Projekts. Referenzieren Sie das Asset mit require('./image.png') - React Native erledigt den Rest automatisch.

• @1x-Variante (image.png): Die Basisauflösung - ein Drittel der Abmessungen des Quellbildes. Wird auf Bildschirmen niedriger Dichte und als Fallback verwendet. In der Regel die kleinste der drei Varianten.
• @2x-Variante ([email protected]): Zwei Drittel der Abmessungen des Quellbildes. Wird auf Standard-Retina-Displays verwendet (die meisten iPhones und Android-Mittelklassegeräte). Die in der Praxis am häufigsten ausgelieferte Variante.
• @3x-Variante ([email protected]): Die vollständigen Abmessungen des Quellbildes. Wird auf hochauflösenden Flaggschiffgeräten verwendet (iPhone Pro, High-End-Android). Größte Datei, aber schärfstes Rendering auf unterstützten Bildschirmen.
• Angewandte Komprimierung: Die PNG-Ausgabe entfernt Metadaten und wird verlustfrei reenkodiert. Die JPEG-Ausgabe wendet die gewählte Qualitätsstufe an (60-90 %) für zusätzliche Größenreduktion. Für alle Varianten wird hochwertiges Canvas-Downscaling verwendet (imageSmoothingQuality: 'high').

Der Metro-Bundler von React Native verwendet eine bestimmte Namenskonvention, um Dichte-Varianten zu erkennen: image.png für @1x, [email protected] für @2x und [email protected] für @3x. Alle drei Dateien müssen im selben Verzeichnis liegen. Der React-Native-Asset-Kompressor gibt Dateien genau mit dieser Namenskonvention aus - kein Umbenennen nötig. Das funktioniert mit Expo (Managed- und Bare-Workflow) sowie mit reinen React-Native-CLI-Projekten.