16

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?

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • If you can email me (ericlaw @ microsoft dotcom) one of the JPEGs that doesn't render, I'd love to take a look. – EricLaw Jul 30 '09 at 16:49

7 Answers7

56

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
converter42
  • 7,400
  • 2
  • 29
  • 24
  • 3
    I had this problem, changing the color space start showing the images in IE – adn Feb 20 '11 at 04:00
  • I also had this issue. It had me scrambling for an answer for three days before I found this. Note that is it an easy problem to fix with any kind of decent graphics editor as well as ImageMagick, such as Photoshop or GIMP. – Abinadi Oct 21 '13 at 13:41
3

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
diggie
  • 455
  • 4
  • 5
1

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.

1

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.

yunzen
  • 32,854
  • 11
  • 73
  • 106
1

If you are using photoshop for creating the jpgs. Try the below.

  1. Open the file and go to 'Image' menu
  2. Go to Mode
  3. Select RGB
  4. Save and upload to server.

This should work.

Vimal Maheedharan
  • 11
  • 2
0

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.

Soviut
  • 88,194
  • 49
  • 192
  • 260
  • I have no idea why it ended up with 180 dpi. I allowed IE to view the "suspicious" content but that didn't help. I compressed the JPEG with Photoshop CS3. I have roughly 350 images, know of any quick way to batch convert them to PNG. –  Jul 30 '09 at 03:30
  • Converting them to PNGs work. I'll look around for a good batch converter. Thanks –  Jul 30 '09 at 03:35
  • Fireworks and photoshop can both do batch conversion on PNG's images. You can even create a JSFL script which can make Adobe Flash convert pings. I would go with Fireworks or Photoshop for best results. – John Ballinger Jul 30 '09 at 03:39
  • I suggested either Photoshop or XNView. XNView will probably be easiest. – Soviut Jul 30 '09 at 03:42
  • ImageMagick will happily do this for you. `convert *.jpg *.png` http://www.imagemagick.org/script/binary-releases.php?ImageMagick=aj6vnukacq351gucnpugnkdd55#windows – Chinmay Kanchi Jan 03 '10 at 18:03
  • 1
    dpi is irrelevant when working with images on screen. It is only relevant when you go to print ... meaning how many screen dots(pixels) will be printed per inch. So if the image is at 72dpi or 180dpi it will display at exactly the same size on screen. – Davin Studer Mar 20 '13 at 22:50
  • @DavinStuder not exactly true since high DPI displays exist on plenty of mobile devices and on all the new retina macbooks. Still, unless you're planning to use the usual CSS tricks of shrinking an image by 50%, creating artwork in Photoshop at higher DPI will simply result in larger images on screen. – Soviut Mar 21 '13 at 06:58
  • 1
    A 800px by 600px 72dpi image and a 800px by 600px 180dpi will be exactly the same size on screen ... on every device. They will not be the same size in print. DPI is for print ... not screen. Sure, if you create a new document that is 2 inches by 3 inches 72 dpi and one that is 2 inches by 3 inches 180 dpi these will not be the same on screen because they have a differing amount of pixels in the image and you are defining the document based on how it will be printed. However, if the pixels match then they will be the same on screen ... dpi is irrelevant when it comes to display. – Davin Studer Mar 28 '13 at 18:28
  • Have you ever created artwork for a retina display? You need to create it at twice the size then use CSS to shrink it to 50% to make it look crisp. No web image formats support DPI so while an image set at 180dpi in Photoshop may appear the size size on screen at 72 dpi, the 180dpi image is going to be twice as large if you export it for web. – Soviut Mar 28 '13 at 23:18
0

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.

Nathan Murray
  • 179
  • 2
  • 8