Team LiB
Previous Section Next Section

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 www.adspam.com ad-placement web site:

img[src*="adspam.com"] { display : none !important; }

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/astropix.html, 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.

    Team LiB
    Previous Section Next Section