Firefox Hacks [Electronic resources] نسخه متنی

Hack 35. Govern Image and Ad Display

A picture is worth a thousand words;
here's how to make the most out of web page
pictures.

Images are a big fraction of web content. They consume most of your
Internet bandwidth and most of the energy your brain devotes to
comprehension. There are many tricks you can apply to poke and tweak
images to suit your taste. This hack describes a
few.

4.4.1. Block Images and Advertising Content

Firefox provides simple image-blocking options under
ToolsOptionsWeb Features. You can also turn to
extensions or your own custom styles. Attempting to block advertising
is a technology war. Web browsers can now block pop-ups,
straightforward advertising banners, and Flash ads, so if you
don't want such things, you're
currently enjoying a well-earned respite. In the near future, though,
commercial web sites will discover ways around these blocking
techniques.

4.4.1.1 Using standard features

If you uncheck ToolsOptionsWeb
FeaturesLoad Images, no images at all will be downloaded
for display and web pages will load faster. Locally cached copies of
images will not be used. Images drawn in via CSS stylesheets will not
be used. If the page displayed comes from local disk, then local
images will be displayed. In all cases, blocks of color on the web
page added with CSS color styles might still appear.

If Load Images is enabled but "for the originating
web site only" is also checked, web pages that try
to load images from other web sites for display in their own pages
will not be able to do so. This option can be used to check a web
site for image copyright
violations.

Here's the preference for these two checkboxes:

network.image.imageBehavior /* 0 = default, 1 = origin only, 2 = none */

The Exceptions button next to these options implements a combined
blacklist and whitelist for web sites, which overrides the other two
options. If you enter http://www.example.com, then all pages on
that web site will be either allowed or denied, according to the
button pressed. You can add an image's web site to
the blacklist by context-clicking on it and choosing
"Block image from [url]."

If images aren't displayed, this preference controls
whether a placeholder icon is shown where the image would otherwise
have been:

browser.display.show_image_placeholders  /* true = default */

The ultimate image roadblock is the user's
userContent.css stylesheet. This file placed in the
profile area can override, via the CSS !important
directive, any layout of any web page. For example, this fancy new
CSS3 selector can be used to block all ads from the imaginary

4.4.1.2 Using the Adblock extension

The
Adblock extension (http://update.mozilla.org) is a
well-maintained filtering system for advertising banners and spots
that are embedded in web pages. It has a Hide option that downloads
but doesn't display ad content, and a Remove option
that prevents that content from being downloaded in the first place.
It can also block Flash ads.

After installation, Adblock must be trained before it will do
anything. You must context-click on a web page image and choose
Adblock Image to prevent that image from being displayed again.

A more systematic approach is to build a set of filters that apply to
all web sites loaded. These can be added from the
ToolsAdblockPreferences dialog box. Filters can
be added by hand or imported as a group from a file by clicking on
the Adblock Options text in the dialog box. You can find a
recommended set of filters at http://www.geocities.com/pierceive/adblock/.
Choose the most recent file and follow the instructions in the
-instructions.txt file. To delete that file on
Unix/Linux after use, type the following command:

rm ./-instructions.txt

Each filter in such a file is a string pattern that is matched
against the URL of every image reference on every loaded page. Those
image URLs that match are never loaded/displayed, so the set of
filter lines in a filter file form a blacklist. A URL need only fail
one filter to be rejected entirely.

The two kinds of filter content are plain-text substring matches,
which can be typed directly and can contain *
wildcards:

*.adsource.com

and JavaScript regular expression literals, which must be surrounded
by forward slashes:

/advert[a-z]{,4}.com/

Forward and backward slashes don't need to be
escaped in these regular expressions because they're
fed to the AdBlock processor as a string. You can find popular
resources for image-quashing rules at http://www.floppymoose.com and http://krath.dk/writing/flash_blocking/.

4.4.2. Manage the Way Images Are Displayed

Firefox supports all the image-resizing features implied by HTML
4.01. If an image is displayed alone in a window, rather than as part
of a web page, then simple resizing is available. To see this in
action, go to a web site that shows big images, such as http://antwrp.gsfc.nasa.gov/apod/astropixl,
and context-click to view an image in its own window. Shrink the
window to see the image resize, and then click on the image to make
it toggle between full size and "fit to
window" size. This feature is enabled by the
preference:

browser.enable_automatic_image_resizing /* default = true */

Extensions that modify
or enhance image display behavior are
common; browse the Page Display category at http://update.mozilla.org for the latest
list. There is not yet an extension as popular or as useful as the
freeware Windows image viewer IrfanView, although there is an
image-viewer extension called mozImage. Here are a few of the more
useful extension offerings:

AniDisable

Stops animated GIFs from running via a context menu option.

Image Zoom

Provides context-menu support for image zooming using step-wise
magnification. Expands on the features of the default click-to-resize
functionality.

Nuke Anything

Allows you to temporarily remove images from pages. Similar to DOM
Inspector and Web Developer Toolbar functionality, but lighter and
simpler.

Show Image

Makes failed image downloads retry without reloading the whole page.
If you're on a slow dial-up connection, this
context-menu enhancement can be helpful.

ImageShowHide

Makes an easy-to-reach toolbar copy of the Load Images configuration
option. This tool allows toggling of page images like that available
for the Web Developer Toolbar.

Image Toolbar

Makes a floating image toolbar appear over images, providing file and
print features. This tool works just like the irritating image
toolbar provided by Internet Explorer.

Magpie

Functions mostly as a spidering tool [Hack #42] .
Magpie includes Digit Flipper
functionality that resembles the Site Navigation Bar of the Mozilla
Application Suite. It allows pages in a photo-album-like (or
otherwise numbered) web site to be stepped through using special Next
and Previous keys. It's also useful for HTML-based
slideware presentations.