The St. Lawrence
| 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.