0

I have an image which has been added to a web page by using:

<img src="file:/C:/Documents and settings/administrator/desktop/A.bmp">

However when I zoom in using firefox, the image becomes blurry - and this is bad since the image has fine details that need to be clear. In microsoft Paint, zooming in keeps the image sharp and clear so is there some way to do this maybe wth CSS or some non browser dependant method?. I have heard about image aliasing but Don't understand it.

  • Is your image pixel art by any chance? – Vinayak Feb 14 '16 at 22:23
  • no its an orgonizational chart, mainly black lines on a white background. – user540977 Feb 14 '16 at 22:39
  • Can you post the image? – Paul Feb 14 '16 at 23:28
0

I managed to find one solution however what if somebody is using a strange browser I used a number of browser dependant CSS strings as follows:

<head>
<style>
img { 
image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast; /* CSS3 Proposed */
    -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
</head>

I don't know if there is a better way that works for all browsers.

0

I see that you've obtained your solution from an answer posted to this Superuser question. That question asks for a solution to image smoothing that happens when you zoom into an image (raster image), stretching it beyond it's actual dimensions.

This is bound to happen in any web browser and the reason it seems to not happen in Microsoft Paint is because Paint allows you to work with individual pixels and I believe it uses nearest neighbor interpolation algorithm to scale raster images while you're working with them.

The actual solution to your problem is to transform your raster image to a vector graphics format like SVG and include that in your HTML file.

You can do this manually using tracing software like Inkscape or Adobe Illustrator. You can also try automatic conversion with software like Corel PowerTRACE or Vector Magic. You could see the results from Vector Magic by uploading your image to their online tracing tool.

  • ill give it a try – user540977 Feb 15 '16 at 15:38

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.