imagebrowserpixelate

How to prevent fuzzy image pixelation?

I am displaying an 10x10px image resized to 250x250px. I am desiring pixelation in this case, but what seems to be happening is that the pixelation is getting blurred by the browser in an attempt to improve the visual quality of the pixelated image. Is there any way to disable this from happening for certain images?

Expected vs. Actual Pixelation Results

This appears to be a "feature" of the browser, as different apps, like Preview (Mac) will display a crisp pixelation, and Finder (Mac) will display a fuzzy pixelation.

I would like to find a way in PHP or HTML5 to force the crisp pixelation.

Thanks for any help! :)

Solution

  • when you what to resize your img you should look for "bicubic" and use css.

    <html>
   <head></head>
    <body>
        <img src="Untitled.bmp" style="width:500px; height:500px;
                                        image-rendering: -moz-crisp-edges;
                                        -ms-interpolation-mode: bicubic;"></img>
    </body>
</html>

    May this link helps you to understand different techniques: Image Interpolation

    I hope that helps you out.

    BR