Cropping and resizing your images for the Web is a common technique for creating smaller thumbnail images that download quickly. However, we’ve seen many sites that either use HTML’s width and height attributes to resize larger images, or minimally crop and resize their images to lose vital information (see Figure 1). A better way to create images optimized for the Web is to crop them contextually.
Graphic optimization
Size Images with Width and Height Attributes – image attributes width height
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.
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.
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).
Graphics: Minimize Bit-Depth – minimize colors in gif png for smaller images pngs lzw algorithm
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.
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.
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.