[thelist] JPEG misery

martin burns martin at members.evolt.org
Thu Jul 27 03:35:16 CDT 2000


> 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.

>From memory (I don't have PS at work yet - awaiting the delivery of our G4; yum), PS and I presume IR too has an 'offset' filter which will shift and wrap the image for you.

You can then blend the former edges and either offset it back, or (simpler) just save it straight out as a JPEG.

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

Low layer opacity. Yum. Or a single colour which is one browser-safe colour away from the main background colour.

>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, 

In GIFs only. JPEG doesn't care.

>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])

Depends on the image in question, but much more so for GIFs.

Because the LZW algorithm (which GIF uses) compresses horizonal lines fantastically (it represents 4 blue pixels as "blue x 4" rather than "blue blue blue blue"), you'd be better with a 2x100 image anyway.

Also, as GIF also recognises repeating patterns ("Oh, it's old 'blue x 4' again"), a field of vertical repeats of the stripes would compress very well too. So a 100x100 image of alternating stripes (like the one we have on thesite's home page) would compress very well indeed. 

An example: the image on the background of http://www.funkmusic.co.uk (it's at http://www.funkmusic.co.uk/images/test.gif if you want to grab it) is 100x100, and is only 310 bytes. If it didn't compress so well, it would be about 10k (ie a 2 byte image x 100 across x 50 down).

One thing to watch with striped backgrounds - text can be pretty unreadable on top, which is why that site (and thesite too) only do it for the outside, not for the main text area.

However, JPEG doesn't compress this sort of image well. It *does* compress photos and other continuous tone images very well (which GIF doesn't as it is a large palette without many repeating sections). But you'd expect this, as it was developed as a photo compression format by the Joint Photographic Experts Group (hence the acronym JPEG - JPG is a DOS 8.3 bastardisation)

Cheers
Martin




More information about the thelist mailing list