Understanding and making the most of GIFs and JPEGs

This tutorial was developed with Photoshop 5 and Fireworks 1. Photoshop's
web handling has changed but the info here remains useful.

When Tim Berners-Lee invented HTML (hypertext mark-up language) and through
it the WWW his emphasis was very much on text. What he was looking for
was a way of delivering structured scientific information quickly and
efficiently with its style of presentation of secondary importance. Ironically
what made the Web take off was the development of the Mosaic browser with
its support for inline bitmapped graphics. The advent of the humble <IMG>
tag turned browsing into a visual experience and the Web has never looked
back.

With the explosive development of the Web, the creation of web graphics
has itself become a huge growth area and one that could even outstrip
graphics for print. Incredibly, in spite of this, there has always been
a tendency to dismiss the field as just a sideline of traditional bitmap
creation. That attitude is finally changing and in this masterclass I'll
show you both how to make the most of web graphics using traditional bitmap
editors, and also how to take absolute control with a dedicated web graphics
application.

The Importance of File Size

The one defining principle that separates web graphics from all other
graphics is the importance of file size. Web images have to be downloaded
before they are viewed and so keeping the byte count as small as possible
is paramount. The golden rule is that the image must add more to the viewer's
experience than the download time detracts from it. Of course this download
time is something of a moving target as it depends on the bandwidth available.
A user with a T1 connection could happily download a 100k image in half
a second, for example, while with a 14.4k connection the same image would
take a full minute.

Clearly a compromise has to be reached and if you don't want to lose
the majority of potential viewers it makes sense to cater for the lower
end of the spectrum. As the current average access speed is rapidly rising
between 14.4 and 28.8k, this seems a sensible platform to work around.
Assuming that the average user is going to get fidgety waiting for a download
after about ten seconds this would mean a top limit on image size of around
18k at 14.4 and 35k at 28.8. As such a good rule of thumb is that - with
the exception of the home page where users tend to be more patient - all
the graphics on a page should amount to no more than 30k.

The immediate problem that this raises is that for ordinary bitmap formats,
such as BMP and TIFF, 30k is absolutely tiny. The solution and foundation
on which the whole field of web graphics is built is compression - maximizing
the amount of information in the file while minimizing its size. In fact
it's been found necessary to use two very different compression strategies
to handle two very different types of bitmap image: those full-colour
images made up of continuous tones, such as photographs, and those made
up of flat areas of a limited number of solid colours, such as logos.

The file formats that have come to fill these two roles are JPEG (Joint
Photographic Expert Group, pronounced "jay-peg") for the continuous
tone photographic images and GIF (Graphics Interchange Format, pronounced
with either a hard or soft "g") for the flat illustrative images.
There is an alternative (see "New Kid On The Block" box-out)
but, at its simplest, handling web graphics boils down to handling just
these two formats. It might sound straightforward, but to make the most
of each format you have to understand exactly how it works and the consequences
that follow.

The easiest way to gain this understanding is to create typical images,
save them as JPEG and GIF files, and explore the different options on
offer. To do this I'll use Photoshop as its general dominance ensures
that it is also the most commonly-used web image creator. However, as
all other bitmap editors offer the same controls or better (see Competition
boxout), everything we learn will be relevant whichever program you use.

THE BASICS: PHOTOSHOP

Understanding JPEG

Creating a typical JPEG file is simplicity itself as any full colour
RGB scan or digital camera image fits the bill. For the test I simply
resized the image to a largish 300 x 400 pixel web image size which amounts
to 350k of uncompressed data. To create the JPEG image it's then just
a question of using Photoshop's Save As Copy command (shortcut Alt + Ctrl
+S) and selecting the JPEG option from the drop-down list of file formats.
The central feature of the resulting dialog is the sliding scale of compression
ranging from 0 (low) to 10 (maximum). Saving copies of the test file at
both extremes and then opening them shows what is happening behind the
scenes.

The JPEG saved at maximum quality has a file size of 92k and looks indistinguishable
from the original. The JPEG saved at low quality is a mere 10k but has
severely deteriorated into a heavily pixelated and almost mosaic effect.
From the low quality version it's clear that JPEG is a "lossy"
compression scheme where detail and quality can be sacrificed to keep
size down. From the high quality version it's clear that, until it is
taken too far, the scheme is optimized to fool the eye into believing
that nothing has happened.

