Chapter 12: Optimizing Web Graphics
Figures 12.7/12.8: Overlay Demos - GIF over JPEG
| Text embedded in JPEG | | GIF overlaid background JPEG |
|---|
 |
|
 |
| 7387 bytes | | 6985 (JPEG) + 383 (GIF) = 7368 bytes |
| Text overlaid JPEG | | Text overlaid JPEG (CSS) |
|---|
| The St. Lawrence |
|
The St. Lawrence |
| 7233 (JPEG) + 16 (Text) = 7249 bytes | | Same size, in CSS |
By overlaying a GIF over a background JPEG you can improve image quality while avoiding compression artifacts from embedding sharp-edged text. Even better, overlay styled text over your JPEG instead of embedding it, to save a HTTP request.
