I have a website that incorporates a logo in to the header. This logo has a background that is the same colour as the background of the header, yet in Firefox the colour is different.
I can find various articles alluding that the 'colour profile' being the culprit, but I cannot find out how to fix this issue.
Quite why anyone would think that changing the colour of an image is the way forward I don't know, but it looks very poor, so I'd be grateful for some suggestions on how to fix this.
To create the original image I used GIMP, and it has been exported as a PNG.
Here is a section of the header so that you can visually see what I mean -
Since you do not provide the original image, I have to make an educated guess:
Your image most likely has a (broken, incorrect) color profile embedded. Fix or remove the color profile and you should be good. See the documentation of your favorite tool on how to do that.
You should use some tool like tweakpng to check if the PNG has a color profile, and remove it.
Related
I am working on a Xamarin App compatible with all devices. I have a general question related to images. I am using Location Mark Image Icons to provide locations available on the Map. My issue is, Image has a white background which is also showing along with its background. I want to show only the Image.
Is this related to the designer to provide the image without background? Or as a developer, I can do something on it.
Xamarin.Forms doesn't delete your white background. What you need to do is following a small tutorial on how to use Adobe Photoshop for example and export your images as png, you might even consider which png type you need, there's 3 types of png:
png8
png24
png32
I won't be going deep in explaining each one of them, but you need to know that they all support transparency and could have a transparent background, however, you might notice some differences between them on the edges.
For example, png8 will give a small white border while png24 will not show that.
You can check this for example: https://helpx.adobe.com/photoshop-elements/using/optimizing-images-png-24-format.html
No, you can't do anything about it using Xamarin.Forms. You need to modify the image and remove the background (using Adobe Photoshop, etc.) and make sure to save it as .png.
If its simple white background you want to remove, You can utilise simple [MakeTransparent][1] method ofBitMap.
But this will remove all white coloured pixel. So IF your logo also contains white color, better you contact your designer.
I would like to use this background image on different pages of my website.
The idea is to have a different color, instead of being grey. I am trying to change the color on Photoshop, and found this topic: https://graphicdesign.stackexchange.com/questions/4056/replace-black-background-with-a-transparent-background but the result is not the one I was expecting.
Anyone knows how to do this ?
yes, you can change it with Photoshop.
Follow these easy steps:
1. Go to main navigation - Images -> Adjustments -> Hue/Saturation...
You must select "Colorize", then you can play with the Hue to find your color and with the saturation to saturate it.
Enjoy! :)
I think this should be in Graphic Design rather than on Stack Overflow, unless you're looking for someway to do it with Photoshop scripting.
If you're looking for simply changing the shade from gray to say orange or green. I would select the layer then go to Image>Adjustments and play around with Hue/Saturation. Play around with that. There may be another way to do it but that's what I would do.
We are using a png/8 sprite on a client's website. He is reporting the image is appearing distorted for him and on other computers on the company.
Here's how it should look:
http://i.imgur.com/wfV7ReR.jpg
And here is the print screen the client sent us:
http://i.imgur.com/sWKDYKU.jpg
I have tried donloading and exporting it again, uploading again. The problem is: On our computers it looks fine, so it's hard to test it. Our client is viewing it in IE: 11 and Google chrome: 41.0.272.118.
Has anyone seen this type of error before?
It may be the device-pixel-ratio is better than 160dpi; that'd throw off some CSS used for spriting.
If this shows "1" for you and a different value for them, I'd dig farther on that one. You could probably test this by hitting the site with an iPhone or newer Android device; they have >1.0 pixel ratios.
http://www.devicepixelratio.com/
Edit: this would also show up across-browsers on their end, as it's tied to the hardware, and not IE11.
My bet in that case is the PNG is somehow broken.
graphicdesign.stackexchange.com might be more useful; I don't know if this is fixable in CSS. (Might be; look for hacks around image backgrounds as well.)
Looking around, if you have Photoshop, you might try saving the original image, then creating a copy and changing this setting:
Image -> Mode -> Check "RGB Color"
Alternatively, try opening the image in pixlr.com, change anything however slightly, then save and use that one.
My strong suspicion is something in the way the PNG/8 is saved (maybe the alpha channel) is the issue, not any CSS you've written. Good luck!
http://moztw.org/images/product-front-thunderbird.png
I am sure that this is a PNG image in RGB colors and a alpha channel (look at the shadow below the icon), but this file mysteriously works with IE6 w/o any special CSS hack (though it seems the alpha channel is being replaced by 2-bit mask in IE6).
Can anyone tell me exactly what information is in the file? It would be even better if someone could give a guidance on how to create such file. Thanks.
Edit: Friends at moztw.org added script hack to the website, so the above statement is no longer verifiable. But your are still welcome to investigate the image format.
That's PNG8+alpha. Explanation and examples in "PNG that works" article.
You can generate such files with pngquant (on a Mac, ImageAlpha is a GUI for it).
Here is an image:
When I load this image in different browsers, it shows differently.
Take a look at the result:
I spent a lot of time on this, but I can't understand why it happens.
I have only theories: something wrong with color profiles, or bad image structure, or something else - maybe special copyright measures?
Why is this happening?
The image is a CMYK image, which IE and Safari apparently do not support. Converting it into an RGB image solved the problem for both Safari and IE.
RGB Version:
The color's been changed though, so you'd probably want to run it through Photoshop and edit the color balance to get the colors right.
There could be something wrong with the image. Open it in some image editor like GIMP and check if it gives some warnings. Try converting the image to some other format(png?) and see if the browsers render it correctly.