Компрессор ресурсов React Native

• Мгновенное создание вариантов @1x @2x @3x: создавайте все три варианта плотности React Native из одного исходного изображения за секунды — полностью в браузере. Компрессор уменьшает ваш исходник @3x до @2x и @1x с высококачественной интерполяцией Canvas, без загрузки на сервер и без ожидания.
• Безопасный онлайн-компрессор ресурсов React Native: ваши изображения никогда не покидают устройство. Компрессор работает исключительно в браузере — без загрузок на серверы, передачи данных и со 100 % приватностью. Безопасно для проприетарных иконок приложений, splash-экранов и производственных ресурсов React Native.
• Пакетная обработка нескольких изображений: загружайте несколько изображений одновременно и создавайте варианты плотности для всех за один проход. Все выходные файлы упаковываются в готовый ZIP-архив с правильным соглашением об именовании React Native: image.png, [email protected], [email protected].
• 100 % бесплатно навсегда: компрессор ресурсов React Native полностью бесплатен — без регистрации, платных тарифов, ограничений размера файла и рекламы. Создавайте неограниченное количество вариантов плотности ресурсов React Native с нулевыми затратами, навсегда.

• Создание иконок приложения для всех плотностей экрана: создайте варианты @1x, @2x и @3x иконок вашего приложения React Native за один шаг. Компрессор гарантирует, что иконки будут чёткими на любом устройстве — от Android-экранов с низкой плотностью до Retina-экранов iPhone с высокой плотностью — без ручного изменения размера в Photoshop или Figma.
• Оптимизация splash-экранов и изображений онбординга: сжимайте и масштабируйте splash-экраны и иллюстрации онбординга во все три варианта плотности. Компрессор уменьшает размер файлов, сохраняя визуальное качество, что помогает приложению загружаться быстрее и уменьшает общий размер пакета для публикации в App Store и Play Store.
• Подготовка UI-ресурсов и иллюстраций: готовьте UI-иллюстрации, фоновые изображения и декоративные ресурсы для экранов React Native. Компрессор создаёт правильно названные варианты плотности, которые React Native выбирает автоматически во время выполнения — без изменений кода, просто поместите файлы в каталог assets.
• Проекты Expo и React Native CLI: без проблем работает и с Expo, и с проектами на чистом React Native CLI. Компрессор выдаёт файлы по стандартному соглашению об именовании React Native (image.png, [email protected], [email protected]), которое автоматически распознают и Expo, и бандлер Metro.
• Передача дизайна и экспорт ресурсов: преобразуйте экспорт из Figma, Sketch или Adobe XD в варианты плотности, готовые для React Native. Компрессор принимает любой экспорт PNG, JPEG или WebP и создаёт все три файла плотности в ZIP — готовые к передаче разработчикам или прямому размещению в проекте.
• Подготовка к публикации в App Store и Play Store: уменьшите размер пакета приложения React Native перед отправкой в App Store и Play Store, сжав все ресурсы изображений. Компрессор применяет сжатие с выбором качества к каждому варианту плотности, помогая соблюсти лимиты размера и повысить конверсию загрузок.

React Native использует систему плотности пикселей, чтобы выдавать правильное разрешение изображения на каждом экране. Три стандартные плотности: @1x (базовое разрешение, ~1 CSS-пиксель = 1 пиксель устройства), @2x (Retina / стандартная высокая плотность, 2 пикселя устройства на CSS-пиксель) и @3x (экраны iPhone и флагманских Android с высокой плотностью, 3 пикселя устройства на CSS-пиксель). Когда вы подключаете изображение через require('./image.png'), React Native автоматически выбирает нужный вариант плотности во время выполнения по плотности экрана устройства. Наш компрессор ресурсов React Native создаёт все три варианта из одного исходного изображения — с правильными именами и сжатием.

1. 1 Загрузите исходное изображение: перетащите изображение PNG, JPEG, WebP, GIF или BMP. Используйте ресурс с наибольшим разрешением как источник — в идеале версию @3x или экспорт дизайна в 3× от предполагаемого размера отображения. Файл загружается в браузер — никакие данные не отправляются на сервер.
2. 2 Выберите формат вывода, качество и варианты плотности: выберите PNG (рекомендуется для иконок и ресурсов с прозрачностью) или JPEG (меньше для фотографий). При необходимости выберите качество JPEG. Укажите, какие варианты плотности создавать: все три, только @2x и @3x или только @3x. Обработка идёт полностью в браузере через Canvas API.
3. 3 Скачайте и добавьте в проект: все варианты плотности упаковываются в ZIP-архив. Распакуйте его и поместите три файла в один каталог проекта React Native. Подключайте ресурс через require('./image.png') — остальное React Native сделает автоматически.

• Вариант @1x (image.png): базовое разрешение — треть размеров исходного изображения. Используется на экранах с низкой плотностью и как запасной вариант. Обычно самый маленький файл из трёх вариантов.
• Вариант @2x ([email protected]): две трети размеров исходного изображения. Используется на стандартных Retina-экранах (большинство iPhone и Android-устройств среднего класса). На практике самый часто используемый вариант.
• Вариант @3x ([email protected]): полные размеры исходного изображения. Используется на флагманских устройствах с высокой плотностью (iPhone Pro, топовые Android). Самый большой файл, но самое чёткое отображение на поддерживаемых экранах.
• Применяемое сжатие: вывод PNG удаляет метаданные и перекодируется без потерь. Вывод JPEG применяет выбранный уровень качества (60–90 %) для дополнительного уменьшения размера. Для всех вариантов используется высококачественное уменьшение масштаба через Canvas (imageSmoothingQuality: 'high').

Бандлер Metro в React Native использует определённое соглашение об именовании для распознавания вариантов плотности: image.png для @1x, [email protected] для @2x и [email protected] для @3x. Все три файла должны находиться в одном каталоге. Компрессор ресурсов React Native выдаёт файлы именно с таким соглашением — переименование не требуется. Это работает и с Expo (управляемый и bare-процесс), и с проектами на чистом React Native CLI.