Specific images not rendering in IE.

Color mode?

[D_Blackwell]

I have a set of public domain illustrations that have been specially scanned and prepared for good quality presentation. Each is available in .jpg format in several sizes.

I've had to knock down the quality for web use due to the file sizes, and all is well in FF and Opera. However, IE, will not render them. The color mode is Grayscale. I reopened Photoshop and changed the color mode for one to RGB Color, but still no go for IE. What trick of the trade do I need to learn here?

[D_Blackwell]

This may be more of a browser question.

The images render from the source pages on IE with no problem.

I can upload my lowered quality images (retaining Grayscale color mode)and related pages, and they render fine in IE on the live page.

They still do not render on the local machine, but it is only these images - there are many, many pages that test perfectly in IE on this machine, so still lost as to why I can only view these images 'live'.

[limbo]

What resolution are they?

Pretty sure I remember IE doesn't render jpg's over 150ppi.

[Leosghost]

Guys :) it would help ( for all readers ) if we knew which "IE" version(s) we're dealing with ?

Bceause as we all know the day that all IE versions behave the same ..we are all going snowboarding in hell ;)

[D_Blackwell]

Image > Image Size - shows resolution to be 800px inch. Changing to 150px; does not change the issue (also doesn't leave much image). Still won't show in IE on local machine. IE7 and IE8.

As a practical matter, because the live pages are fine and only lowered in quality for file size, I'm okay, but the entire set of illustrations won't show here. No problem with any other images on any other pages on any other sites. I caught it while testing, then thought to look at my live pages as well as the image source live pages on IE and they are all perfect. Can't figure what system setting could be responsible for the local non-rendering, even after reducing resolution to 150px; inch and saving for test purposes.

[Leosghost]

Ok ..I just ran a test on a greyscale image .jpg at 300 px ..no problems on display in IE7 nor IE8 veiwed "local" on vista sp1 64 ( with "2" pack )..scanned in pshop cs4 ext ..they are Ok in colour in rgb too ..in both opera 6.5 and ff 3.01

( co-incedentally I was scanning some of our old brochures for transformation to pdfs ..after manipulation in pshop yesterday ..and had them to hand )

these were scanned in yesterday at 300 originally ( and BTW thanks for making me look ..they are moired at 300 ..need to do them again at 600 or 1200 tomorrow ..and to look more closely at the scanner settings before hitting go )

BTW I realise that may not help directly much ..but it may help you eliminate my combo ..:)

I think of anything pertinent ..I'll get back

[caribguy]

Stab in the dark: could it be an issue of 8/16/32 bits per color? Adobe PS CS3 won't let you save a 16 or 32 bits image as a jpeg (either greyscale or RGB), what program did you use to create/save those images?

Any 'real' jpeg image should have JFIF as bits 6-9 (4A 46 49 46).

[rocknbil]

