For palette-based formats like GIF and PNG, file size is directly related to the size of the color palette, or the number of colors in the image. As the number of colors in an image crosses a power of two, the file size jumps. A 33-color image must use a six-bit palette, while a 32-color image can use a 5-bit palette. Smaller palettes mean smaller codes (representing pixel patterns), which makes for smaller files. So minimizing the number of colors in index-color images like GIFs and PNGs will minimize file size.
Website Optimization
CSS: Substitute CSS2 Menus – replace graphic rollovers with css menus
Substituting CSS-based techniques for old-style graphic rollovers and DHTML menus is one of the most effective web site optimization techniques available. Graphic rollovers use “on” and “off” graphics to create rollover effects, with and without JavaScript. DHTML menus create nested menu structures with JavaScript, some of it complex. With the widespread adoption of CSS2-aware browsers, there is a better choice: CSS-based techniques. Substituting list-based markup, CSS2 to style, and an optional dash of JavaScript makes for fast, small, and accessible CSS menus.
Graphics: Use Lossy Compression for Smaller GIFs and PNGs – gif lossy png compression for smaller images pngs lzw algorithm
Lossy compression is a good way to squeeze extra bytes out of your GIFs and PNGs. Lossy compression changes pixel patterns to match other pixel patterns to allow more efficient compression. You can apply lossy compression to the entire image, or selectively using weighted optimization with alpha masks for less important areas of your images (see Figure 1). Although the term sounds catchy, it should not be confused with the lossy compression used in JPEG compression.
XHTML: Omit Redundant Classes and Default Attributes – trim duplicate classes and default attributes to optimize html markup code
Redundancy and repetition can be useful in mission critical and learning applications. But for web pages, browsers are smart enough to glean what you want without redundant markup. By omitting redundant classes and default attributes often inserted by overzealous WYSIWYG XHTML editors, you can streamline your CSS and XHTML and put your code on a low-character diet.
XHTML: Layer Tables and Divs – layering tables and divs speeds response times xhtml markup
Many sites use one table to layout their entire page. This technique can force the browser to render the entire table before any content displays. The trick is to break up your table into layers, like a layer cake.
XHTML: Use Structural Markup – contextual selectors descendant xhtml markup
Ah, the wonders of web standards The oft-cited separation, the lifting of your spirit knowing that you’re helping the semantic web evolve. The sheer joy of CSS. Adopting purely structural markup for your XHTML ensures a longer shelf life and faster pages. Written properly, structural markup can eliminate unnecessary classes by targeting content with CSS selectors.
Graphics: Use Weighted Optimization – regional compression for smaller photos and images
Weighted optimization or regional compression applies different degrees of compression to different areas of your image. You can use alpha masks to apply different JPEG quality and GIF/PNG lossy and dithering settings to different areas of your image. In many cases weighted optimization can squeeze more bytes out of your images destined for the Web.
Graphics: Choose the Right Image Format – jpeg gif png web image file formats
On average, images make up over 50 percent of the average web page, so it is important to minimize their impact on page speed (King 2003). Choosing the appropriate web-based format for your images is the first step towards optimized web graphics. GIFs, JPEGs, and PNGs are the formats used to display images on the Web. Each has its own strength and weaknesses.
Multimedia: Use a Stable Tripod – pro camera tripod review for sharper photos & solid video support
Ansel Adams once said that the ideal tripod “is a cubic yard of solid concrete with a 1/4″ X #20 bold head sticking out of the top.” While this certainly would give a nearly vibration-free support, for most photographers this is not a viable option. That’s where tripods come in handy.
Multimedia: Use Image Stabilization – gyro stabilizer lenses & gyroscopic stabilizer for sharper aerial photography & video cameras
Vibration is one of the photographer’s worst enemies. Slow shutter speeds and telephotos usually don’t mix well, often resulting in blurry shots. A stable tripod can help to ensure sharper photographs and videos destined for the Web. But what about situations where a tripod is not an option?