Learn how to embed images into your web pages with data URLs. The data: URI scheme includes images directly into your XHTML pages using code instead of external files, saving valuable HTTP requests.
more »
The cost of banner ads for the average website is about one-sixth more objects and one-third more latency. Learn how online advertising affects web page response times, user behavior, and satisfaction.
more »
With the average web page growing past 50 external objects, object overhead now dominates most web page delays. Increasing parallel downloads by using multiple hostnames can realize up to a 40% improvement in web page latency.
more »
Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.
more »
Learn how to create menu rollovers with different graphic backgrounds with one image. Save HTTP requests by combining on and off images into one mini-sprite and position with CSS.
more »
A solid ball head dampens sharpness-robbing vibration for sharper and smaller images and videos for the Web. Updated with the newest models, we compare some pro-level ball heads and offer some tips for sharper photographs.
more »
PNGs are designed to be a more efficient, flexible, and patent-free replacement for GIFs. By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth.
more »
Make your designs sing in four-part color harmony with these automated color harmonization tools. We review a joint effort by Microsoft and Tel Aviv University to automatically enhance the color harmony of an image.
more »
Know what jolly old site owners get when they let their graphics get so plump they shake like a bowl full of jelly?
A lump of coal for Christmas. Let our Rudolph guide your way to a merry Christmas and happy New Year with an inspirational rendering of 'Twas the night before Christmas.
more »
Learn how to reduce the number of HTTP requests required by your web pages by combining adjacent images and optionally imagemapping the links. This tutorial shows both client and server side techniques you can use to save precious HTTP requests and speed up your site.
more »
Learn how to create an eye-catching overlay with CSS positioning. This CSS-layout technique is faster than image slicing requiring fewer HTTP requests.
more »
Crop images contextually for faster downloads and higher impact. By cropping maximally and resizing you can convey meaning without slowing down your web pages.
more »
Web page analysis and optimization tools can help locate and minimize performance bottlenecks. They can improve accessibility, spelling, XHTML markup, and even search engine visibility. We survey the webpage optimization tool landscape.
more »
Background blurring reduces non-critical details to make the JPEG algorithm work more efficiently. Converting to Lab Color mode allows you to maximize blur for minimum file size.
more »
Dithering uses existing colors to strategically change pixels to minimize apparent banding. While dithering increases file size, when used in combination with lossy compression and weighted optimization, dithering can allow lower bit-depths for GIFs and PNGs.
more »
Histogram influencing minimizes banding in GIFs and PNGs by weighting color palettes towards problem areas. Lower banding at lower bit-depths makes for smaller images.
more »
Minimize the number of colors in GIFs and PNGs to optimize file size. Lower bit-depths mean smaller palettes and code widths, which makes for smaller images.
more »
Lossy compression lets you squeeze more bytes out of your GIFs and PNGs. Lossy compression increases identical pixel patterns to improve compression in indexed-color images.
more »
Weighted optimization or regional compression applies different degrees of compression to different areas of your image. By varying the quality within images you can improve file size.
more »
Choosing the right image format is the first step in optimizing web graphics. Learn how to choose between the GIF, PNG, and JPEG formats for different image types.
more »
Image stabilization creates sharper pictures by damping vibration to avoid motion blur. Gyroscopic stabilizers steady cameras for sharper photographs and videos.
more »