fuzzy images on web page when zoomed in

Question

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.

score 0 · Answer 1 · answered Feb 14 '16 at 23:48

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.

score 0 · Answer 2 · edited May 23 '17 at 11:33

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.

fuzzy images on web page when zoomed in

2 Answers2