Member Avatar for solahere

I am having some image resize problem with IE6

when I use the following code, the image looks blurry and the embedded text in the picture cannot be read properly...(it works great in Firefox) <p align = "center">&nbsp;<img border="0" name = "imgName"; src="updatedFlow.png" width="700" height="740"></p> However, if I remove the width and the height attribute, the image is no longer blurry in IE..

But I really want to make the picture take less space and so want to resize without blur...The problem do not exist in other browser (checked in firefox 3.5 and safari 4)

Any help is greatly appreciated!
thanks

  • 4 Contributors
  • 4 Replies
  • 200 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

— IE6 is simply using a very crude resampling algorithm when the browser scales a large image down on the page, so embedded text gets muddy. Several replies here point toward offline resizing; that is the right end-goal for bulk-generated artwork. Given your Java generator, the best practical pattern is: have the generator emit a high-quality, gallery-sized derivative plus keep the original full-size file and serve the small file in the page while linking the thumbnail to the full-size image. That gives crisp on-page text and preserves the large view for users.

If you need a quick client-side improvement for IE6/7, add the proprietary interpolation hint so IE uses bicubic resampling. Also let the browser keep the aspect ratio by using height:auto rather than hard-coding both width and height:

img.gallery-thumb {
  width:700px;
  height:auto;
  -ms-interpolation-mode: bicubic; /* IE6/7 */
}

For your Java generator, scale with Java2D using RenderingHints so the derivative is produced with good interpolation (do this once at creation, not in the browser). Example helper:

public static BufferedImage resize(BufferedImage src, int w, int h) {
  BufferedImage dst = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
  Graphics2D g = dst.createGraphics();
  g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
  g.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
  g.drawImage(src, 0, 0, w, h, null);
  g.dispose();
  return dst;
}

Practical checklist: (1) generate a display-size PNG (or JPG for photos) using high-quality resampling, (2) keep the original and link the thumbnail to it, (3) serve the smaller file in the gallery for speed and clarity, and (4) add the IE CSS tweak as a fallback. This avoids client-side blur while preserving your users’ ability to view large images.

Recommended Answers

All 4 Replies

Member Avatar for Xlphos

I don't know how to solve your problem but until you have a solution why not download GIMP and resize the image to the size you want. This should avoid the blur for now.

Member Avatar for solahere

I don't know how to solve your problem but until you have a solution why not download GIMP and resize the image to the size you want. This should avoid the blur for now.

I am not sure if I would like to do that.. I have a java program that creates 1000s of such images and updates the image folder and does that periodically... I can however make my Java program output the image in the right size but then the user wont have liberty to view the image in the large size if they cannot perceive the written characters!

my webpage just has image and navigation to images so it is very important those images ar

Member Avatar for MidiMagic

IE6 might not have the resize capabilities that later browsers have.

Specify only the width, and the height should automatically resize. If you specify both, and the height ratio is not the same as the width ratio, the aspect ratio will change, and you may get more blurring.

Member Avatar for stevenpetersen

I would bypass trying to resize in the site. Resize the image in an image editor. then repost. This should take care of the blurring.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.