Most web pages use images to spice up their look. However, not all web pages use width and height to size their graphics and objects. Specifying the width and height of all embedded objects like images and applets allows your user’s browser to render your page without waiting for images to download and try on for size.
Website Optimization
Convert Graphic Text to Styled Text – graphic text to css text conversion
Converting graphic text to styled text is an effective way to speed optimize your website. Graphic text is simply text that has been pixed in stone in a graphic design program like Photoshop. While graphic text allows you to use any font face (see Figure 1), it has a number of disadvantages.
Use Short Relative URLs – url abbreviation avoids long uri files and directories
Brevity is a good thing. Absolute, verbose URLs are out, relative short URLs are in. By carefully naming your files and directories, and judicious use of abbreviation with mod_rewrite and content negotiation with same, you can speed up your pages while maintaining legibility and search engine positioning.
Abbreviate URLs with mod_rewrite – url abbreviation uri mod rewrite
Called the “Swiss Army knife” of Apache modules, mod_rewrite can be used for everything from URL rewriting to load balancing. Where mod_rewrite and its ilk shine is in abbreviating and rewriting URLs.
Rewrite URLs with Content Negotiation – no file extension url rewriting
You can make your URLs shorter and more abstract by using content negotiation to strip file extensions from your markup and source code. You’ll save a few bytes off of each object reference, and migration headaches in the future when you change technologies.
Use Lowercase Markup For Better Compression – avoid uppercase markup to improve xhtml and html compression
Lowercase markup compresses more efficiently than uppercase markup. Along with the benefits of XHTML compatibility, lowercase markup allows HTTP compression to work more efficiently by increasing redundancy. In this article we show the benefits of using lowercase markup on five popular sites.
CSS: Use Shorthand Hex Colors – hexadecimal shorthand notation optimize css
Shorthand hex notation abbreviates 6-character RRGGBB CSS colors into 3-character RGB shorthand. Combined with shorthand properties and grouping, shorthand hexadecimal colors can shrink style sheets dramatically, often by 50%.
Use Conditional Server Side Includes – conditional css style sheets xssi
You can minimize HTTP requests by combining external CSS and JavaScript files. You can go even further by server-side including the remaining external files (with restrictions for XHTML due to its XML nature). One additional technique is to make those SSI work harder for you by serving up conditional content. Conditional server-side includes let you deliver different content based on environment variables sent by browsers to servers.
Graphics: Blur Backgrounds for Optimized JPEGs – optimize jpegs by blurring background for smaller jpeg optimization in lab color mode
A close cousin to regional compression, blurring reduces higher frequency details for smaller JPEG images. Blurring smooths out abrupt color and tonal transitions, making the JPEG algorithm work more efficiently. The amount of savings depends on the amount of blurring, and can range anywhere from 5% to over 20%. The less detail there is in an image, the more efficient the compression.
Graphics: Minimize Dithering – reduce banding diffusion dithering in gif png for smaller optimized images
At lower bit-depths, color quantization can reduce smooth color gradients into discernible bands of color (see Figure 1). Dithering is the process of changing pixels in these color transition zones to minimize banding. This feathering process strategically places patterns of available colors to emulate colors eliminated in the color quantization process. The resulting image appears smoother, but dithering makes file sizes larger (see Figure 2).