Bilinear Filtering is over, sorta ;P


icon

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.

https://developer.mozilla.org/En/CSS/image-rendering

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 at 6/13/2009 8:40:00 PM | 12 comments | Share

What do you think?

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


user
skeddles (Level 11 Psychopath) at 6/18/2009 10:26:00 AM

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

Lol fox.


user
jalonso (Level 11 Godfather) at 6/16/2009 11:06:00 AM

THIS COMMENT IS BY LOLLIGE , NOT ME.

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
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

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 pixeljoint.com 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 www.pixelation.com) 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
http://www.bleepingcomputer.com/tutorials/tutorial62.html

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!


user
Evilagram (Level 3 Hatchet Man) at 6/15/2009 4:51:00 PM

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.


user
Akira (Level 5 Sniper) at 6/14/2009 10:37:00 PM

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


user
Levi (Level 1 Rookie) at 6/14/2009 8:25:00 PM

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


user
surt (Level 11 Godfather) at 6/14/2009 6:24:00 PM

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.


user
Stickman (Level 6 SWAT) at 6/14/2009 6:17:00 PM

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


user
crab2selout.png (Level 3 Private Eye) at 6/14/2009 6:03:00 PM

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? 


user
Scribblette (Level 1 Intern) at 6/14/2009 5:40:00 PM

YAAAAAAY!


user
Setzer (Level 8 Cannibal) at 6/14/2009 3:40:00 PM

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


user
asukicco (Level 8 Regional Boss) at 6/14/2009 12:03:00 PM

 F*****g yeah!


user
philipptr (Level 4 Team Leader) at 6/14/2009 11:26:00 AM

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


This Week's Pixel Art

Deer 2 AT:ETDBIDK! icon/pixelartMommie portrait icon/pixelartPlanete Atari icon/pixelartDayZ - Fanart icon/pixelart

Recent News

From the News Archives

Donate

Want to give some dough back to all those amazing pixel artists? Donations provide prize money for contests.

Donate!