Call (877) SITE-OPT (748-3678)

Chapter 12: Optimizing Web Graphics

Figures 12.7/12.8: Overlay Demos - GIF over JPEG

Text embedded in JPEG GIF overlaid background JPEG
 
7387 bytes6985 (JPEG) + 383 (GIF) = 7368 bytes
Text overlaid JPEG Text overlaid JPEG (CSS)
The St. Lawrence  
The St. Lawrence
7233 (JPEG) + 16 (Text) = 7249 bytesSame 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.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 18, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In