In fact JPEG compression works by immediately throwing away a lot of
the colour information in the image as the eye is far less sensitive to
chroma, the hues in the image, than it is to luma, the brightness in the
image. It then breaks up the resulting image into 8x8 pixel tiles and
applies a Discrete Cosine Transformation (DCT) compression to each tile
based on the quality setting. When the compression setting is too high
the quantizing effect means that individual tiles become visible which
produces the undesirable JPEG "artifacts".

With compression ratios ranging from 4 to 35 and quality ranging from
near-perfect to useless it's clear that the trick with JPEG is to find
the right trade-off between file size and quality. So what's the ideal
setting? Unfortunately there's not a single answer as this depends on
the image. For our test image the best results were with a setting of
6 where the odd artifact was appearing and the file size was 23k, a compression
ratio of 15. A good working rule is to save with a setting of 7 and, if
artifacts aren't distracting to raise the setting and, if they are, to
lower it.

The compression setting is far and away the most important feature about
JPEG compression, but Photoshop offers two other options. The Baseline
Optimized format optimizes the color quality of the image while the Progressive
option determines how the JPEG will appear in the browser. Effectively
a progressive JPEG comes into focus from the poorest quality, maximum
compression version with each pass adding more detail. Both options can
shave the odd 1 or 2k from the file size, but there's a downside as not
all browser versions can display the images. For the moment it's a moot
point whether it's worth straying from the Baseline Standard option.

Understanding GIF

Creating a GIF file could hardly be more different. To begin with rather
than simply scanning a photograph the illustrative image has to be originated
from scratch. To create a typical test GIF, I created a similar 300 x
400 blank image with a solid green background. I then added some simple
blue text which thanks to Photoshop 5's new type layers remains editable.
I than wanted to add a triangular red flash effect behind the text but
above the background. As Photoshop doesn't offer any shape handling beyond
the basic rectangle and circle tools this is actually quite difficult
and eventually involved adding a new layer, creating a path with the pen
tool and applying a fill to that. For serious logo work I would soon have
had to turn to importing files from a drawing program like Illustrator.

Theoretically I could then use Photoshop's Save As Copy command to save
the image directly to GIF, but the options provided here are virtually
useless as they give no feedback. Essentially GIF compression works by
cutting down the 16 million potential colours in an RGB image to a palette
of 256 or less. As such it immediately cuts the size of the file by a
third from 24-bit to 8-bit. Moreover it then enables high levels of compression
of the resulting areas of flat colour by enabling sequences of the same
colour to be abbreviated so that, for example, a 100 green pixels in a
row can be stored in just two bytes as Green(100). As such successful
GIF handling is all about choosing the right palette and ensuring that
the original colours are converted to this palette exactly as you want
them to be.

To be able to do this it's essential that you can see what's happening
and in Photoshop the only dialog that offers the necessary control with
a live preview is the Image>Mode>Indexed command. As we don't want
to lose our original RGB image it's first necessary to Save As a new file,
which makes the fact that Photoshop insists on flattening all layers before
changing to indexed mode slightly less irritating. Because we designed
our image with only three colours it's not surprising to find that the
preview of the indexed image with the default Exact palette option is
identical. What is surprising is that the number of colours reported in
the image is 139! This is because Photoshop automatically "anti-aliases"
text, mixing the edge pixels of the text with the background colour to
create a much smoother and more readable effect.

Even so 139 colours is still well within GIF's 256 limit and so saving
our file as a GIF is lossless in terms of quality. Moreover thanks to
GIF's compression scheme it produces a file of only 10k, a compression
ratio of 35. For our simple test file, the GIF format has matched the
best compression ratio that JPEG could offer and with no loss of quality.
More interesting, however, is what happens with original images containing
more than 256 colours. To test this I replaced the solid background in
the original test file with two rainbow gradients, one horizontal and
the other vertical, and went through the same procedure.

This time rather than an Exact palette, Photoshop creates an Adaptive
palette based on the frequency with which each colour appears in the image.
It then has to map those colours that it is discarding to the colours
it is keeping. The default solution to this is to apply "dithering"
which attempts to simulate missing colours by creating a pattern of available
colours to fool the eye. Because the palette is adaptive our main colours
for the text and triangular flash are unaffected, but the background gradient
appears very different depending on which of the three main dithering
options is selected. "None" simply maps each pixel to the nearest
available colour which results in very noticeable bands. "Pattern"
creates less obvious banding but with a clearly discernible halftone grid
effect. Finally, "Diffusion" creates a much smoother though
still clearly granulated effect.

