acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

reduce android image size with lossless webp

Browse Source
This commit is contained in:
Samuel Newman
2026-09-03 18:43:44 +03:00
parent 8af501de62
commit d6d4fc761e
37 changed files with 75 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Splash.tsx
+2 -2
View File
@@ -21,9 +21,9 @@ import * as SplashScreen from 'expo-splash-screen'
import {Logotype} from '#/view/icons/Logotype'
import {atoms as a} from '#/alf'
// @ts-expect-error
import splashImagePointer from '../assets/splash/splash.png'
import splashImagePointer from '../assets/splash/splash.webp'
// @ts-expect-error
import darkSplashImagePointer from '../assets/splash/splash-dark.png'
import darkSplashImagePointer from '../assets/splash/splash-dark.webp'
const splashImageUri = RNImage.resolveAssetSource(splashImagePointer)!.uri
const darkSplashImageUri = RNImage.resolveAssetSource(
src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export function InitialVerificationAnnouncement() {
]}>
<Image
accessibilityIgnoresInvertColors
source={require('../../../../assets/images/initial_verification_announcement_1.png')}
source={require('../../../../assets/images/initial_verification_announcement_1.webp')}
style={[
{
aspectRatio: 353 / 160,
src/components/verification/VerifierDialog.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ function Inner({
]}>
<Image
accessibilityIgnoresInvertColors
source={require('../../../assets/images/initial_verification_announcement_1.png')}
source={require('../../../assets/images/initial_verification_announcement_1.webp')}
style={[
{
aspectRatio: 353 / 160,
src/lib/hooks/useOTAUpdates.ts
+2 -2
View File
@@ -448,8 +448,8 @@ export function useOTAUpdates() {
export const splash = (scheme: 'light' | 'dark') => {
const source =
scheme === 'light'
? require('../../../assets/splash/splash.png')
: require('../../../assets/splash/splash-dark.png')
? require('../../../assets/splash/splash.webp')
: require('../../../assets/splash/splash-dark.webp')
return {
image: RNImage.resolveAssetSource(source)!.uri,
src/screens/Settings/AppIconSettings/AppIconImage.tsx
+1 -4
View File
@@ -13,10 +13,7 @@ export function AppIconImage({
const t = useTheme()
return (
<Image
source={platform({
ios: icon.iosImage(),
android: icon.androidImage(),
})}
source={icon.image()}
style={[
{width: size, height: size},
platform({
src/screens/Settings/AppIconSettings/appIconImages.android.ts
+22
View File
@@ -0,0 +1,22 @@
export const appIconImages = {
default_light: () =>
require('../../../../assets/app-icons/android_icon_legacy_light.webp'),
default_dark: () =>
require('../../../../assets/app-icons/android_icon_legacy_dark.webp'),
core_aurora: () =>
require('../../../../assets/app-icons/android_icon_core_aurora.webp'),
core_sunrise: () =>
require('../../../../assets/app-icons/android_icon_core_sunrise.webp'),
core_sunset: () =>
require('../../../../assets/app-icons/android_icon_core_sunset.webp'),
core_midnight: () =>
require('../../../../assets/app-icons/android_icon_core_midnight.webp'),
core_flat_blue: () =>
require('../../../../assets/app-icons/android_icon_core_flat_blue.webp'),
core_flat_white: () =>
require('../../../../assets/app-icons/android_icon_core_flat_white.webp'),
core_flat_black: () =>
require('../../../../assets/app-icons/android_icon_core_flat_black.webp'),
core_classic: () =>
require('../../../../assets/app-icons/android_icon_core_classic.webp'),
}
src/screens/Settings/AppIconSettings/appIconImages.ts
+22
View File
@@ -0,0 +1,22 @@
export const appIconImages = {
default_light: () =>
require('../../../../assets/app-icons/ios_icon_legacy_light.png'),
default_dark: () =>
require('../../../../assets/app-icons/ios_icon_legacy_dark.png'),
core_aurora: () =>
require('../../../../assets/app-icons/ios_icon_core_aurora.png'),
core_sunrise: () =>
require('../../../../assets/app-icons/ios_icon_core_sunrise.png'),
core_sunset: () =>
require('../../../../assets/app-icons/ios_icon_core_sunset.png'),
core_midnight: () =>
require('../../../../assets/app-icons/ios_icon_core_midnight.png'),
core_flat_blue: () =>
require('../../../../assets/app-icons/ios_icon_core_flat_blue.png'),
core_flat_white: () =>
require('../../../../assets/app-icons/ios_icon_core_flat_white.png'),
core_flat_black: () =>
require('../../../../assets/app-icons/ios_icon_core_flat_black.png'),
core_classic: () =>
require('../../../../assets/app-icons/ios_icon_core_classic.png'),
}
src/screens/Settings/AppIconSettings/types.ts
+1 -2
View File
@@ -4,6 +4,5 @@ import type * as DynamicAppIcon from '@bsky.app/expo-dynamic-app-icon'
export type AppIconSet = {
id: DynamicAppIcon.IconName
name: string
iosImage: () => ImageSource
androidImage: () => ImageSource
image: () => ImageSource
}
src/screens/Settings/AppIconSettings/useAppIconSets.ts
+12 -106
View File
@@ -2,6 +2,7 @@ import {useMemo} from 'react'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {appIconImages} from '#/screens/Settings/AppIconSettings/appIconImages'
import {type AppIconSet} from '#/screens/Settings/AppIconSettings/types'
export function useAppIconSets() {
@@ -12,30 +13,12 @@ export function useAppIconSets() {
{
id: 'default_light',
name: _(msg({context: 'Name of app icon variant', message: 'Light'})),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_legacy_light.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_legacy_light.png`,
)
},
image: appIconImages.default_light,
},
{
id: 'default_dark',
name: _(msg({context: 'Name of app icon variant', message: 'Dark'})),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_legacy_dark.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_legacy_dark.png`,
)
},
image: appIconImages.default_dark,
},
] satisfies AppIconSet[]
@@ -46,118 +29,50 @@ export function useAppIconSets() {
{
id: 'core_aurora',
name: _(msg({context: 'Name of app icon variant', message: 'Aurora'})),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_aurora.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_aurora.png`,
)
},
image: appIconImages.core_aurora,
},
// {
// id: 'core_bonfire',
// name: _(msg({ context: 'Name of app icon variant', message: 'Bonfire' })),
// iosImage: () => {
// return require(`../../../../assets/app-icons/ios_icon_core_bonfire.png`)
// },
// androidImage: () => {
// return require(`../../../../assets/app-icons/android_icon_core_bonfire.png`)
// },
// image: appIconImages.core_bonfire,
// },
{
id: 'core_sunrise',
name: _(msg({context: 'Name of app icon variant', message: 'Sunrise'})),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_sunrise.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_sunrise.png`,
)
},
image: appIconImages.core_sunrise,
},
{
id: 'core_sunset',
name: _(msg({context: 'Name of app icon variant', message: 'Sunset'})),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_sunset.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_sunset.png`,
)
},
image: appIconImages.core_sunset,
},
{
id: 'core_midnight',
name: _(
msg({context: 'Name of app icon variant', message: 'Midnight'}),
),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_midnight.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_midnight.png`,
)
},
image: appIconImages.core_midnight,
},
{
id: 'core_flat_blue',
name: _(
msg({context: 'Name of app icon variant', message: 'Flat Blue'}),
),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_flat_blue.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_flat_blue.png`,
)
},
image: appIconImages.core_flat_blue,
},
{
id: 'core_flat_white',
name: _(
msg({context: 'Name of app icon variant', message: 'Flat White'}),
),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_flat_white.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_flat_white.png`,
)
},
image: appIconImages.core_flat_white,
},
{
id: 'core_flat_black',
name: _(
msg({context: 'Name of app icon variant', message: 'Flat Black'}),
),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_flat_black.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_flat_black.png`,
)
},
image: appIconImages.core_flat_black,
},
{
id: 'core_classic',
@@ -167,16 +82,7 @@ export function useAppIconSets() {
message: 'Bluesky Classic™',
}),
),
iosImage: () => {
return require(
`../../../../assets/app-icons/ios_icon_core_classic.png`,
)
},
androidImage: () => {
return require(
`../../../../assets/app-icons/android_icon_core_classic.png`,
)
},
image: appIconImages.core_classic,
},
] satisfies AppIconSet[]
src/view/com/auth/SplashScreen.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ import {Logotype} from '#/view/icons/Logotype'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
// @ts-expect-error
import splashImagePointer from '../../../../assets/illustrations/illustration-mobile.png'
import splashImagePointer from '../../../../assets/illustrations/illustration-mobile.webp'
// @ts-expect-error
import darkSplashImagePointer from '../../../../assets/illustrations/illustration-mobile-dark.png'
import darkSplashImagePointer from '../../../../assets/illustrations/illustration-mobile-dark.webp'
const splashImageUri = RNImage.resolveAssetSource(splashImagePointer)!.uri
const darkSplashImageUri = RNImage.resolveAssetSource(
darkSplashImagePointer,
src/view/icons/Logo.tsx
+2 -2
View File
@@ -42,8 +42,8 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
isJapanLogo
? require('../../../assets/icons/custom_logo_japan.svg')
: size > 100
? require('../../../assets/kawaii.png')
: require('../../../assets/kawaii_smol.png')
? require('../../../assets/kawaii.webp')
: require('../../../assets/kawaii_smol.webp')
}
accessibilityLabel="Bluesky"
accessibilityHint=""