I don’t know how to explain this so I’ll just show you. Same build. The yellow one is how it displays on my iPhone 12 Mini with the Adalo Progressive Web App, the orange is the way it displays on my iPhone 12 Mini with the app installed through Test Flight.
What’s going on?
And to be clear, this isn’t a color set with a picker on Adalo’s side, this is a .jpg image.
This is a huge topic once you go down the rabbit hole. What is “sort of” happening is like when you walk down the aisle of an electronic store an see all the TVs playing the same show but on every TV it looks slightly (or very) different in color, contrast, clarity, etc… The same can happen with printing an image on a printer.
The same thing applies to browsers an apps. In fact, up until very recently, if you opened the image in Chrome it would have different colors than Safari. They all had their own idea of what #00ea4f actually looked like. Things are getting better as more standards are being adopted.
This is extremely over simplified, but what you are seeing is normal, and as always, Apple is doing their own thing to “improve” over standards.
I appreciate this explanation, @TKOTC… but what do I do about it? I mean, it’s a fairly large brand consistency issue.
I’d need the original image and how it was produced. What is the color profile selected? If the answer was none, or I don’t know what color profile means, that might be the first area to attack? How did you generate the image?
In the pixel perfect world you generate mdpi, hdpi, xhdpi, xxhdpi images for andriod and x1, x2, x3 for Apple, then whatever you need for web. Specifying color profiles in the image.
I’m working on a non-Adalo app with a graphic designer working with Apple products who keeps telling the the background needs to be #fcfef6… which it is, it just looks white depending on the platform
If you open the image from your phone (from image gallary not pwa or in app), does it look like the left or the right image? What phone model are you using? You can DM me if you don’t want to share public.
I don’t mind, @TKOTC. Might help someone else to see it.
The image shows up correctly (yellow, not orange) everywhere, always, until I am opening the app via Test Flight. That’s whether I view it as a photo in my photo gallery, or in the Adalo progressive web app. But as soon as the build goes up to Test Flight, it looks orange.
My device is an iPhone 12 Mini. Latest version of iOS.
Now that is intriguing and contrary to what I expected, something else must be at work here.
I expected you to say iPhone 6, or it matched the orange, not yellow.
My current working theory is that, as we know images are stored in imgix, during the build process, in order to minify the app as much as possible, the files from imigx are store locally using a distorted version of the original. I’ll need to investigate that. Stay tuned.
Okay, first point of interest. I created my own version of your image
The meta in the image I uploaded was
C:\Users\StevenMcKeown\Documents>"exiftool-12.37\exiftool(-k).exe" pf-test.jpg
ExifTool Version Number : 12.37
File Name : pf-test.jpg
Directory : .
File Size : 23 KiB
Zone Identifier : Exists
File Modification Date/Time : 2021:12:19 19:25:06-05:00
File Access Date/Time : 2021:12:19 19:33:01-05:00
File Creation Date/Time : 2021:12:19 19:25:05-05:00
File Permissions : -rw-rw-rw-
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Resolution Unit : None
X Resolution : 1
Y Resolution : 1
Profile CMM Type :
Profile Version : 4.3.0
Profile Class : Display Device Profile
Color Space Data : RGB
Profile Connection Space : XYZ
Profile Date Time : 0000:00:00 00:00:00
Profile File Signature : acsp
Primary Platform : Unknown ()
CMM Flags : Not Embedded, Independent
Device Manufacturer :
Device Model :
Device Attributes : Reflective, Glossy, Positive, Color
Rendering Intent : Media-Relative Colorimetric
Connection Space Illuminant : 0.9642 1 0.82491
Profile Creator :
Profile ID : 0
Profile Description : sRGB
Red Matrix Column : 0.43607 0.22249 0.01392
Green Matrix Column : 0.38515 0.71687 0.09708
Blue Matrix Column : 0.14307 0.06061 0.7141
Red Tone Reproduction Curve : (Binary data 40 bytes, use -b option to extract)
Green Tone Reproduction Curve : (Binary data 40 bytes, use -b option to extract)
Blue Tone Reproduction Curve : (Binary data 40 bytes, use -b option to extract)
Media White Point : 0.9642 1 0.82491
Profile Copyright : Google Inc. 2016
Image Width : 1280
Image Height : 720
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:2:0 (2 2)
Image Size : 1280x720
Megapixels : 0.922
The image that Adalo uses was
C:\Users\StevenMcKeown\Documents>"exiftool-12.37\exiftool(-k).exe" 76e5fd126df923a78daabf0d33d995f44f9058391246e41e79b0c94c864b765c.jpg
ExifTool Version Number : 12.37
File Name : 76e5fd126df923a78daabf0d33d995f44f9058391246e41e79b0c94c864b765c.jpg
Directory : .
File Size : 20 KiB
Zone Identifier : Exists
File Modification Date/Time : 2021:12:19 19:30:23-05:00
File Access Date/Time : 2021:12:19 19:33:16-05:00
File Creation Date/Time : 2021:12:19 19:30:23-05:00
File Permissions : -rw-rw-rw-
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Resolution Unit : inches
X Resolution : 72
Y Resolution : 72
Image Width : 1280
Image Height : 720
Encoding Process : Progressive DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:2:0 (2 2)
Image Size : 1280x720
Megapixels : 0.922
So there is definitely some reduction in information meta, I am not sure yet if this explains what you are seeing, but it definitely something noteworthy. Even the Encoding process is changed from Baseline to Progressive.
More to come, waiting on my build to finish
Okay, build finished, the image in my app seems the same visually but again, the meta is changed yet again
C:\Users\StevenMcKeown\Documents>"exiftool-12.37\exiftool(-k).exe" images_76e5fd126df923a78daabf0d33d995f44f9058391246e41e79b0c94c864b765c.jpg
ExifTool Version Number : 12.37
File Name : images_76e5fd126df923a78daabf0d33d995f44f9058391246e41e79b0c94c864b765c.jpg
Directory : .
File Size : 23 KiB
File Modification Date/Time : 2021:12:19 19:45:34-05:00
File Access Date/Time : 2021:12:19 19:51:05-05:00
File Creation Date/Time : 2021:12:19 19:51:04-05:00
File Permissions : -rw-rw-rw-
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Resolution Unit : None
X Resolution : 1
Y Resolution : 1
Image Width : 1280
Image Height : 720
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:2:0 (2 2)
Image Size : 1280x720
Megapixels : 0.922
-
They are visually look similar to me on Windows/Android. I am going to send the variations of the images produced to one of my team members with an iPhone and see what the visual results are. If there are different then either Adalo needs to make a change in imigx when downloading data to include more data, or I can build a component to fix the issue. If they are the same, I might need more information from you.
Let me know how I can help, I’ll provide whatever you need.
My iPhone tester was online so I messaged her. I built a non-adalo app using the images i got. Fingers crossed it appears like yours, otherwise I might need you to 1) build android and send me apk or abb, and if that does not work then lastly is to invite one of my testers to your testflight.
This is very interesting!
Out of curiosity, I’ve build an app with an image made by Steven, and tested it on my iPhone (PWA and Native).
The results are:
@tanner may be you could provide a link to the original image (link is better to avoid image conversions on this forum, for instance), and which color ## is used?
Just my 2 cents 
Best regards, Victor.
Just wondering - was this resolved eventually? It would be interesting to know the result.
I’ve checked again with another picture (an icon taken from Pysma app from another thread) - still can’t reproduce the issue…
Best regards, Victor.
All checked out on my end, waiting for @tanner to give my testers access to his app for further investigation.
Just for reference; We have had a total of 2 cases of this reported in the past. 1 for Android and 1 for iOS. We were never able to reproduce it on our end (support) and therefore never got escalated to the developers. I’d love to try and find the pattern in these (now) 3 cases.
@tanner Have you sent in a ticket about this?
Been to busy @anon78309838 I’m waist deep in trying to get this app launched. My solve was to replace the JPG with an PNG, it solved the issue. I know that’s not great but I can’t spend more time on it since it’s solved. Appreciate you!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.