[thelist] JPG misery

[Teresa_Molina at hartehanks.com]

In response to your question of background tiling: here's the easy way...

1. Finalize the image itself, sharpness, positioning, etc.
2. Select about 10% (YMMV) of the image width to the right-hand edge, from the
top of the image to the bottom.
3. Move that piece to the left, so that the right edge of selected piece meets
the left edge of the original piece. Note: You may find it easier to work on a
canvas space that is greater than that of the original image.
4. Blend the edges (of the original and selected pieces) so the seam where they
meet is no longer noticeable. Now, this part can get tricky, so you'll really
need to flex your Photoshop skills. Most importantly, MAKE CERTAIN THE VERY LEFT
EDGE OF THE SELECTED PIECE DOES NOT CHANGE; you already know that its edge lines
up with the other side; if you modify, oh say, the first three lines of pixels
(that is, the three pixels on what is now the left edge), you're defeating the
purpose.
5. Repeat for the top and bottom edges.
6. Crop out any empty space left over.
7. Save and optimize.

Tips for good backgrounds:

1. Subtlety:  Very little contrast inside the image but great contrast with
anything that goes on top of it.

2. Size: Generally, I think it's better to have a fairly large piece of tile,
both for visual and technical purposes. A larger tile -- with larger visual
elements --  looks less like a tile (I'll give the example of my own background
at http://www.mariateresa.net). The browser will also have to render it fewer
times; even a simple tile, like stripes, works better bigger rather than smaller
because it doesn't have to be rendered as much. For example, to get a striped
background, you only really need a two-pixel image, one pixel of one color, one
pixel of another. But, for a browser set at 600x800, it would be rendered about
240,000 times. Because the number of colors is more important than the pixel
size when optimizing, the increase in file size is not proportional for
larger-pixel images (that is, a 200x200 image is NOT four times the file size as
a 50x50 [it's closer to three times]); the processing time to render that larger
image as a background, though, is dramatically decreased.

3. Angles: Try to vary the distances of pieces within the image and the angle of
those distances, which will also help your image look less like a tile.

4. Edges: Of course, the elements should bleed off at least one of the edges.
That is, don't create a seam by leaving empty space to create "lines" and
borders.

HTH,
Teresa