In terms of appearance there's no question that the diffusion dithering
is closest to our original image, but we also have to take file size into
account. For the image with the vertical gradient the option with no dithering
is 17k, but dithering pushes this up to 22k. Even worse, for the image
with a horizontal gradient the sizes are 28k and 32k respectively. In
fact this shouldn't really be surprising. Dithering works by deliberately
mixing up pixels so that it inevitably breaks up the long sequences of
a single colour which is how the GIF compression scheme works its magic.
This also explains why the horizontal gradient is such a disaster as it
virtually guarantees that every pixel in its line is different to its
neighbour. The clear moral is to avoid GIF dithering and gradients if
you can and as such I'm happy to return to the simpler three colour image.

GIF89a

By then saving the image with Photoshop's File>Export>GIF89a two
other options become available that aren't when saving to the default
87a format. The first of these is the Interlace option which means that
supporting browsers display non-consecutive lines of the image in four
separate passes and so give an idea of the whole image far more quickly.
The second is the ability to define background transparency. In Photoshop
this can be done if you have created a mask in the Channels palette, but
the most common way is simply to select colours from the image with the
Colour picker. With my image, for example, I can simply click on a pixel
in the green background and it will appear transparent in the browser.

This is potentially a big advance as it enables me to produce non-rectangular
images which seem like an organic part of the web page. In practice, however,
when I load the image into my page I'm in for a nasty surprise. Because
of the way anti-aliasing works my text and triangle are surrounded by
a disconcerting halo of semi-green pixels. The only workaround is to ensure
that the background colour I use when creating the transparent GIFs is
exactly the same as my web page background colour so that the halo effect
is smoothing rather than distracting.

Viewing the image via a browser is quite likely to reveal another very
serious problem. Many systems are only capable of viewing 256 colours
at a time and these colours are fixed. If the colours in my GIF are different
to these system colours the browser will try and emulate the original
by - you guessed it - dithering. Worse this "browser dithering"
is in addition to any "application dithering" I applied earlier
and can also apply to my main three colours. The end result is that, while
on my originating 24-bit monitor my GIF looks fine, on a viewer's 256-colour
monitor it looks like it's been thrown up on a knitting machine!

Clearly the solution to this is to make sure that you stick to the system
colours that all monitors can produce. In fact this is complicated by
the fact that Mac and PC have slightly different system palettes, but
there are 216 colours that both support. These 216 "web-safe"
colours are available as a choice of palette when converting to Indexed
mode. By choosing this option and then deciding whether to dither or not
you can at least be sure that all users will be seeing the same colours.
Or at least you could do if it wasn't for the difference in system gamma
which means that exactly the same image will still look much lighter when
viewed on a Mac!

Although the creation of GIFs boils down to just two decisions - choosing
the right palette and determining how discarded colours should be handled
- the way the image interacts with the format's compression scheme and
how the image will ultimately be viewed make these choice far more complicated.
So what's the best solution? For my test image the final option I went
for was the Web palette with no dithering as the resulting shift in my
main colours and the loss of anti-aliasing quality were both an acceptable
price to pay for a file size of just 9k. For another image though the
choice could have been very different.

As with JPEGs then, there's no single best solution but at least there
is a clear spectrum at work. At one end, if precise colours and consistency
with the original image are paramount, then an exact or adaptive palette
will produce the best results when viewed on a 24-bit monitor. At the
other, if known consistency across systems is more important, then the
web palette is the safest option. In all cases, error diffusion dithering
offers greater tonal range but at the cost of file size and distracting
patterning.

A DEDICATED SOLUTION: FIREWORKS

Originating your Images

It's certainly possible to create and control all the main features of
both JPEG and GIF images within a traditional bitmap environment like
Photoshop, but the fact that it's possible doesn't mean that it's ideal.
The obvious solution is to turn to a dedicated web graphics program and
the market leader for this is Macromedia Fireworks.