First, browsers will render at 72 pixels per inch based on the dimensions indicated in the page. That is, for a 1" X 1" image at 144 DPI, it will render as a 2" X 2" image at 72 DPI in a browser (actual measurement in size, of course, depending on the user's monitor resolution - but the browser displays a 1:1 relationship at 72 DPI.) So there is **zero** advantage to publishing an image at a X 1 X 144 DPI, and scaling it in the browser to 1" wide. All it does is slow the page load down, and may even affect the image quality adversely as the browser is now left to interpolate 144 DPI to 72 DPI.

caribguy's post is what came to mind, color depth, not color mode or other factors. I've had this happen. A grayscale image should be fine in jpg/png, and can even be switched to indexed color/ gif/png without much loss, if any. Make sure the color depth is 8 bit for grayscale mode images.

[D_Blackwell]

Image > Mode - shows Grayscale and 8 Bits/Channel. Quirk doesn't seem to be from there.
...........................

what program did you use to create/save those images?

These are public domain images that I have downloaded; scans from a classic book. Scanner dpi: 800, with each image offered as a .jpg in four sizes. No File Info available.
...........................

Any 'real' jpeg image should have JFIF as bits 6-9 (4A 46 49 46).

You've lost me here, I'm afraid. I would need a Step 1, 2, 3... to check this.
...........................

I've put several chapters live with the sized and and optimized illustrations; the file sizes were too large for a webpage IMO. (The entire text is already posted by chapter. The illustrations are an 'upgrade'; two or three for each chapter to help break up the page and liven up the presentation.)

The images do not render on the local machine 'as is', or after optimization in IE. Still perfectly fine on all browsers tested, local and 'live'.

I'm stymied as to what is blocking the display of these images here at this desk. I just can't find anything 'unique'. I have a library of thousands of images form many sources and in every conceivable file type. This website is image heavy; mostly product images that we've shot ourselves, the usual assortment of backgrounds.....And yet it is just this block of images (everyone of about 40), only on IE, and only while testing. Never seen anything like it. I'm testing pages every day. It's supposed to be an automatic thing and not be causing me any grief. LOL

Because they are fine live, and I have had others confirm this independently, there is no emergency or pressure. However, I hate to let a mystery stand. I'm sure to learn something if I can get to the bottom of this - though whether the trade-off of seeing it through becomes iffy at some point.

[jessejump]

Images should be RGB, 8 bit. PPI doesn't matter in a browser- only when you print does PPI matter. In a browser, only pixel dimensions matter.

[caribguy]

Images are composed of a descriptive header, followed by the actual data. If you were to open the file in a hex editor, you would see what the file type is. i.e. image.tif may have been mislabeled as image.jpg

[thecoalman]

In a browser, only pixel dimensions matter.

Correct, DPI sets the scale for a physical surface like paper. The browser ignores this and displays according to pixel size so the DPI of an image displayed in a browser would depend on the monitor size and the resolution the user has the monitor set at.

You can have a image that is 150px * 150px that is 72 DPI and change just the resolution to 1000 DPI and each image will be an exact duplicate pixel for pixel and the viewing size will be the same when displayed in a browser.

A simple example to see how this works for print is just import both images into something like a Word Document. Word which by default displays according to DPI instead of pixel size. You're 1000DPI image will be significantly smaller because word scales it to the paper size according to the DPI.

[jessejump]

I don't know why it won't work on your computer. I just converted some images to Grayscale and they displayed in local browser. Maybe try again with new images, not the scans.

[D_Blackwell]

I've had to leave this off a few days; sorry. Partly to finish other things. Part to finish this project. No issue appears to exist anywhere except for right here, and only with this set of images. I have found no problems with IE with the completed live pages.
......................

Images are composed of a descriptive header, followed by the actual data. If you were to open the file in a hex editor, you would see what the file type is. i.e. image.tif may have been mislabeled as image.jpg

You could lose me quick. (Safer to treat me like a child on this.) Searched hex editors and found tons of choices; including a list of about 100 and noting the varying features of each. Yikes. Didn't want to download something without downloading something recommended as a good choice. Might be handy to have, but certainly want recommendations from people that know what's what.
....................

Maybe try again with new images, not the scans.

Not an option. Scans are forty-two illustrations from 1896 edition. The best that I can do is download the largest of four size offerings and then resize and cut down file size in Photoshop. This I have done. Everything looks great - except on the local machine in IE only. Go live - there they are - and looking good. ? ?
....................

I did find a reference that TextPad can be used as a hex editor; though don't know this to be true, or if is a good choice even if so. I do have an old free version and opened an image but have no clue what I'm looking at - or if it is useful or fully functional in an old free version. ?

Seems to be three sections of data - none of which I was able to select and copy.? Also does not appear at all editable.?

First section on left goes: 0, 10, 20, 30, ..... 1A0, 1B0.....

Middle section is 16 blocks of two character numbers and letters per line. Seems a slight gap that makes them perhaps two blocks eight-wide each.?

Line 1:
FF D8 FF E0 00 10 4A 46 49 46 00 01 0101 03 20

Line 2:
03 20 00 00 FF FE 00 7F 66 72 6F 6D 20 41 4C 49

and so forth.

The third section consists of:

JFIF; some plain text that notes the original source of the image, publisher, publication date...; then quickly becomes a complete gobbledygook of characters.
....................

So, though I do not appear to have any online 'live' issues, I remain curious as to why the images are not viewable only in IE and only here? I hate to just give up on a mystery, might learn something, and might add a decent hex editor to my software collection.

[caribguy]

I think you found it :) Most likely, the first 2 sets are additional headers (i.e. EXIF data, or proprietary stuff). There are some programs that can strip extraneous information from .jpeg files.

Have used something in the past to strip junk data from images created by a certain brand of scanner that was notorious for writing non-standard files. Forget what it was called... A search for "strip jpeg headers" will probably get you in the right direction...

Edit: re hex editor, Ultraedit might be an option. I have an ancient version that does just enough to be useful. Newer versions seemed too bloated for my needs.