Optimization is the process of fine- tuning the display quality and file size of an image for use on the Web or other online media.
**Do NOT use Dreamweaver to resize your images--Please use only Photoshop**
RESOLUTION:
When you create a graphic for the Web, you must think in pixels, not in inches, millimeters etc. The resolution measurement used with the graphics and photos for print (pixels/inch) is useless on the web. The web browser measures the width and the height of a graphic in pixels, no matter if the graphic is 72 pixels/inch or 300 pixels/inch (ppi - pixels per inch). So, a 200x300 graphic looks the same size on the monitor with either 72ppi or 300ppi.
COLOR:
Only RGB! Browsers don’t understand other color modes such as CMYK, Lab and Multichannel,Saving JPG files with the Save as.. command
SAVE AS ...
In the Image Options section you specify the quality and the size of the saved file. The higher the quality, the higher th
e file size.
In the Format Options sect
ion you can chose from three JPG encoding options:
- Baseline (Standard) - You will leave this option selected almost always as this type of encoding is supported by
all browsers, even the oldest versions. Choosing this option you make your file "user friendly"
as there will not be people which cannot see your graphic.
- Baseline Optimized - This is a newer compressing algorithm that produces slightly better image quality, but it's not fully compatible with some old browsers.
- Progressive - This option produces a photo, that will display gradually (in a series of scans) when it is downloaded to the browser. With the first scan, a low quality image will be displayed, then, with the second scan will appear a better quality graphic and with the final scan will appear the high quality final graphic. You can specify the number of scans from 3 to 5. The Progressive mode produces larger files and is not supported by all browsers.
Once you are ready with the image corrections and you have the image with the proper pixel dimensions, then:
Go to File > Save For Web...
The "Save for Web" command is an easy and comfortable way to save graphics for the Web. It allows you to save files for the web in GIF, JPEG and PNG formats directly from a Photoshop file, and most important, without affecting the original. You can also resize the photo (the graphic).
Another good thing with the "Save for web" is that you can work with slices, saving each slice with different settings. T
he slices can be saved with or without the HTML code.
In "Save for Web" window you can see both the original of the graphic and the optimization preview side-by-side. This will help you to optimize the graphic making it to look very close to the original, retaining a small file size.
As we mentioned above, you can easy work with slices here. Just pick-up the slice selection tool, select a slice and assign it the desired saving options.
On the bottom of the window you will see file size and the average download time.
All other options are the same as with the "Save As.." command.
Step by Step guide to using Save As.
(from:http://www.e-cobo.com/design_tips/grdesign/optimizing_graphics_for_web.php)
No comments:
Post a Comment