What immediately puts Fireworks in a different league to the likes of
Photoshop for the origination of GIF graphics is that it offers vector-based
handling. As well as rectangle, line and circle tools, Fireworks offers
polygons and stars and powerful text management complete with control
over kerning and local formatting. More importantly, thanks to their vector
nature, once such objects have been added to the drawing they can be repositioned,
scaled, rotated and skewed instantly and with no loss of quality. Even
better, Fireworks allows you to align, group and duplicate objects - a
huge productivity gain. Using dedicated tools like these, creating a logo
like our test GIF is simplicity itself.

As well as its drawing-style features, Fireworks offers true bitmap control.
By double-clicking on an imported bitmap you enter Image Edit mode in
which you can zoom in and edit right down to the individual pixel level.
Even better you can instantly convert any object you've drawn into a masked
bitmap with the Select>Convert to Image command so that it's possible
to combine the best of both drawing and painting. Sadly, though this is
the one area where Fireworks' power is disappointing with its global colour
correction left to a bundle of semi-detached plug-ins and its retouching
capabilities limited to basic cloning. Don't throw Photoshop away quite
yet.

What makes Fireworks unique as a web graphics creator is its ability
to combine both vector and pixel attributes simultaneously. To begin with
all objects can be given photo-realistic bitmap fills using the Fill panel
and these fills can be made transparent with the opacity toolbar and even
set to blend and interact with underlying colours. Using the Brush panel
you can then give any object or path an outline based on a whole range
of pixel-based natural media effects such as watercolour or charcoal.
Alternatively, by using the Brush tool, you can interactively paint onto
the image with any of these effects and then retrospectively edit either
the stroke itself or the brush effect!

Fireworks' Effects panel takes this combination of vector-based pixel
processing and applies it directly to crucial web tasks by offering a
range of drop shadows, bevels, glows and emboss effects. To create a realistic
3D button, for example, all you need to do is draw a rectangle and select
the Inner Bevel option. The default effect is impressive enough but, if
it's not quite what you want, there are a range of presets provided each
with raised, highlighted, inset and inverted alternatives. For complete
control you can customise the width, contrast, softness and angle of lighting
yourself and then save the effect for future use.

Optimising your Images

After you've created your image it's ready to be saved as JPEG or GIF.
The whole image can be saved using the Export command, but it's also possible
to export sections such as individual buttons by dragging over an area
with the Export Area tool. What makes the Fireworks optimization process
so simple compared to working with Photoshop is the fact that the Export
dialog is built around a preview area which shows exactly what your image
will look like if it is exported with the current settings. Even better
it gives feedback on file size and download times and allows you to view
up to four versions for comparison before you finally hit the Export command.

Compared to Photoshop's trial and error approach, the live preview makes
the optimization of JPEG images a no-brainer with the ability to see exactly
at what point on the scale of compression the artifacts become unacceptable.
The program also offers much finer control with a hundred possible settings
rather than ten. In addition Fireworks offers eight levels of smoothing
which all blur the image slightly but in the process cut down on both
file size and the likelihood of artifacting.

The export preview is also invaluable for the optimization of GIFs, but
there is one disappointment - unlike Adobe ImageReady, Fireworks doesn't
offer a browser preview to show what the current GIF would look like on
a 256-colour rather than 24-bit system. Instead Fireworks seeks to avoid
the problem of browser-dithering entirely with its WebSnap Adaptive palette
option. This converts colours that are near in value to their closest
Web safe equivalent and creates an adaptive palette from the rest. In
effect this attempts to automatically provide the best compromise between
viewing on 24-bit and 256 colour system.

That's not the only advance Fireworks has to offer for GIF optimization.
The program also provides precise control over dithering with a sliding
scale rather than Photoshop's crude on-off option. It also allows the
exact number of colours in the palette to be set which allows you to discard
the least common colours until the loss impacts on the image preview.
Fireworks' Optimized option also attempts to create the smallest file
with the least number of colours, but with no loss of image quality.

In theory the extra control Fireworks offers actually adds more complexity
to the GIF creation process as it adds more variables to juggle. In practice
though it makes life far simpler. Generally I'm happy to use the optimized
WebSnap palette option and it's then just a case of seeing what effect
lowering the number of colours and varying the level of dither has on
the image quality and file size. In many ways the whole process becomes
automatic - a point which Fireworks takes to its logical conclusion with
the ability to save settings and apply them to an entire directory of
images with the File>Batch command.

Integrating Your Graphics

