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).
Related
This may sound like stupid question, but for me it's important.
I don't have much experience with using Photoshop, because Inkscape is perfect for my needs (web). Now I would need to create something and print it. I know that color mode for printing should be CMYK.
Because I am more familiar with Inkscape(that does not support CMYK), can I create PDF in that program and then import it into Photoshop and change color mode to CMYK. Is that valid? It shows that color mode is changed, but is that all? Because this is not for me and I just want to know if person that I wouk this for will not have any problems when it comes to printing. How can I make sure that conversion to CMYK was good?
One more question. In Inkscape I can not crop image, but I can mask or clip it. Basically, image still exist, but you see only portion of it. When it comes to printing will printer print full image or just that portion of it or I will need to crop image?
For most part, when you print an RGB file on your printer, the printer will convert it to CMYK. It's ability to do so "well" will depend on how accurate you need it to be & what color profile it is printing from (sRGB generally turns out better than say AdobeRGB).
The main reason for you to convert a file is so that you can make any fine tune adjustments to the image after the change. So you're not leaving it to the printer to decide and possibly mess up.
I'm not familiar with InkScape so don't know how it'll export said artwork. When you open it in Photoshop however, you will be able to see if it tacked it on there. Then you can crop if need be.
Hope that helps.
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!
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.
Since some days I'm experiencing this problem.
Here is my debug
The image provided is bigger than 200x200 px, it has unique link and there is any redirection on that page.
Linter response is 200.
When I copy and past page's link on fb it give me the choice between 3 images that are smaller than 200x200px and the one I've provided is ignored.
But If I try to share it through "Like button" or "Send button" it works fine.
It sounds like a fb Bug.
Thx
I solved using informations from this and this posts.
You can try using an image that is bigger than 200x200, with dimensions multiple of 100, and squared.
Other useful stuffs are using jpg extension, host the image in the same server of the website and avoid any "strange" chars in filename.
I tried many of the suggestions on this post and others to no avail. The thing finally worked for me (which I have not seen elsewhere) was to add the correct prefix to the element which I previously was missing entirely.
<head prefix="og: http://ogp.me/ns#">
Not sure if that actually fixed the problem for good or it just jogged the debugger into re-scanning the image (properly) but hopefully it helps someone else.
I got it done by renaming the image and the og:image url. Give it a try.
I have been struggling with this for a while too. I have tried all shapes and size for the image, renaming it, adding specific og:image:height and :width tags, etc.
The way I 'solved' it is just putting the image I want to show up in the website's root directory and point in og:image to another (1500x1500, btw) image. Facebook linter then tells me that it will use the image in the root directory. And that just works fine ;-)
Even if your image size is not in multiples of 100, it should work if your image is in jpg or jpeg format.
If your image is in png format, no matter what the size is, it will not work. This is based on my tests only. I would like to hear from other devs here.
I use png's all the time. I always use 1920 x 1080 because they look so good on Facebook shares. 85% of the time they work, sometimes they don't. Sometimes I delete and reload the same photo without renaming or changing a thing and it all of a sudden works. I'm not a real dev so that's all I can offer.
I tried most of these suggestions - double-checked the <head> prefix, tried adding the javascript sdk, tried square images, sourcing from different locations, simplifying the file name...
What finally worked was making sure an <img> tag for the same image appears in the body! I hid it with CSS / inline style.
I need to import animations from Maple into my LaTeX/Beamer presentation. I save a file in GIF format. But later I have problems converting that file into PNG. All I get is a static PNG file and can't proceed ((( What's the full code to do that in LaTeX?
You can use the animate package to animate a series of PNGs. To get the series of PNGs from an animated GIF, use a tool like ImageMagick's convert.
Does this help: LINK? (This is the same answer as marcog... just wanted to provide a reference to it being asked previously -- the solution was the same: the animate package).
Also, your OS will matter. I don't know that Linux (not saying you're using it) has any ability to play animated PDFs. I've tried embedding movies using LaTeX and while it "works," you can't actually view them in anything Linux offers yet. Okular is working on it, but last I checked (couple months?) it's not possible yet.
Anyway, just wanted to add that just in case you were doing everything completely right and by chance are not seeing the fruits of your labor since you're using a Linux viewer. Check your work with Acrobat on Windows to be sure.