diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index 208973cc9..a45dacf2e 100644
--- a/src/components/MediaPreview.tsx
+++ b/src/components/MediaPreview.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
-import {AppBskyFeedDefs} from '@atproto/api'
+import {type AppBskyFeedDefs} from '@atproto/api'
 import {Trans} from '@lingui/macro'
+import type React from 'react'
 
 import {isTenorGifUri} from '#/lib/strings/embed-player'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {atoms as a, useTheme} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
@@ -21,6 +25,7 @@ export function Embed({
   embed: AppBskyFeedDefs.PostView['embed']
   style?: StyleProp<ViewStyle>
 }) {
+  const highQualityImages = useHighQualityImages()
   const e = bsky.post.parseEmbed(embed)
 
   if (!e) return null
@@ -31,7 +36,10 @@ export function Embed({
         {e.view.images.map(image => (
           <ImageItem
             key={image.thumb}
-            thumbnail={image.thumb}
+            thumbnail={maybeModifyHighQualityImage(
+              image.thumb,
+              highQualityImages,
+            )}
             alt={image.alt}
           />
         ))}
diff --git a/src/screens/Settings/DeerSettings.tsx b/src/screens/Settings/DeerSettings.tsx
index f04cb5955..d1da73763 100644
--- a/src/screens/Settings/DeerSettings.tsx
+++ b/src/screens/Settings/DeerSettings.tsx
@@ -38,6 +38,10 @@ import {
   useHideFollowNotifications,
   useSetHideFollowNotifications,
 } from '#/state/preferences/hide-follow-notifications'
+import {
+  useHighQualityImages,
+  useSetHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   useNoAppLabelers,
@@ -260,6 +264,9 @@ export function DeerSettingsScreen({}: Props) {
   const noDiscoverFallback = useNoDiscoverFallback()
   const setNoDiscoverFallback = useSetNoDiscoverFallback()
 
+  const highQualityImages = useHighQualityImages()
+  const setHighQualityImages = useSetHighQualityImages()
+
   const hideFollowNotifications = useHideFollowNotifications()
   const setHideFollowNotifications = useSetHideFollowNotifications()
 
@@ -521,6 +528,24 @@ export function DeerSettingsScreen({}: Props) {
               </Toggle.LabelText>
               <Toggle.Platform />
             </Toggle.Item>
+
+            <Toggle.Item
+              name="high_quality_images"
+              label={_(msg`Display images in higher quality`)}
+              value={highQualityImages}
+              onChange={value => setHighQualityImages(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Display images in higher quality</Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+            <Admonition type="info" style={[a.flex_1]}>
+              <Trans>
+                Images will be served as PNG instead of JPEG. Images will take
+                longer to load and use more bandwidth.
+              </Trans>
+            </Admonition>
           </SettingsList.Group>
 
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts
index df03cfd73..687a57f8d 100644
--- a/src/state/persisted/schema.ts
+++ b/src/state/persisted/schema.ts
@@ -140,6 +140,7 @@ const schema = z.object({
       trusted: z.array(z.string()),
     })
     .optional(),
+  highQualityImages: z.boolean().optional(),
 
   /** @deprecated */
   mutedThreads: z.array(z.string()),
@@ -213,6 +214,7 @@ export const defaults: Schema = {
       'did:plc:b2kutgxqlltwc6lhs724cfwr',
     ],
   },
+  highQualityImages: false,
 }
 
 export function tryParse(rawData: string): Schema | undefined {
diff --git a/src/state/preferences/high-quality-images.tsx b/src/state/preferences/high-quality-images.tsx
new file mode 100644
index 000000000..039ef4ef2
--- /dev/null
+++ b/src/state/preferences/high-quality-images.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['highQualityImages']
+type SetContext = (v: persisted.Schema['highQualityImages']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.highQualityImages,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['highQualityImages']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('highQualityImages'))
+
+  const setStateWrapped = React.useCallback(
+    (highQualityImages: persisted.Schema['highQualityImages']) => {
+      setState(highQualityImages)
+      persisted.write('highQualityImages', highQualityImages)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate('highQualityImages', nextHighQualityImages => {
+      setState(nextHighQualityImages)
+    })
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useHighQualityImages() {
+  return React.useContext(stateContext)
+}
+
+export function useSetHighQualityImages() {
+  return React.useContext(setContext)
+}
+
+// This is a little weird to have here imo but it works I guess
+function modifyHighQualityImage(src: string) {
+  try {
+    const url = new URL(src)
+    if (url.hostname === 'cdn.bsky.app' && url.pathname.endsWith('@jpeg')) {
+      url.pathname = url.pathname.replace(/@jpeg$/, '@png')
+      return url.toString()
+    }
+  } catch {
+    // ignored, in case the URL is somehow malformed
+  }
+
+  return null
+}
+
+// Like `hackModifyThumbnailPath`, it's easier to just pipe the src into a function like this
+export function maybeModifyHighQualityImage(src: string, isEnabled?: boolean) {
+  if (isEnabled) {
+    return modifyHighQualityImage(src) ?? src
+  } else {
+    return src
+  }
+}
diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx
index f7a00d62e..330d578e9 100644
--- a/src/state/preferences/index.tsx
+++ b/src/state/preferences/index.tsx
@@ -11,6 +11,7 @@ import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
 import {Provider as GoLinksProvider} from './go-links-enabled'
 import {Provider as HiddenPostsProvider} from './hidden-posts'
 import {Provider as FollowNotificationsProvider} from './hide-follow-notifications'
+import {Provider as HighQualityImagesProvider} from './high-quality-images'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
 import {Provider as KawaiiProvider} from './kawaii'
 import {Provider as LanguagesProvider} from './languages'
@@ -55,23 +56,25 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
                           <LargeAltBadgeProvider>
                             <ExternalEmbedsProvider>
                               <HiddenPostsProvider>
-                                <InAppBrowserProvider>
-                                  <DisableHapticsProvider>
-                                    <AutoplayProvider>
-                                      <UsedStarterPacksProvider>
-                                        <SubtitlesProvider>
-                                          <TrendingSettingsProvider>
-                                            <RepostCarouselProvider>
-                                              <KawaiiProvider>
-                                                {children}
-                                              </KawaiiProvider>
-                                            </RepostCarouselProvider>
-                                          </TrendingSettingsProvider>
-                                        </SubtitlesProvider>
-                                      </UsedStarterPacksProvider>
-                                    </AutoplayProvider>
-                                  </DisableHapticsProvider>
-                                </InAppBrowserProvider>
+                                <HighQualityImagesProvider>
+                                  <InAppBrowserProvider>
+                                    <DisableHapticsProvider>
+                                      <AutoplayProvider>
+                                        <UsedStarterPacksProvider>
+                                          <SubtitlesProvider>
+                                            <TrendingSettingsProvider>
+                                              <RepostCarouselProvider>
+                                                <KawaiiProvider>
+                                                  {children}
+                                                </KawaiiProvider>
+                                              </RepostCarouselProvider>
+                                            </TrendingSettingsProvider>
+                                          </SubtitlesProvider>
+                                        </UsedStarterPacksProvider>
+                                      </AutoplayProvider>
+                                    </DisableHapticsProvider>
+                                  </InAppBrowserProvider>
+                                </HighQualityImagesProvider>
                               </HiddenPostsProvider>
                             </ExternalEmbedsProvider>
                           </LargeAltBadgeProvider>
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 20fc1c65d..62b4be32c 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -2,14 +2,14 @@ import React, {memo, useMemo} from 'react'
 import {
   Image,
   Pressable,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {Image as RNImage} from 'react-native-image-crop-picker'
+import {type Image as RNImage} from 'react-native-image-crop-picker'
 import Svg, {Circle, Path, Rect} from 'react-native-svg'
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -24,6 +24,10 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {colors} from '#/lib/styles'
 import {logger} from '#/logger'
 import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {precacheProfile} from '#/state/queries/profile'
 import {HighPriorityImage} from '#/view/com/util/images/Image'
 import {tokens, useTheme} from '#/alf'
@@ -38,7 +42,7 @@ import {Link} from '#/components/Link'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as Menu from '#/components/Menu'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
 
 export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
@@ -194,6 +198,7 @@ let UserAvatar = ({
   const pal = usePalette('default')
   const backgroundColor = pal.colors.backgroundLight
   const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
+  const highQualityImages = useHighQualityImages()
 
   const aviStyle = useMemo(() => {
     if (finalShape === 'square') {
@@ -247,7 +252,10 @@ let UserAvatar = ({
           style={aviStyle}
           resizeMode="cover"
           source={{
-            uri: hackModifyThumbnailPath(avatar, size < 90),
+            uri: maybeModifyHighQualityImage(
+              hackModifyThumbnailPath(avatar, size < 90),
+              highQualityImages,
+            ),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
           onLoad={onLoad}
@@ -258,7 +266,10 @@ let UserAvatar = ({
           style={aviStyle}
           contentFit="cover"
           source={{
-            uri: hackModifyThumbnailPath(avatar, size < 90),
+            uri: maybeModifyHighQualityImage(
+              hackModifyThumbnailPath(avatar, size < 90),
+              highQualityImages,
+            ),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
           onLoad={onLoad}
@@ -289,6 +300,7 @@ let EditableUserAvatar = ({
   const {requestCameraAccessIfNeeded} = useCameraPermission()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
   const sheetWrapper = useSheetWrapper()
+  const highQualityImages = useHighQualityImages()
 
   const aviStyle = useMemo(() => {
     if (type === 'algo' || type === 'list') {
@@ -367,7 +379,9 @@ let EditableUserAvatar = ({
               <HighPriorityImage
                 testID="userAvatarImage"
                 style={aviStyle}
-                source={{uri: avatar}}
+                source={{
+                  uri: maybeModifyHighQualityImage(avatar, highQualityImages),
+                }}
                 accessibilityRole="image"
               />
             ) : (
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index b29b30a53..69cf22b6d 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -27,6 +27,10 @@ import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isAndroid, isNative} from '#/platform/detection'
 import {useLightboxControls} from '#/state/lightbox'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import {tokens, useTheme as useAlfTheme} from '#/alf'
 import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
@@ -58,6 +62,7 @@ export function UserBanner({
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
   const sheetWrapper = useSheetWrapper()
   const {openLightbox} = useLightboxControls()
+  const highQualityImages = useHighQualityImages()
 
   const bannerRef = useHandleRef()
 
@@ -108,8 +113,8 @@ export function UserBanner({
       openLightbox({
         images: [
           {
-            uri,
-            thumbUri: uri,
+            uri: maybeModifyHighQualityImage(uri, highQualityImages),
+            thumbUri: maybeModifyHighQualityImage(uri, highQualityImages),
             thumbRect,
             dimensions: thumbRect,
             thumbDimensions: null,
@@ -119,7 +124,7 @@ export function UserBanner({
         index: 0,
       })
     },
-    [openLightbox],
+    [openLightbox, highQualityImages],
   )
 
   const onPressBanner = React.useCallback(() => {
@@ -144,7 +149,9 @@ export function UserBanner({
                 <Image
                   testID="userBannerImage"
                   style={styles.bannerImage}
-                  source={{uri: banner}}
+                  source={{
+                    uri: maybeModifyHighQualityImage(banner, highQualityImages),
+                  }}
                   accessible={true}
                   accessibilityIgnoresInvertColors
                 />
@@ -222,7 +229,7 @@ export function UserBanner({
           {backgroundColor: theme.palette.default.backgroundLight},
         ]}
         contentFit="cover"
-        source={{uri: banner}}
+        source={{uri: maybeModifyHighQualityImage(banner, highQualityImages)}}
         blurRadius={moderation?.blur ? 100 : 0}
         accessible={true}
         accessibilityIgnoresInvertColors
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 883d3814f..cf9dc86b6 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -1,13 +1,17 @@
 import React, {useRef} from 'react'
-import {DimensionValue, Pressable, View} from 'react-native'
+import {type DimensionValue, Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
-import {AppBskyEmbedImages} from '@atproto/api'
+import {type AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {HandleRef, useHandleRef} from '#/lib/hooks/useHandleRef'
-import type {Dimensions} from '#/lib/media/types'
+import {type HandleRef, useHandleRef} from '#/lib/hooks/useHandleRef'
+import  {type Dimensions} from '#/lib/media/types'
 import {isNative} from '#/platform/detection'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
@@ -77,6 +81,7 @@ export function AutoSizedImage({
   const largeAlt = useLargeAltBadgeEnabled()
   const containerRef = useHandleRef()
   const fetchedDimsRef = useRef<{width: number; height: number} | null>(null)
+  const highQualityImages = useHighQualityImages()
 
   let aspectRatio: number | undefined
   const dims = image.aspectRatio
@@ -107,7 +112,7 @@ export function AutoSizedImage({
       <Image
         contentFit={isContain ? 'contain' : 'cover'}
         style={[a.w_full, a.h_full]}
-        source={image.thumb}
+        source={maybeModifyHighQualityImage(image.thumb, highQualityImages)}
         accessible={true} // Must set for `accessibilityLabel` to work
         accessibilityIgnoresInvertColors
         accessibilityLabel={image.alt}
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index cc3eda68d..7282034e8 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -1,12 +1,16 @@
-import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
-import {Image, ImageStyle} from 'expo-image'
-import {AppBskyEmbedImages} from '@atproto/api'
+import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
+import {Image, type ImageStyle} from 'expo-image'
+import {type AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
-import {HandleRef} from '#/lib/hooks/useHandleRef'
-import {Dimensions} from '#/lib/media/types'
+import {type HandleRef} from '#/lib/hooks/useHandleRef'
+import {type Dimensions} from '#/lib/media/types'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
 import {atoms as a, useTheme} from '#/alf'
@@ -47,6 +51,7 @@ export function GalleryItem({
   const t = useTheme()
   const {_} = useLingui()
   const largeAltBadge = useLargeAltBadgeEnabled()
+  const highQualityImages = useHighQualityImages()
   const image = images[index]
   const hasAlt = !!image.alt
   const hideBadges =
@@ -71,7 +76,9 @@ export function GalleryItem({
         accessibilityLabel={image.alt || _(msg`Image`)}
         accessibilityHint="">
         <Image
-          source={{uri: image.thumb}}
+          source={{
+            uri: maybeModifyHighQualityImage(image.thumb, highQualityImages),
+          }}
           style={[a.flex_1]}
           accessible={true}
           accessibilityLabel={image.alt}
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 6f5f9d3ab..508323c56 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import {
   InteractionManager,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
+import {type MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {
   AppBskyEmbedExternal,
@@ -18,19 +18,23 @@ import {
   AppBskyGraphDefs,
   moderateFeedGenerator,
   moderateUserList,
-  ModerationDecision,
+  type ModerationDecision,
 } from '@atproto/api'
 
-import {HandleRef, measureHandle} from '#/lib/hooks/useHandleRef'
+import {type HandleRef, measureHandle} from '#/lib/hooks/useHandleRef'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useLightboxControls} from '#/state/lightbox'
+import {
+  maybeModifyHighQualityImage,
+  useHighQualityImages,
+} from '#/state/preferences/high-quality-images'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
 import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
-import {Dimensions} from '../../lightbox/ImageViewing/@types'
+import {type Dimensions} from '../../lightbox/ImageViewing/@types'
 import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
@@ -64,6 +68,7 @@ export function PostEmbeds({
   viewContext?: PostEmbedViewContext
 }) {
   const {openLightbox} = useLightboxControls()
+  const highQualityImages = useHighQualityImages()
 
   // quote post with media
   // =
@@ -136,8 +141,8 @@ export function PostEmbeds({
 
     if (images.length > 0) {
       const items = embed.images.map(img => ({
-        uri: img.fullsize,
-        thumbUri: img.thumb,
+        uri: maybeModifyHighQualityImage(img.fullsize, highQualityImages),
+        thumbUri: maybeModifyHighQualityImage(img.thumb, highQualityImages),
         alt: img.alt,
         dimensions: img.aspectRatio ?? null,
       }))