Drop shadows add impact to web graphics, but they also impact file size. You can minimize the resulting file size of palette-based images such as GIFs and PNGs by reducing the complexity of drop shadows. This article shows how to create optimized drop-shadows in Photoshop to minimize the size of web graphics.
Speed optimization
Inline Images with Data URLs – embed graphics inline with data uri scheme
Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects.
The Cost of Banner Advertising on Web Performance – internet advertising slows web page downloads
Advertising is a multi-billion dollar industry on the Web. The Internet Advertising Bureau reported that web advertising grew by nearly 34 percent in 2006 over 2005, totaling about $16.8 billion (IAB 2007). The yearly growth rate of Internet ads is increasing at 28.6% per year, while the overall ad industry drags along with an increase of only 7.7% a year (Baker 2004).
Optimize Parallel Downloads to Minimize Object Overhead
With the average web page made up of more than 50 objects (Krishnamurthy and Wills 2006), object overhead now dominates the latency of most web pages (Yuan 2005). Following the recommendation of the HTTP 1.1 specification, browsers typically default to two simultaneous threads per hostname. As the number of HTTP requests required by a web page increase from 3 to 23, the actual download time of objects as a percentage of total page download time drops from 50% to only 14% (see Figure 1).
Use Delta Encoding to Compress RSS newsfeeds – delta compression saves bandwidth
Delta encoding (also called delta compression) is a way to update web pages by sending the “diffs” or deltas between versions of a web page. The server (proxy or origin) sends only what has changed in the page since the last access. This technique greatly reduces the amount of data that is sent from server to browser. In some cases with pages that change slightly, the deltas are on the order of a few TCP/IP packets. As about 32% of page accesses are first-time visits, about 68% of page visits are eligible for delta compression.
Suture CSS or JavaScript Files to Reduce HTTP Requests
A server-side variation of merging CSS and JavaScript files before uploading to the server is to do this digital suturing at the server. You can “suture” CSS or JavaScript files together before delivery from the server to save HTTP requests. Often developers create separate style sheets and scripts for organizational purposes, and import them into their pages as needed. There are two problems with this approach:
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests. In this article we’ll expand on our mini-CSS sprite example (mono-image CSS rollovers) to show how Yahoo! and AOL use sprites to improve performance.
Mono-Image CSS Rollovers
CSS is traditionally used to create rollover effects with two or more images for menus and other elements. Menus can use on, off, or visited images to signify the state of the menu. Typically menus are created using multiple background images, however. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the “off” image is not preloaded. A better way is to combine the on and off state images into one mini-sprite and switch the background position on rollover (see Figure 1).
Minimize Noise to Maximize Graphic and Video Compression – tips to optimize web videos and images
Multimedia compression can be thought of as a war against unnecessary noise. Noise is the unwanted random dot pattern overlaid on videos and graphics when electronic noise is present, due in part to the random motion of electrons. Noise creeps into images, both still and motion, with the more lossy steps you take when manipulating images. These random dot patterns, or “snow,” prevent compression algorithms from working optimally, increasing file sizes. By minimizing the noise in your original images and videos, you can gain the maximum amount of compression when optimizing images and videos destined for the Web.
Web Video Optimization Tips – optimize streaming media for website videos
While streaming-media files make up only a small portion of the total web objects on the average web page, less than 1.3% according to Levering & Cutler (2006), a small fraction of streaming media is responsible for nearly half of the streaming media traffic (Chesire et a. 2001). In fact, YouTube is responsible for about 10% of all traffic on the Internet (Nowak 2007) and is growing at over 162% a year (see Table 1). Consequently the optimization of streaming media, movies in particular, is important to minimize load times, reduce bandwidth bills, and maximize web page speed.