Muted colors on phone browser

[Claudia_Holifield]

I have an issue with a website, some photos have muted colors and others don't. I saved them the same (I think,  it at the computer to double check) but some have muted colors.

The ones that have the muted colors I took with my camera and edited to have a plain back ground. The ones that have normal colors I took from Facebook and gave the same background. Can someone look and see what the deal is? It looks normal on the computer. It's doing it on all my browsers on the phone.

https://bugbustersonline.com/about.html

[Günter Heißenbüttel]

If you think about these ones for example:

One is JPG, the other is PNG. But this shouldn’t make a difference.

But:

One has ProPhoto color profile the other has no profile.

Both isn’t correct for web. Use sRGB color profile for both images

[Claudia_Holifield]

I'll change it to sRGB. Thank you so much! I don't know why there is 2 of them I only uploaded one and it was a jpg, so that is strange. What would cause that? This is the first website I have done in muse. I used to hand-write all my HTML but trying to switch to something a bit faster lol so Muse is relatively new to me.

[Günter Heißenbüttel]

Muse doesn’t switch a JPG to PNG.

It may switch PNG to JPG, if there is (a) no transparency involved, and (b) you allowed this action by checking „Convert opaque PNG to JPG in „File/Site Properties/Content"

If your issue persists:

Please place only 2 of those „badly behaving“ images onto one newly created page within a newly created .muse file and share this file together with to the original image with us. You may use Dropbox or CC Files and post the download link here.

And: May it be possible, that you unintentionally reduced image or image container opacity in phone breakpoint?

[Claudia_Holifield]

That is possible, I'm not at my compuer to see exactly what I did, but I will look into it. When i get back home, I'm going to export all photo files for web and reupload them first and see if that helps, and just reupload that one page. Is it ok if I just replace the photos and the page or do I have to export the whole site and reupload it that way?

[Claudia_Holifield]

I uploaded the whole muse file earlier just as a backup in the event my computer messes up. It's www.bugbustersonline.com/bugbusters-3.muse

Does that help? Again first site made with muse so be gentle lol

[ankushr40215001]

Hey Claudia,

It will very easy for us t investigate after checking the bad behaving images.

Please do as instructed above by our expert, and the share he file. We will check further.

Regards,

Ankush

[Günter Heißenbüttel · Accepted solution]

The problem is easy to fix. Let me explain with the sample image of my first post.

In this case, Muse exports 2 images, because the image is cropped in the 768 px breakpoint, and – in order to reduce page load time – Muse exports only that part of the image, which is visible in its container. These images normally have the label „crop“ in the file name of the exported image.

Muse often exports more instances of one image to reduce page loading times. This happens as well, if images are reduced in size breakpoint-wise.

The color issue, which you are experiencing, is caused by the „ProPhoto“ color profile, which isn’t "web conform“.

Since Muse doesn’t touch images, which are placed without any scaling and cropping, the image (and its profile) is passed through unmodified to the HTML output. For breakpoint 768 px, Muse crops the images and removes the non-standard profile. This causes the varying appearance in this breakpoint.

So: Assign a sRGB profile to the images, relink them and all will be fine.

One more hint: Please pay attention, that your placed images don’t exceed their original size. The image mentioned above is placed at 100 % (in your case: 100 px B/W) in all breakpoints, except the smallest one. Here the placed size exceeds the original size (118 x 118 px image size in a 100 x 100 px container).

[Claudia_Holifield]

You're awesome. I got it all fixed now