Image are displayed only compressed

Expo SDK
1

Is expo doing some kind of pre-image compression? I have been searching with google and expo forums etc. and I cannot find it out. Somehow randomly some images display in full resultion, sometimes they are scaled down. I am doing already “base-64 data URIs”, but it doesn’t help.

See here:
https://expo.io/@mklarmann/EaternityGuests

I have done some research:
And I found this: Disappearing images - #11 by notbrent and here Image cache only caches a few images?

  • but this gives me no clue, how to get around the problem…
2

Hi! Is this happening on Android or iOS? I’m able to load that project on Android and all the images look normal resolution to me. Some more information about the exact steps to reproduce here would be really useful. Thanks!

3

I have only been testing on iPad, iPhone and iOS simulator. Each have the problem.

4

Maybe you could show me a screenshot of what’s happening when you load your app? Here’s what I’m seeing:


CloudApp

5

Sorry, it is not obvious on small screens. And thank you for the help. All is programmed for iPad resulution. I have made a screenshot

image
image2436×1125 210 KB

6

This image has far less resolution than the original.

7

Can you post the original that’s on disk in your project too?

8

It might be a good idea to see if you can replicate this inside a Snack.

9

circle
circle2048×1400 252 KB
that would be the original image

10

I have been trying now for some time. http://snack.expo.io does not save anything into my account.

I currently can’t even get this code to work, maybe this is related (like a hard limit uncompressed image size)?

import { circle } from "../config/assets/circle.png.b64.js";
import { circle2 } from "../config/assets/circle2.png.b64.js"; // (copy of the same file)

  <Image  source={{ uri: circle }}  />
  <Image  source={{ uri: circle2 }}  />

where circle.png.b64.js is the image in base64 encoding, with

openssl base64 -in "$f" -out "$f.b64"
export const circle = `data:image/png;base64,xxxxx.....`
11

I have made the repo public, I hope this helps:

https://github.com/Eaternity/EaternityGuests

12

Expo currently does not do any image optimization. If you are seeing this while developing your app, the images are served direct from your computer to your device. I suspect the issue may be with selecting the wrong resolution of image (e.g. 1x instead of 2x – try adding just 2x images to your repo since almost no devices today are 1x anyway) or something in React Native downscaling your images. On the device, Expo just uses React Native’s <Image> implementation.

13

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.