With Fireworks creating your web images becomes far easier, but that's
not the end of the story. After all before anyone actually gets to see
your image it first has to be integrated into your HTML. At its most basic
this comes down to the user hand-coding <IMG> tags or, more usually
nowadays, having this done for them when they insert images into a wysiwyg
web designer. By embedding the <IMG> tag within an <A> anchor
element its simple to turn a single image into a hyperlink to create the
ubiquitous web button.

That's fine for standalone graphics but one of the most common graphical
effects on the Web is an image map where different sections of the image
correspond to different links. Such image maps are handled either on the
server or, far more commonly and efficiently, on the client browser. To
create the client-side image map it's necessary to add a USEMAP attribute
to the IMG tag and then set up a <MAP> tag containing each of the
necessary <AREA> hotspots.

Theoretically it's possible to do this by hand, but Fireworks enables
the process to be controlled and largely automated. This is achieved through
the use of the URL toolbar which allows rectangular, circular or polygonal
hotspots to be drawn and for URLs to be added complete with browser status
bar messages and, where necessary, a target frame. Initially compared
to object-based links this use of a separate URL overlay seems unnecessarily
complicated as if you move an object you have to separately move its hotspot.
In practice, however, the complete flexibility more than makes up for
the extra effort - especially as the Select>Copy to URL command does
most of the work for you by creating a hotspot matching the current selection.

Image maps are an advance on single buttons, but where the hotspots are
rectangular they are tending to be replaced by a new innovation - image
slicing. Using the URL toolbar's Slice tool you can mark up the image
into separate sections which are then reassembled in the browser via an
automatically-generated HTML table. This has a number of advantages as
splitting up the large image tends to mean that the viewer gets something
to look at sooner and enables the use of ALT text to help those browsers
wanting to click immediately or with text-only browsers. More importantly
Fireworks allows the different sections to be given different GIF and
JPEG output settings to squeeze the last possible byte out of the image.

Rollovers

Image slicing has another important role to play as it allows the creation
of rollovers. These are the common effects you'll find on up-to-the-minute
sites where, as you move your mouse over a graphical link or click on
it, it responds by changing colour, gaining a drop shadow and so on. The
underlying trick of swapping images might sound simple but in practice
trying to write the Javascript to work with the different image sections,
image states and browser capabilities would be horrendous. In Fireworks
that's not a problem as the program automatically creates the necessary
files and the <TABLE>, <IMG>, <A> and <SCRIPT>
elements to bring them all together.

More importantly, the whole Fireworks object-based approach comes into
its own for setting up the effects in the first place (see Putting It
All Together boxout). Fireworks allows the different image states to be
controlled on up to four different frames corresponding to each of the
possible mouseup, mouseover, mousedown and onclick events. To create a
rollover button that responds as you move over and click on it all you
need to do is create a rectangle and apply a live effect bevel to it.
Using the Frame panel's flyout menu you can then copy the button to each
of the new frames and with the Effects panel select the preset highlighted,
inset and inverted presets for each of the image states.

Mark off the button with the Slice tool, set its Object Properties to
Javascript Rollover with default output optimisation and then use the
File>Export Slices command with the Create Demo Rollover HTML option
checked and your rollover page will be created ready for browsing in any
Javascript-enabled browser. All in all, once you know what you are doing,
you can create eye-catching and efficient web rollovers in a matter of
minutes. The end result is a site that seems to be alive and responsive
and so more attractive and inviting.

This really is making web graphics work for you and highlights just how
much more a dedicated web graphics package can offer over a moonlighting
photo-editor. With Fireworks to help, producing efficient and effective
web graphics still isn't painless but, once you've climbed the learning
curve, it's a much easier ride. Of course, even after you've mastered
JPEG and GIF creation that still leaves the entire field of non-bitmapped
web graphics to come - but that's another story and a future master class.

Tom Arah

The Competition

In the masterclass I've concentrated on Photoshop and Fireworks, but
of course there are hundreds of other packages that can write to JPEG
and GIF and so can claim to be web graphic creators. The majority of these
are the traditional bitmap-based photo editors which have all to some
extent jumped on the Web bandwagon. Many now offer the all-important export
preview for optimising images though Ulead's PhotoImpact deserves recognition
for implementing this feature years before the competition. Other programs
have their own individual strengths with the latest Painter 5.5 surprisingly
leading the pack with its ability to create image tables and even rollover
effects.

