- You are here:
- WebsiteTips Home
- Web Site Resources
- Web Site Optimization
- Optimize Images, Graphics Optimization
Web Site Optimization
Section 2: Image Optimization, Optimize Graphics - Tutorials, Resources, Tools, Books
Want to make your images load faster? Need to speed up your page load times, streamline and optimize your photographs, Web graphics, and images?
Many of us already consider optimizing images for Web use by reducing the file sizes as much as possible without noticeable visual degradation. Another aspect of optimizing images is their actual use, such as combining several icons into one image and using CSS for presentation or using one background image for several purposes, also using CSS positioning. Below are tutorials on various approaches to optimizing Web site images and their use, including tutorials specifically for optimizing images in Adobe Photoshop, Corel Paint Shop Pro, and compressing and optimizing Adobe Flash files.
Within the Graphics Optimization, Optimize Images section below, you'll find helpful resources to articles, tutorials, and tools to show you how to optimize your images to reduce their file sizes without degrading how they appear on your Web sites, along with smart ways to combine images using CSS (CSS image sprites), and compressing and optimizing multimedia files.
Your pages can load faster, you'll save bandwidth, reduce file sizes, reduce server space, and much more by optimizing your Web site's performance.
Know of some good articles, tutorials, books, or resources related to Web site optimization or server-side compression? Recommendations are welcome and encouraged!
On this page:
Web Site Optimization Books
Recommended by WebsiteTips.com
Read short descriptions, reviews in the Web Resources
Website Optimization section.
Read short reviews and find more book recommendations on Web site-related topics in our Recommended Books, Software section!
In association with 
Optimize Web Site Images
The tutorials here either cover more than one graphics software or are targeted for image optimization in general. See also below, Optimize Web Site Images Using Paint Shop Pro and Optimize Web Site Images Using Photoshop.
- Graphics: Blur Backgrounds for Optimized JPEGs
“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.” Several examples, along with how to use Photoshop's Lab Color mode for even better results. [Article/tutorial dated 04/26/2004, updated 06/01/2004, by Andrew B. King, Website Optimization.] - Graphics Optimization: An Interview with Derek Tonn
How graphics optimization benefits business enterprises, the key to optimizing Web graphics, graphic file types, practices to improve Web site performance and speed, and more. Good interview. [Article/tutorial dated 11/02/2007, by Website Magazine.] - Graphics: Use Lossy Compression for Smaller GIFs and PNGs
Insightful article/tutorial on compressing your graphics for the Web without losing quality using lossy compression. “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.” [Article/tutorial dated 04/26/2004, updated 09/10/2006, by Andrew B. King, Website Optimization.] - Minimize Noise to Maximize Graphic and Video Compression
“Noise is the enemy of efficient multimedia optimization. Learn how to minimize the noise in your images and videos to maximize compression.” Several helpful examples of the differences and techniques on how to reduce the noise in your images and videos. [Article/tutorial dated 04/26/2004, updated 07/30/2007, by Andrew B. King, Website Optimization.] - Minimizing JPEG File Size
Shows how to use a variety of software to reduce file sizes, including Photoshop's Quality settings, Pro-JPEG, HVS JPEG. Also describes how to “soften” an image, use progressive blurs, weighted optimization, and more. Chapter excerpt from Web Design in a Nutshell: A Desktop Quick Reference, 3rd Ed. By Jennifer Niederst Robbins. [Article/tutorial by Jennifer Niederst-Robbins.] - Optimizing Web Graphics
Summary of an entire chapter on optimizing Web graphics from Andy's book. Lots of great information here. “Graphics optimization is key for fast web page display. In this chapter you'll learn how web graphics formats work and how you can take advantage of their compression algorithms to minimize file size. Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs to varying degrees. Each has its own strengths and weaknesses. You'll realize the most savings in eliminating and replacing them with text and CSS, combining neighboring graphics, and reusing graphics with the same URLs.” [Article/tutorial dated 02/26/2006, by Andrew B. King, Website Optimization.]
Related within Web Site Resources:
Optimize Web Site Images Using Adobe Fireworks
Originally targeted especially for images for computer screen use, including Web site images, Adobe Fireworks (formerly Macromedia Fireworks) can often do a better job of optimizing images for Web sites than Adobe Photoshop.
- Choosing a File Type
Part of optimizing images is choosing the best image format for the particular image. This article/tutorials gives the basics about each type of image file format - GIF, JPEG, PNG and Fireworks PNG files, WBMP, TIFF, BMP, PICT. [Article/tutorial part of Using Adobe Fireworks CS3, Adobe Help Resource Center.] - Optimizing Images in Fireworks
Follow along with this detailed tutorial - you can download all the images in the tutorial, and they also offer this tutorial in a video format (all free). Covers choosing the best file format for your image (.jpg, .gif, .png), reviews the Fireworks Optimize Control Panel, how to optimize and export each image file format, and more. [Article/tutorial by ProjectSeven.com.] - Optimizing and Exporting in Fireworks
Direct from Adobe's Help, you'll find fairly detailed instructions on how to optimize images using Fireworks. Categories include: About optimizing; Using the Export Wizard; Optimizing in the workspace (Using optimization settings; Previewing and comparing optimization settings; Choosing a file type; Optimizing GIF, PNG, TIFF, BMP, and PICT files; Optimizing JPEGs; Matching a target background color; Saving and reusing optimization settings); Exporting from Fireworks; Sending a Fireworks document as an e-mail attachment; Using the File Management button. [Articles/tutorials part of Using Adobe Fireworks CS3, Adobe Help Resource Center.]
Optimize Web Site Images Using Adobe Photoshop
- Web Graphics: Web Graphics Optimization Options
![Adobe Photoshop CS3 Standard [Windows]](/im/am/soft/photoshopcs3_78x110.png)
An entire section on Web graphics optimization options within Adobe Photoshop CS3 - direct from Adobe's online help resources. Categories include: Web graphic formats, JPEG optimization options, GIF and PNG-8 optimization options, Optimize transparency in GIF and PNG images, View the color table for an optimized slice, Customize the color table for GIF and PNG-8 images, PNG-24 optimization options, WBMP optimization options, SWF optimization options (Illustrator), SVG optimization options (Illustrator). [Article/tutorial series via Adobe Photoshop CS3 .] - Web Graphics: Optimizing Images
An entire section on how to optimize images using Adobe Photoshop CS3 - direct from Adobe's online help resources. Categories include: About optimization, Save For Web & Devices overview, Preview image gamma at different values, Optimize an image for the web, Save or delete optimization presets, Work with slices in the Save For Web & Devices dialog box, Compress a web graphic to a specific file size, Resize artwork while optimizing, Generate CSS layers for web graphics, Vary optimization based on a mask, Preview optimized images in a web browser, Save a file to e-mail. [Article/tutorial series via Adobe Photoshop CS3 .]
Optimize Web Site Images Using Corel Paint Shop Pro
- Optimize Website Photographs
Covers a fair amount of detail on optimizing photographs for Web use - information from Corel's help files, Paint Shop Pro's JPEG Optimizer, and JPEG Wizard. Lots of screenshots, detail, and includes helpful tips along the way, too. [Article/tutorial dated 03/11/2006, by J. Cricket Walker, for Mississippi Photo Gallery.] - Saving and Optimizing Animated Images in Paint Shop Pro
Part 5 of a tutorial on creating animated GIF images in Paint Shop Pro, this page shows how to optimize and save an animated GIF image for the Web using Paint Shop Pro. Also covers cropping the image, replacing colors, the optimizer image dialog box, customize settings, and more. Lots of detail here. [Article/tutorial by Arizona Kate, for About.com: Graphics Software.]
Related within Web Site Resources:
Optimize Web Site Images Use
- Responsible CSS - Recycle your Background Images
Ideas and ways to reuse your background images within your pages with CSS, including CSS positioning. This means only loading one image to provide various visual looks, reducing page load times, bandwidth, etc. Although written in 2004, this is just as timely today. [Article/tutorial dated 05/05/2004 by Mike Papageorge, fiftyfoureleven.com.]
Optimize Web Site Images Use with CSS Sprites
A technique that combines several images into one image and uses CSS for presentation.
- CSS Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons
By Shirley Kaiser, SKDesigns. Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you'll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial. [Article dated 10/04/2007 by Shirley Kaiser, SKDesigns via WebsiteTips.com's CSS Tutorials.] - CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
“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.” [Article/tutorial dated 09/26/2007, by Andy King, for WebSiteOptimization.com.] - CSS, Image Sprites, Background Images and Website Optimization
Benefits of using the CSS sprites method, along with helpful insight and tips about how to create your sprites image that's optimized with HTTP requests and packet sizes in mind. [Article/tutorial dated 07/26/2007 by Mike Papageorge, fiftyfoureleven.com.] - CSS Sprites: Image Slicing's Kiss of Death How to build a grid-like image that uses CSS positioning to change the visual look upon mouse hover, and all without a flicker problem. This approach also eliminates the need for multiple images and slicing them up. [Article/tutorial dated 03/05/2004, by Dave Shea, for A List Apart.]
- Sliding Doors Meets CSS Sprites
Uses a combination of the sliding doors method for tabbed menus and the sprites method of displaying images using positioning and the CSS background-position property. Great method of optimizing your site and speeding up page download times. [Article/tutorial dated 06/24/2004, by Mike Papageorge, fiftyfoureleven.com.]
Related within Web Site Resources:
- CSS Tutorials
- Graphics Tutorials, Tips, Books, Tools, Software
- Graphics Photoshop Tutorials, Tips, Books, Tools, Software
Related within Articles, Tutorials, and Tips:
Optimize Adobe Flash, Adobe Flash Compression
- Compressing Flash movies and Flash banners
Helpful tips for what to watch for and how to optimize Flash files. Topics cover colors, gradients, symbols, fonts, lines, bitmap images, sound, animation, and exporting. [Article/tutorial by Grantastic Design.] - Flash Performance and Optimization Tips & Tricks
![Cover - Flash Hacks: 100 Industrial-Strength Tips & Tools [ILLUSTRATED]. By Sham Bhangal. O'Reilly (May 1, 2004).](/im/am/bk/ind/b/bengal-flash-hacks-110.png)
Chapter excerpt from the popular book, Flash Hacks: 100 Industrial-Strength Tips & Tools. Topics of this chapter: optimize file size and download time, optimize graphics. Subtopics cover bandwidth testing, hiding low-quality settings, creating and testing optimized graphics, adjusting the animation complexity dynamically, performance, substituting bitmaps for vectors, and optimizing component downloading and usage. [Article/tutorial dated 06/2004, by Sham Bhangal, for ActionScript.org.]
Web Sites, Web Site Sections Devoted to Graphics Optimization
- Graphic Optimization Archives
Tutorials and tips on CSS image sprites, optimizing parallel downloads, CSS rollovers using only one image (or less!), minimizing noise in images, choosing appropriate image file type to help reduce file size (.png, .gif, .jpg), combining images, including height and width in your markup for images and why it matters, and much more. [Section part of WebsiteOptimization.com, by Andy King.] - Graphics Optimization Blog
A blog entirely devoted to all things related to optimizing graphics. Posts on optimization examples, tools and techniques, and more. [Blog by Derek Tonn, Graphics Optimization.]
Web Site Images Optimization Tools
The tools listed below are either standalone tools or plugins. Note that many graphics software programs include image optimization within them, including Adobe Fireworks, Adobe Illustrator, Adobe Photoshop, Corel Paint Shop Pro, and others.
- GIFBot
Online tool that compresses GIF, JPEG, and animated GIF images. Free trial, use by subscription. [Image Optimization tool by NetMechanic.] - ReaCompressor
“This utility provides you with an ability to choose from the most effective compression formats for your image: JPEG, GIF or PNG. By showing an image in your own settings and desired quality it helps you better optimize an image and make the right decision on its format, quality and size. Your original graphic file can be in any format.” Software for Windows. Pricing January 2008: Personal:$24.95, Business: $49.95, Site (Company): $99.95. [Image Optimization tool by ReaSoft Development.]
Related within Web Site Optimization:
Related within Web Site Resources:
