Bilinear Filtering is over, sorta ;P


As of the official implementation of Gecko version 1.9.2, there will be a tag implemented that chooses the resizing algorithm used on a page, allowing you to choose between Nearest Neighbor (direct resize, no blur), Bilinear Filtering (low quality blur, which is currently used), or Bicubic Blur (high quality blur, what photoshop uses). Meaning that we'll no longer have blurry pixel art when we resize.

This is the official documentation. It'll be stuck in along with HTML 5, meaning that you can probably try out the new tags in the current Firefox 3.5 beta.

The tags to be added into the CSS styles are as follows:

img[src$=".gif"] { image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; }
img[src$=".png"] { image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; }

For an invidual image you'd use this code (can be factored into the  BBcodes in the forum, and the display for individual images on the site):

<img style="-ms-interpolation-mode:nearest-neighbor" alt="images/WhateverAlt.jpg" src="images/Whatever.jpg"/>

The code will be fully implemented in Firefox 3.5, but as mentioned above, you can try it out now in the beta version.

Posted by Evilagram @ 6/13/2009 20:40  |    13


If you would like to comment you will need to be logged in. Register now. It only takes a moment and it's free.

skeddles (Level 11 Psychopath) @ 6/18/2009 10:26

Sounds good,but i'll just wait until it's in an official version.

Lol fox.

jalonso (Level 11 Godfather) @ 6/16/2009 11:06


Okay. So that last news post from Evilagram (thank you) showed the new updates.

Sadly it is not testable in the beta version.
But it is in the Alpha version 3.6, and I can explain you how to use it.

Completely at own risk, as 3.6 is not proofed to be stable yet.


Step 1

Download Minefield. This is the project name for alpha releases of Firefox. On that page you can download it, for windows that would be firefox-3.6a1pre.en-US.win32.installer.exe

Step 2
Install minefield. It will not overwrite your existing version of firefox, but wil copy your bookmarks , add-ons, passwords etc.

If you go to right now in your new Minefield browser you can already see the images crispy when you zoom in. This because it seems PJ already added the right tags to its css. Thanks!

Step 3
To get the pixel zooming on every website you visit (such as we need to take another step.

We must create a file named userContent.css
This CSS file will apply the code in it to every page you visit.

In windows, this page must be created in %appdata%\Mozilla\Firefox\Profiles\profilename\chrome

You can find it by browsing to C: > Documents and settings > 'Username' (mine is Daniel) > Application Data.
Application Data is a hidden folder, you can unhide it by going to (in your explorer) Tools > Folder Options > View > Show hidden files and folders

Non windows users must figure it out themselves, but the file will always be located in Profilename\Chrome

Now open notepad or a similar text editor, and paste in this code:

img[src$=".gif"] { image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; }
img[src$=".png"] { image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; }

Save it as userContent.css (and watch out it does not become a .txt but a .css) in the chrome folder

Thats it. You are done! If you browse to pixelation now, and you click images to zoom in, they will be shown crispy as well (after you restart your browser)

If you have any questions, comment!

Evilagram (Level 3 Hatchet Man) @ 6/15/2009 16:51

Well darn.

My main computer is out, so I couldn't test anything. Didn't hear anything about version 3.6.

At least the fix is coming.

Akira (Level 5 Sniper) @ 6/14/2009 22:37

Fully implemented in 3.6. You cannot try it out now in the beta version.

Levi (Level 1 Thug) @ 6/14/2009 20:25

I'll wait for the implemented version too,  though I refuse to use anything but Firefox as it rules.  For everything except zooming pixel art.  :D

surt (Level 11 Godfather) @ 6/14/2009 18:24

Actually it looks like it won't be implemented until 3.6. The linked dev page says as much and the current 3.5 beta doesn't support it.

Stickman (Level 7 Sheriff) @ 6/14/2009 18:17

That sounds kinda complicated:0 Think i'll wait for the implemented version.

crab2selout.png (Level 4 Deputy) @ 6/14/2009 18:03

You really ought to change the title. A tad misleading since we still have to wait an indeterminate amount of time before we actually get nearest neightbour filtering.

Also, I take it that this provides an individual user the ability to apply nearest neighbour filtering to all images by editing the usercontent.css file? 

Scribblette (Level 1 Intern) @ 6/14/2009 17:40


Setzer (Level 8 Cannibal) @ 6/14/2009 15:40

awesome, thanks for this, and thanks for including the code, too!

asukicco (Level 9 Necrophiliac) @ 6/14/2009 12:03

 F*****g yeah!

philipptr (Level 4 Team Leader) @ 6/14/2009 11:26

Hooray :) But I still cant believe it took that long for such a simple fix :/

This Week's Pixel Art

prueba icon/pixelartClassic Dungeon Entrance icon/pixelartMy Lord Bag Of Rice icon/pixelartNinja icon/pixelart
Play party games with QuizBash app
Play party games with QuizBash app

Recent News


Want to give some dough back to all those amazing pixel artists? Donations provide prize money for contests, help cover hosting costs and support new initiatives.