Here is a PNG that I converted from .ico format using macOS Preview.app. It kind of flashes when viewed in Safari or Chrome on my Mac. It is not supposed to be animated.
I filed this as a bug (rdar://24844825, mirrored on OpenRadar here) back in February 2016.
It is still happening, and in fact now it happens in Chrome as well.
What is causing this png to be displayed as if it were animated? That "shouldn’t" be possible with PNG!
What is causing this png to be displayed as if it were animated? That "shouldn’t" be possible with PNG!
That's true for a PNG, but not an APNG, which is what you have here.
An Animated PNG is an extension of the PNG format which allows for animation similar to an animated GIF.
Apple adopted the format in 2016 for their animated stickers, which may explain why Preview has the ability to read and write them. It seems it took the different resolutions stored in the ICO and saved them as multiple frames of an APNG.
You can remove the frame you don't want by opening the PNG in Preview, selecting the frame you don't want, and pressing the delete key.
Related
I have a strange problem. When I save an image with photoshop ("save for web")
and put in to a website, the image is always bigger and not sharp.
Here is an example
Here I compare the saved image, and the display in my browsers.
(chrome, firefox, edge - always the same)
I use Photoshop CS2 and Windows 10. Never mentioned this problem before
(normal screenshots, RGB Mode 8bit, safe as PNG. Should look exacty like
in Photoshop ...)
Thank you for your help.
solved it. windows 10 has a scaling of 25%
https://www.thurrott.com/windows/windows-10/4597/windows-10-feature-focus-display-scaling
and old Photoshop CS2 dont support it. so display is different....
I was wondering what image formats (aside from the basic JPEG, GIF, PNG) the major browsers would support, especially Chrome, Firefox, and Webkit. If anyone can provide a link to a list somewhere (that is updated frequently to cope with the frequent updates recently) that would be great. Support for other formats (like document and video) would also be nice.
I feel like this information should be listed somewhere, but I didn't find any such thing when I searched.
Here is a nice resource: http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
Major image file support
.bmp, .jpg, .jpeg, .png, .gif
New
.webp
The image format supported in popular browsers: BMP, SVG, JPG, PNG and GIF. There is no two format jpeg or jpg, it's one with multiple extensions used due to see here.
Note: SVG(Simple Vector Graphics) can produced much smaller images but allows only vector images(no raster).
Next, the other formats used are webp and jpeg2000.
Webp:- Supported by many browsers such as Chrome, Opera. There is an issue running for Firefox support here. Note that, Webp can reduce the image memory size to around 30-40% of the original size(in our experiments) on an average. This doesn't means always as sometimes we have seen transcoded webp from jpegs to go beyond the original jpeg size. The output image had no visual difference compared to original jpegs. My suggestion: serve webp where possible, i.e. Chrome, Android, Opera.
JPEG2000:- This format is great. Resizing an image does not drop quality as much as JPEG. The problem is it's too computation intensive for decoding and the fact it came over a decade ago when hardware wasn't great(especially not meant for mobile). It still is used in some cameras as it results in smaller images.
Less popular but worth mentioning: BPG and FLIF. This will require using JS or other library to serve on web/app.
JPEG and PNG are supported by the every browser. But the new image format which is webP is only supported by the Chrome, and partially by the Firefox and not at all supported by the Safari at all. Thou WebP is really good as it does not compromise with the quality of the image and also reduce it to 25-35% less. But we cant still use it because it is less flexible in the different browser environment.
But you can look for the other image format also which are available and compatible for each browser type.
Firefox 12 renders the image below in paler colors while Chrome 19, Opera 11, Safari 5 and IE9 render it correctly.
The image on the left is original PNG uploaded to Stackoverflow while the one on the right is screenshot snippet of Firefox's rendering:
When you view this question page on Firefox you still see a difference. I believe Firefox applies the same color transformation to it's own rendering (saved by snip tool) too. But I don't see any rendering difference on stackoverflow logo.
I tried with both Paint.NET's saved PNG and output of OptiPNG, results are the same. Any troubleshooting hints are also appreciated.
The png image has a gAMA chunk, so its rendering will depend on whether the thing doing the rendering supports gamma correction for PNGs.
Firefox does support this. Other browsers may not.
Funny enough, in 2016 the exact opposite is now true. In the absence of an ICC profile, Firefox needs the sRGB chunk to render PNGs the same as Safari/Chrome/WebKit.
You can use free/open-source pngcrush to add an sRGB chunk to your image if it doesn't have one.
pngcrush -sRGB existing.png new-better.png
NB - Firefox 45.0.2 for OS X, PNG generated by Adobe Illustrator CC 2015, your mileage may vary...
When using iMagick in PHP to create png image, the same situation might occur. At the current moment both Firefox and Chrome renders image with different color than IE11.
You can remove the gamma information using this PHP code just before saving:
$imagick->stripImage();
I have a jpeg that shows up properly in FF, but won't appear in IE or Chrome. I tried downloading the image and loading it in IE and Chrome directly without success: both browsers shows a broken icon. So this is not a network issue.
This file is a result of an image resize by javax.imageio.ImageIO. I have processed over 1000 images successfully.
Windows explorer shows the thumbnail properly, and I can edit it successfully in Microsoft Office Picture Manager.
Is there any tool that could help me understand what is wrong with this file?
My guess is it's a CMYK JPG. Change it to RGB.
I had the same issue several times (mostly in IE 6 and 7).
Two things I've notice (except the colorspace CMYK / RGB, witch is the first thing to look for):
Even in Photoshop, when I changed the colorspace ("mode" in PS), and re-saved the image, often the change didn't seem to stick. So I often find it easier to do a copy/paste in a fresh new RGB 8 bit document.
Also, those images usually came from a Mac PS while I was working on a PC (or vice-versa) so something regarding RGB Mac/PC colorspace seems to be at stake here.
I had a similar issue and thanks to twlichty for the correct answer to my issue. The file was a CMYK jpg format.
But I needed to keep it in CMYK as we are printing off the image as a looped background for office awards. As a solution I worked of the OP's final solution and I changed the image to PNG. I turned off Transparency as it was not needed and I unchecked Convert to sRGB to keep it in CMYK. This then created a CMYK image with a PNG wrapper that Internet Explorer was capable of printing. The final image colors look spot on as well.
Just wanted to leave my own issue and fix found related to this topic for others.
Cheers.
batty13
If all you want to do is fix this one image and move on, I imagine you could fix it by simply writing it out with a different tool, perhaps after making a trivial change.
You need a library/class that supports CMYK, otherwise all you get is an error or, even worse, all you get is an unreadable pictures.
Look your documentation for references to "Colorspace".
I'm working on a Sidebar Gadget and cannot get my JPEGs to show up (PNGs work). When I try to open the file by itself in IE8 it doesn't work. Firefox, of course, can open it fine.
JPEG Details:
Dimensions: 1080X900
180 dpi
Bit depth 24
Color representation: uncalibrated
I've found some things talking about the images being compressed incorrectly (?) but I haven't been able to get it working...
Any clues?
IE8 drops support for CMYK JPEG and renders them as the infamous red X without so much as a warning.
If you have ImageMagick:
identify -verbose image.jpg
will show you the image colorspace. If it's CMYK, you can convert to RGB with:
convert broken.jpg -colorspace RGB fixed.jpg
If you need to do CMYK to RGB conversion on a whole batch of JPEG-images, this command may be helpful to you:
for i in *.jpg; do convert "$i" -colorspace RGB "$i"; done
PS: If you'd like to see what is going on, just add -verbose:
for i in *.jpg; do convert "$i" -colorspace RGB -verbose "$i"; done
I had a similar issue with IE8 not displaying two JPEG images. FF, Safari, Chrome all displayed them without complaint but IE acted as if the files were not there. I have no idea what was going on, but a quick image conversion to gif or png fixed the problem. Just another in a long line of confirmations that IE sucks.
Had similar problems with existing images, which will not show up in IE8.
Problem is, as converter42 says: CMYK-Images
Convert them to RGB colorspace and all is good
The Solution with the PNG is not the best, because PNG files can be MUUUCH larger than JPGS.
If you are using photoshop for creating the jpgs. Try the below.
Open the file and go to 'Image' menu
Go to Mode
Select RGB
Save and upload to server.
This should work.
Why are you dealing with the image at 180 dpi and not the 72dpi screen resolution? At screen resolution the image will be roughly double that size. Still, the size is manageable for any browser.
When creating a gadget, you should be using PNGs for all the elements of the gadgets. Are you having issues displaying JPEG photos?
Have you looked for the yellow bar at the top of IE that blocks certain suspicious content from being loaded (popups, activex, javascript, etc.)? If it appears, try telling it to "allow".
Lastly, what are you using to compress your images to JPEG?
EDIT: If you want to do batch conversion use the batch converter in photoshop or use the Actions panel to record the conversion process for a single image, then replay the action on an entire folder. Additionally, you can save this action to a "droplet" which is a small application containing the action that you can drop an image or folder on top to.
Alternatively, if you don't fell like learning Actions, XNView is an excellent image viewer and converter that supports something like 160 different image formats and can batch convert and batch rename huge lists of files.
I fixed this issue by opening the CMYK JPEG file in Windows Paint and then saving as a JPEG, which Paint encodes as RGB by default. Not a great solution because I'm sure that Paint's converter is not as robust as Photoshop's, but this can be a quick fix if the job needs to be done now and there's no access to the tools above.