I have web page (php page) and it is showing the image very well for any browser in my desktop, ipad (9.7 inch or bigger) but never show in iphone, android phone, and ipad mini. The mobile browser only shows black image.
I wonder that the image is too large (jpg), but same jpg file is showing well in desktop browser but is showing black in mobile browser.
I research google. Someone says this image may use CMYK format. How can I know this image is CMYK format? is it the issue?
Does anyone know how to fix the issue?
Give you an image sample
link: http://www.cbeiji.com/upload1812/20200308120858161866827.jpg
html:
<img alt="" src="http://www.cbeiji.com/upload1812/20200308120858161866827.jpg">
Desktop browser shows well.
Mobile browser doesn't show up. It is a black rectangle.
That's not a JPEG, it's a PNG.
Now, the browser doesn't really know or care what the filename is, but your server is using the .jpg extension to determine what Content-Type header to send back. Your server is sending:
Content-Type: image/jpeg
Obviously, since it's not a JPEG, some clients are going to have a problem with this. For the ones that are working... the browser is being nice to you.
By the way, you can verify this stuff yourself using one of the many metadata viewers online. For example: https://exifmeta.com/
Use an image editor and save the file as a regular jpg (or just right-click save as)
Make sure there is no transparency added
first check it with one image, see if that helps.
Related
I have a website where I also run a blog at http://climatecanchange.com/blog/ and the blogs are stored in a mysql database and each is matched to a unique image in one folder. I use php to get the image filename and other data to display all the blogs on my page.
For blog #2, my image is not showing on any iOS device (Chrome and Safari) though it can be seen on computers and Google Pixel too.
The link is http://climatecanchange.com/blog/blogs.php?id=2. When I open the image in a new tab it just shows white space. But, when I try to save it (on Chrome), it saves the actual image to my camera roll.
Can someone please help me with this? Why is there a problem with displaying that specific image?
The image format is Web/P which appears not to be supported in Safari right now
https://caniuse.com/#feat=webp
I am trying to display a 42000x280 2.46mb image that will not display in Firefox, but it works in Chrome + IE. The image can be found at http://tpupower.net/tron2.gif
The image is made from an animated gif and I saved it with PHP's imagegif(). Could this be a color profile error? How would I check that?
The image won't open in Photoshop either, I don't know if its because of the dimensions or what. The error it gives is below.
"Could not complete your request because of a problem with the file-format interface."
It is a fact that firefox and photoshop can't open it,you should use GIMP(GNU manipulation program) and scale image..GIMP is free and open source image manipulator.you can scale or decrease quality of image.I am sure it will open in GIMP.
you can download and get more info. from link:
http://www.gimp.com/
hope this will be helpful.
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
I have the damndest problem. A fairly simple webpage with an embedded png won't load on one particular device I've tested with. It's a Blackberry Curve 8520 running 4.6.1. The browser settings are all using the standard Blackbery Browser, e.g. not pointing to Firefox or IE identity.
I've tested it with a really simple cut down html page:
<html>
<head>
</head>
<body>
<img src="bblogo.png"/>
</body>
</html>
I know the above is technically html5, but that's not the problem it's just short hand included as an example.
The webpage is displayed with a red x for missing image. Yet the image will view fine if accessed directly, e.g. placing cursor over missing image and selecting Full Image from the blackberry menu.
This is the only device it happens on, other blackberries, iphones and 'droids have been fine. If I replace the image with a jpg it's fine. Other png formats are also broken (128 color 8bit png, 24bit no transparency, 24bit with transparency).
So what's going on here and is there a solution? Is it configuration on the local device or something the BES could be doing to the image when it's embedded in a page but not when it's served directly?
I'm trying to avoid jpgs due to color dithering issues on older mobile phones.
Any advice gratefully received, I'm a complete blackberry newbie so know very very little about the devices or their configuration. However from what I've read png support should be pretty solid.
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -