Google chrome doesn't seem to bother to display an <img> with cross origin src attribute.
Firefox does. So for Firefox one would need to use an iframe which works fine for .png images. But it turns out that Firefox doesn't handle well iframes with an .ico src attribute: Firefox simply doesn't seem to create the appropriate elements in the iframe.
So the question is: is it possible to display a cross origin .ico image in Firefox?
Thanks!
<img>'s src doesn't have a cross origin policy by default. That's why you can link your images from almost everywhere (almost, because you can set your host not to allow hotlinking -maybe that's what appears here-).
Anyway, please, try to avoid the use of .ico in a <img> tag because it won't be shown in every browser as #Pekka said. Some will anyway because many software save .ico file as .png (kinda like a camouflage) but it still a trick...
The iframe trick won't work either.
In summary, use .ico only if you need to but avoid it if you want a nice compatibility with every browser.
google chrome doesn't seem to bother to display an with cross origin src attriubte.
that is definitely incorrect. Your problem probably doesn't have to do with the image's origin, but with the format. ICO is mainly a Windows format and will not be reliably displayed across browsers.
The Wikipedia browser comparison on image formats doesn't list ICO at all.
Related
I have created a basic html and css page with images in it.
the page is working fine in chrome but image are not rendering in firefox
and have taken image with svg format can u help me to find out the solution.
Use SVG image can create restrictions on some browsers like Firefox, here are some examples :
Javascript disabled
External ressources cannot be loaded
visited link aren't rendered
The onliest way to dodge these issues is to embed the SVG images with <iframe>, <object> or <embed>.
I think you should try to embed your image to see if they show again, else check if you're following the supported context to use SVG
You'll find further information on this link.
I have faced next strange behavior in Firefox when use ico file as src in img tag.
When It opens in Firefox (latest version), it has 16x16 format despite of the fact that ico original format is 128x128.
In other browser (Chrome, IE) everything works great.
Just open elephant-128x128.ico in Chrome and Firefox and you will see the difference.
<img height='128' src="http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico">
https://jsfiddle.net/qwx2sxzg/1/
or
http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico
Does anybody has idea how to fix this?
Your best bet is to convert ico files to another format, since it is not compatible with all browsers.
Image Format Support For Web Browsers
There is no other workaround for it.
I am having a strange issue with displaying JPG image on browser. The image color is mostly washed out while being viewed on any browser (Chrome, IE and FF). But it's fine when using desktop applications (Windows Photo Viewer, Paint, etc.) to view.
You can see the example here: https://dl.dropboxusercontent.com/u/2095747/asp.jpg
Does anyone know any particular reason for it?
Regards,
Harry
The image uses a type of embedded color correction that browsers do not support.
Since you seem to have used Photoshop to generate that image, you should reopen your source file and re-export the image using the "Save for web" action, which will either not embed a color profile at all, or use a browser compatible format.
Will the browser still download the image?
<img src="/myimage.jpg" style="display:none;" />
Yes, at least according to the Net console in Firebug.
As stated by thethimble, CSS is the presentation layer and affects rendering, not the actual processing of the page.
It wouldn't be outside the realm of possibility for some browsers, especially mobile, to potentially not download this in an attempt to optimize performance.
Yes. The rendering of the image has nothing to do with the downloading of the image.
Edit:
Try using Chrome or Firefox to perform a timing-test of a page's resources. Notice that all images get downloaded. Even ones whose display style is set to none.
Yes.
However, as a sidenote, some browsers won't download images with width and height attributes of 0. Can't find the source now, and just tested Firefox and Safari and they do download it. Must be IE, can anyone test for me? Thanks.
When in doubt, sniff the line, or use a browser specific tool (Firebug for Firefox, Web Inspector for Webkit, etc)
Quirks Mode: images and display: none
When image has display: none or is inside an element with
display:none, the browser may opt not to download the image until the display
is set to another value.
Only Opera downloads the image when you switch the display to block.
All other browsers download it immediately.
I am able to use favicons if I copy one from another site and test. But my own doesn't work in IE8/Chrome. Mine is a 32x32 24bit icon created by Visual Studio. I always seem to have problems getting icons working right, what should I use? I thought I could have images up to 64x64...
See this site for instructions for creating a favicon.ico - it needs to be 16*16, not 32*32 (though you can have a composite .ico with both sizes).
I have created composite .ico files with several sizes, so they appear correctly on the browser and the desktop.
First, just to be safe, convert your original icon to an .ico using this converter.
Then, for cross-browser compatibility (specifically Internet Explorer), use:
<link rel="shortcut icon" href="http://www.yoursite.com/youricon.ico" />
Most browsers are smart enough to use any PNG/ICO named favicon.ico located in the root of your site, but this is not always reliable.
The wikipedia page on favicon contains a lot of information.
The support for favicons differ a bit from browser to browser, and there is no guarantee that the favicon will work on any given system. Sometimes the browser just ignores it for no apparent reason.
To get the widest browser support, you should use the .ico format. There is a compatibility chart on the wikipedia page that tells you how widely supported each format is.
You need to use 16x16 .ico file. 32x32 .ico files and .png, .jpg files don't always work in browser title bars. Nowadays you might find some browsers support this but not every browser does this so try to stick to 16x16 .ico files.
I was facing the same issue, you just have to add some extra character,
example: if you have written C:\Users\Desktop\image\icon.ico for fetching the image then you just have to add ?v=2 like this
"C:\Users\Desktop\image\icon.ico?v=2".
or you can just change the format to .jpg, .png etc.