My website home page colors are wrong, how can I fix this? sabinaprocacci.com
Hi! I just built a new website and while everything looks great on Safari, but on Firefox the colors on my homepage header are completely off. They look horrible and since I am a wedding photographer it is important for me that they look like I meant to. Thank you! Sabina P.S. My website is: sabinaprocacci.com
ఎంపిక చేసిన పరిష్కారం
Hi Sabina, the images in the gallery are all sRGB and fine. Did you create the final header images yourself or did the platform (I think it was Squarespace) possibly alter them? Some server software may automatically generate multiple sizes so possibly that changed the color space.
ఈ సందర్భంలో ఈ సమాధానం చదవండి 👍 0ప్రత్యుత్తరాలన్నీ (16)
How is it wrong? I click on it and other then being a little brighter I do't see what your seeing? My guess is it is a web page programming that is doing that because FF will present the page as it is written not the other way around. So unless other Browser IE11, Edge and or Chome shows otherwise this would be a web programming issue.
It is way to over saturated. The webpage shows my three header photos as completely brighter and horrible looking. If you move on to the galleries however, all photos are like I edited them. This is my first impression and these header photos don't represent my work or style, so I need to fix this and have no idea how to...:)
Only thing I can say is did you create the web page or did someone else do it for you? The Browser only shows and does what the page directs to do from the coding. FF can't rewrite the codes on the page since it's not the permission holder for the codes.
I designed it with the help of a renown web-designer. it looks perfect on Safari and also the same photos look perfect in the galleries on FF (if you go to my website and go to Gallery 01 you will see what I mean), but in the header on my homepage the colors look completely off. FF must have changed the contrast and saturation (compare the greens in the same photo in gallery 01). If it looks perfect on Safari, how come that is doesn't on FF then?
Can you attach a screenshot?
- https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
- use a compressed image type like PNG or JPG to save the screenshot
This can be caused by a problem with the color profile for your display monitor or color profiles embedded in images. Try to disable color management to test if it is caused by a problem with color management. You can set the gfx.color_management.mode pref to 0 on the about:config page to disable Color Management. You need to close and restart Firefox to make the change effective.
See also:
Suggest have a talk with the web person to clean up the coding errors : HTML - https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.sabinaprocacci.com%2F CSS - https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.sabinaprocacci.com%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en
Thanks so much for getting back to me. I really appreciate your help. I went into config to reset the color preference to 0 but it didn't help yet. Here is the screenshot of my website. Since I am a wedding photographer, the first impression of my website is really important. You can also view my website directly at: sabinaprocacci.com, since I am having problems uploading my screenshot
Uploading issue is related to the site hosting your web domain. If they don't have a way to upload and or save to host your images on there then this is between you and the hosting site to find a solution to allow you to upload your images so people can see them.
I'm not noticing a difference between Firefox and Chrome on Windows 7.
You may be observing a difference in color space or monitor profile support on Firefox vs. Safari. This thread discusses some of Firefox's color management settings and behavior: Colors inconsistent/inaccurate.
The over saturation is possibly your end with the photos. You may have done to much photoshop or ...on them and that is what they will display as, regardless. Especially so on my 32 inch. Reducing the number of colours in the pictures for fast loading for website optimization is where you should start before a final make over of them. https://nikkhokkho.sourceforge.io/static.php?page=FileOptimizer
Hi PKshadow, thanks for getting back to me. But no, it isn't. I only edit in Lightroom and my saturation and contrast are all the way down. The same images are on my page in gallery 01 and they look like I edited them. The problem is only in the three header photos, my galleries in other photos look fine. So it can;t be on my end. I use a Mac, so I usually use Safari, but I just noticed that they are off in FF. Thank you :)
Sabina1976 said
Hi PKshadow, thanks for getting back to me. But no, it isn't. I only edit in Lightroom and my saturation and contrast are all the way down. The same images are on my page in gallery 01 and they look like I edited them. The problem is only in the three header photos, my galleries in other photos look fine. So it can;t be on my end. I use a Mac, so I usually use Safari, but I just noticed that they are off in FF. Thank you :)
Yes, they look very bad for a photog...I do not know if the HTML OR CSS Errors have anything to do with it but they should be corrected regardless as Google just loves good code and page rank will reflect that as well.
So I usually do a correction with PSP quick fix then reduce the number of colours with FileOptimizer and one other that does the same then play with pic as Google also likes fast loading graphics.
Try replacing the pics with the originals and see what they look like.
Hi Sabina1976, when I use Tools > Show Inspector in Preview, it indicates (for Home-Header1.jpg):
- Color model: CMYK
- ColorSync profile: U.S. Web Coated (SWOP) v2
I would contrast this with an image that looks pretty much the same in every browser:
- Color model: RGB
- ColorSync profile: sRGB IEC61966-2.1
I think you will need to re-save your "Home-Header" images in the sRGB color space to ensure a good appearance in web browsers other than Safari.
Hi Jscher2000, I went back to PS and checked the color profile on the three images and they are all sRGB IEC6 1966-2.1 and I am completely at loss. :( I don't know how to fix it and I emailed my web- designer several times and she didn't get back to me! The colors look bad in Chrome as well, but only in the header. I have the same images in the gallery and they completely look fine on FF and Chrome. How come that only Safari is displaying them correctly? I am not a web designer and I really don't know how to fix that problem. Thanks so much for your help! Best, Sabina
ఎంపిక చేసిన పరిష్కారం
Hi Sabina, the images in the gallery are all sRGB and fine. Did you create the final header images yourself or did the platform (I think it was Squarespace) possibly alter them? Some server software may automatically generate multiple sizes so possibly that changed the color space.
Thank you jscher2000! I will look into contacting Squarespace. Also the web designer got back to me and apparently, I made a mistake with the layers in Photoshop and maybe it wasn't saved right. I'll see if I can fix that. I'll let you know if I can finally resolve the issue, but maybe you are right and the issue is with Squarespace. Thanks so much! Sabina