What it is. Why you should care. How to do it. How NOT to do it. Tools of the trade. Put me to the test! For more information... Graphics Optimization for the Web Presented by: Derek Tonn Founder and CEO, mapformation, LLC (www.mapformation.com) Founder, GraphicsOptimization (www.graphicsoptimization.com) Monday, March 3, 2008 OmniUpdate User Conference Palm Springs, California, USA
Graphicsoptimization2008
Dec 14, 2014
This presentation was given as a one-hour workshop at the 2008 OmniUpdate User Conference in Palm Springs, California, USA by Derek Tonn, Founder and CEO of mapformation, LLC and the Founder of GraphicsOptimization, a service dedicated to improving the internet through education and services related to the creation of smaller, more efficient image file sizes that will consume less bandwidth while simultaneously reducing the time it takes to load and display graphics.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
What it is.
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
Graphics Optimization for the Web
Presented by: Derek TonnFounder and CEO, mapformation, LLC (www.mapformation.com)
Founder, GraphicsOptimization (www.graphicsoptimization.com)
Monday, March 3, 2008OmniUpdate User ConferencePalm Springs, California, USA
What it is. - Traditional definitions
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
Traditional Definitions and Concepts
- Save/Export to Web in .jpg format for all photos, increasing image compression levels to maximize file size savings.
- Save/Export to Web in 8-bit (256-color) .gif format for all drawn imagery.
** - in talking with hundreds of web developers and faculty who teach web development, the above points related to image optimization comprise a majority of what has been taught on this subject in the classroom over the past 15 years.
What it is. - A better definition
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
What graphics optimization actually is:
- Evaluating whether using an image is necessary.
- Choosing the optimal file format for each image.
- Reducing the number of colors used in an image to the minimum required.
- Applying available compression settings to all resulting image file formats once the above tasks are complete.
...all with the goal of creating faster, better browsing for your site's visitors without sacrificing aesthetic quality.
What it is. - A bit of philosophy...
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
With computers, there are generally two methods for improving the process of delivering content:
1. Make computers process/store more information in the same amount of time and space as before (bigger hard drives, more RAM, etc.)
2. Make computers process the same amount of information in less time than before (smaller file sizes, less RAM required)
** - most hardware developers, software developers and web hosting services tend to focus on the former, while the process of optimizing graphics tends to focus on the latter.
What it is.
Why you should care. - Financial Benefits
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
Financial Benefits of Optimization:
1. Lowering web site hosting costs via smaller bandwidth consumption.
2. Lowering file storage costs at your web host, as well as on your local computer/server.
3. Faster Page/Graphic Loads resulting in more-favorable experiences for site visitors, which could lead to more page views and/or more sales or advertising revenue.
4. Reducing the need for faster (or better) computer equipment to process the identical quantity and quality of information.
What it is.
Why you should care. - Environmental Benefits
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
Environmental Benefits of Optimization:
1. Fewer servers needed to process the same amount of information will reduce the electricity consumed to provide web hosting services, and faster-loading web pages could effectively reduce the amount of time visitors of web sites need to spend online to obtain the same amount of information, further reducing the demand for electricity.
2. Less information needing to be processed by a browser or hard drive can help extend the life cycle of existing equipment, resulting in less hazardous waste being introduced into the environment.
What it is.
Why you should care. - Societal Benefits
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
Societal Benefits of Optimization:
1. Optimizing imagery helps better-level the playing field between wealthy and poor in our world, by reducing the amount of “extra” time it takes for your site/page content to display in browsers with slower connection speeds.
2. Although faster-loading imagery is not a mandate of the Americans with Disabilities Act, Section 508, I believe that a BIG part of making information more accessible is getting information into people's hands as efficiently as is possible.
What it is.
Why you should care.
How to do it. - Is an image necessary?
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your images:
1. Determining if the use of an image in your web site/page is even necessary.
- “A picture is worth 1,000 words” (more like 30 pages of written text, when it comes to web design and the typical image file).
- Avoid the unnecessary splicing of imagery whenever possible, as it can increase the amount of bandwidth required to display a page, while all of the additional “image calls” can also increase the time it takes to display your content.
What it is.
Why you should care.
How to do it. - Optimal file formats
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your images:
2. Determining optimal file formats.
- .jpg for photographs - .gif for transparent images and many images under 1 KB in size - 8-bit .png for all other “drawn” imagery - .pdf for print-quality documents - .swf for most animations (animated .gif works better for much smaller presentations of information, such as buttons/icons).
** - there are ALWAYS exceptions to the “rules,” but following the above guidelines will serve you very well 99 percent of the time.
What it is.
Why you should care.
How to do it. - Optimizing .jpg files
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your .jpg files:
1. Pre-size your image to the dimensions you wish to display on your web site.
2. Adjust the compression levels in your imagery.
3. Remove extraneous information from your digital photos.
4. Remove any excess colors.
5. Avoid the use of progressive downloads (progressively loading a an image from “blurry” to focused to give viewers a hint of what is coming to help keep them patient).
6. Apply custom zonal compression to your imagery.
What it is.
Why you should care.
How to do it. - I love zonal compression!
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
.jpg files and Custom Zonal Compression:
- Applying different compression rates to different regions of a photograph can ensure achieving the minimum file size possible without any noticeable image degradation.
What it is.
Why you should care.
How to do it. - Optimizing .gif files
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your .gif files:
1. Pre-size your image to the dimensions you wish to display on your web site.
2. Remove any excess colors.
3. Avoid the use of interlacing (progressively loading an image from “blurry” to focused to give viewers a hint of what is coming to help keep them patient).
What it is.
Why you should care.
How to do it. - Optimizing 8-bit .png files
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your 8-bit .png files:
1. Pre-size your image to the dimensions you wish to display on your web site.
2. Remove any excess colors.
3. Avoid the use of interlacing.
4. Experiment with various compression methods and strategies.
What it is.
Why you should care.
How to do it. - All .pngs are not the same
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your .png files:
“But not all browsers can support or display .png imagery...”
There are three types of .png files that one can create:
- 8-bit .png files. Designed as an improvement upon the .gif file format. As safe to use in web development as .gif, .css, .js, .swf, etc.
- 24-bit .png files. Designed as a replacement for the .jpg file format. Not 100 percent supported by all browsers, but safe to use as an embed within most Flash output.
- 32-bit .png files. Uses alpha transparency, but not universally supported by all browsers.
What it is.
Why you should care.
How to do it. - Optimizing .pdf files
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your .pdf files:
1. When using imagery, try to use vector imagery instead of bitmap whenever possible.
2. Pre-size your bitmap images to the dimensions you wish to display in your .pdf file.
3. Remove any excess colors.
4. Reduce the total number of fonts embedded within your .pdf document.
5. Disable all thumbnails and other "editability" functionality.
6. Experiment with different methods for generating .pdf output.
What it is.
Why you should care.
How to do it. - Optimizing .swf files
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
How to optimize your .swf files:
1. Make sure to fully optimize all of the individual elements that are being included in your Flash presentations:
- .avi, .mpeg, .flv and .fla (video files) - .wav and .mp3 (audio files) - .png, .jpg and .bmp (imagery) - text elements
2. Experiment with various compression methods and strategies.
What it is.
Why you should care.
How to do it.
How NOT to do it. - Mistakes to avoid
Tools of the trade.
Put me to the test!
For more information...
How NOT to optimize graphics:
1. Do not “over-optimize” your imagery! If you can notice that has image has changed (in a negative way) after you've completed your optimization work, you've gone too far.
2. One size does not fit all when it comes to optimizing graphics. What works for one image does not necessarily work for another. Some batch processes work! Others don't.
3. Avoid using .jpg format for drawn imagery unless absolutely necessary.
4. Do not save .jpg imagery at a very high rate of universal compression until you are certain that no further editing/optimization will be necessary.
What it is.
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade. - Some of my favorites
Put me to the test!
For more information...
My personal favorite optimization tools:
Basic optimization (better than nothing): - Save/Export for Web
A serious optimization tool: - ImageMagick (www.imagemagick.org)
For the truly hard-core: - xat.com Image Optimizer** (www.xat.com/io/index.html) for .jpg custom zonal compression - PNGOUTWin (www.ardfry.com/pngoutwin/) for fast optimization of 8-, 24- or 32-bit .png files - PNGSlim (http://people.bath.ac.uk/ea2aced/tech/png/pngslim.zip) for maximum optimization results for the .png file format - FlashOptimizer (www.eltima.com/products/flashoptimizer/) - PPTMinimizer (www.pptminimizer.com)
What it is.
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test! - Let's have some fun
For more information...
Putting this information to the test:
What it is.
Why you should care.
How to do it.
How NOT to do it.
Tools of the trade.
Put me to the test!
For more information...
For more information:
Derek Tonn220 South Burns AvenueSpringfield, Minnesota 56087 USATelephone: +1 507-216-0096Fax: +1 206-203-0411 **[email protected]
General Inquiries via Instant Messenger:AOL Instant Messenger: optimizegraphicsYahoo Instant Messenger: optimizegraphics