Of the dedicated packages, Adobe capitalises on the limitations it has
built into on Photoshop with its ImageReady program. This offers an ongoing
preview window together with unmatched control over GIF palettes right
down to the ability to control individual dithering patterns. For most
users though ImageReady makes the optimisation process overly complex
and it's irritating to have to use a separate program to access power
that should be internally available within Photoshop.

Much more successful are the dedicated web graphics programs that take
an object-based approach. Corel Xara is a fully featured vector drawing
program which took a sideways step with version 2 to graft on dedicated
web features such as bitmap export previews and image map creation. An
alternative completely web-orientated and object-based approach is offered
by Adobe's ImageStyler. In ImageStyler everything from shape to formatting
is treated as an object property that can be instantly updated so enabling
the entire look and feel of a site's graphical content to be updated with
a couple of clicks.

Painter 5.5, ImageReady, Xara and ImageStyler all excel in certain areas
of web graphic creation but, for the moment the only program that offers
the best of both bitmap and vector approaches is Macromedia Fireworks.

PNG - The New Kid On The Block

JPEGs and GIFs are so well suited to their separate tasks that there
seems little room for an alternative bitmap format. In fact there is another
serious contender, with a less than serious name - PNG (Portable Network
Graphics format, pronounced "ping"). The PNG format was devised
as a potential open replacement for GIF when Unisys revealed that it held
a patent to the underlying LZW compression scheme and threatened to demand
royalties. In fact that issue has now been resolved with the software
developers agreeing to licence the technology while leaving end users
free to use GIFs as they always have.

Even so the PNG format offers a number of potential attractions. To begin
with its compression scheme operates vertically as well as horizontally
so that its indexed 256-colour graphics are usually smaller than the equivalent
GIF. Also the format offers 24 and even 48 bit options so that it can
also handle full-colour photographic images. The resulting files are larger
than JPEGs but they are completely lossless. Even better they can store
an alpha channel to handle graduated transparency so solving the anti-aliasing
halo problem while offering the possibility of some advanced creative
effects.

Throw in ICC-profile support and in-built gamma correction and it's easy
to see why the W3C is pushing PNG as the preferred web graphics format
of the future. There's only one problem holding PNG back. While Explorer
4 supports the format natively, Navigator 4 requires a plug-in. When you
can't be sure that end users will even see your graphic, it's difficult
to recommend PNG no matter how technologically advanced it is.

Top Ten Tips

Work in full colour - and always make sure that you keep native
24-bit versions of the files you use to create your JPEGs and GIFs
(and if necessary convert existing GIFs back to RGB before resizing).

Be flexible - rather than automatically saving a photograph
as a JPEG think about converting to a grayscale or tinted GIF,
experiment with dithering as some patterns can be eye-catching.

Beware the system - some web servers are case-sensitive so make
sure your filenames are all lowercase.

Exploit the system - once a graphic has been downloaded it's
automatically cached and so can be reused without further penalty.

Check your image size - make sure your images and <IMG>
tags are sized correctly. This will ensure that your browser reserves
space for your graphic and more importantly that you aren't downloading
an image larger than it needs to be.

Cater for all users - by adding a thumbnail link to a full-size
graphic, viewers are given the choice as to whether it's worth the
download.

Don't be a perfectionist - in spite of all your efforts your
image will still look different on a Mac or PC. Build this knowledge
into the creation process and accept the need to compromise.

Don't forget your text - create pages with ALT text that are functional
even when graphics are turned off. Ultimately the Web is still about
the information it contains.

Tom Arah

July 1999

Hopefully you've found the information you were looking for. For further information
please click here.

For free trials and special offers please click the following recommended
links:

For further information on the following design applications and subjects
please click on the links below:

All
the work on the site (over 250 reviews, over 100 articles and tutorials)
has been written by me,Tom
Arah It's also me who maintains the site, answers your
emails etc. The site is very popular and from your feedback I know
it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent
and free by
Bookmarkingthe site (if you don't you might never find it again),
telling others about it and by coming back (new content is added every
month). Even better you can make
a donation
eg $5 the typical cost of just one issue of a print magazine
or buy
anything via Amazon.com
or
Amazon.co.uk (now
or next time you feel like shopping) using these links or
the designer-info.com shop -
it's a great way of quickly finding the best buys, it costs you nothing
and I gain a small but much-appreciated commission.