Browser Pic Contrained Better than resizing in Photoshop???!!

[Socratease]

Here's a new one on me:

Had a 2400px x 2200px PDF and/or jpg of a coupon used for print that had, among other things, a UPC bar code on it. I was to resize it and insert it into an html file to be used for an email blast (and to be viewed on the web). Kick-started my trusty Photoshop, opened the PDF and resized it. PS mangled the bar code by insisting on putting in gray pixels in the bar code, like shadows of the actual black bars that made the UPC code. Tried turning all anti aliasing off, tried resizing it in Illustrator (which worked fine, but second you saved it out for the web--the gray pixels returned.). So had a look on the web and I guess its common knowledge that bar codes can't be re-sized in PS, or really by any means. Okay.

So I had a look at what another designer had done with a very similar coupon used in an email on on the web a few months before, 'cause his was crystal clear on the web and I knew he would have had to have re-sized the original huge PDF, just like me. Turns out he used the huge PDF and constrained the dimensions in the html!!! I tried it and --presto--- perfectly clear image and perfectly clear UPC bar code!!

In my experience constraining a huge image in the html NEVER works out, and since when can a browser constrain an image better than Photoshop??

Does anyone have a cogent answer to this, 'cause its driving insane in the membrane.

Thanks

[JohnnyMarz]

I've never tried to constrain photos in HTML, for the simple fact IDK how to use HTML lol. But I've never actually had my photoshop ADD pixels that weren't there before resizing lol. So I'm confused as well.

[Socratease]

Well, we know Photoshop adds pixels when you enlarge, and since it can't always put those pixels in the right spot, you inevitably get distortion or "pixelation" in the image.

If you open photoshop and simply use the pencil too to put four or five black lines up and down, fairly close together-say 2 or three pixels apart (as in a bar code) and then you transform them way down and then zoom back in on them, you'll see the added grey pixels I'm talking about--the lines you drew don't even look like lines anymore.

My question is that if didn't use photoshop to transform your lines, but took the bigger image before it was transformed and put it into an html page and then constrained the picture down to the smaller size, the bar code (black lines) are pristine. How can the lowly browser render this better than mighty PS??

[LeftBrain Artist]

I can resize barcodes in PS. Open it up at original size, 600dpi or so grayscale, convert it to bitmap - 50% threshold, resize as needed and save for web as a 2 color gif. Don't go too small or the bar width ratios will be off. But yer only workin with 2 colors, black and white, so anti aliasing shouldn't be an issue.

[vanishdesign]

HTML image resizing varies widely from browser to browser and I don't recommend it at all. What may look crystal clear in FF could look like mud in IE.

My best advice is out of left field: try one of the resample options in the Image Size dialogue in PS.

[Socratease]

Thanks for the advise LeftBrain, the bitmap did work better, but unfortunately, I have to scale the image so much that PS runs the black bars together instead of adding in grey pixels, as you said it would.

And I agree with vanish that in every other experience, resizing in html/browser is a bad idea. That's why I'm so flabbergasted that its seems to work fine in both FF and IE. I am going to test in Opera and in older IE versions, but I bet its okay. But how? But why?

[scratchmarc]

not all interpolative algorithms are created equal? just throwing that out there...