Contents
Image Compression Basics
What is the best compression format to use, JPEG, GIF, or PNG?
How do I set which compression format is used?
Can I set different compression settings for different elements of my pages?
How do I use custom settings from Photoshop's Save For Web dialog?
What SiteGrinder techniques ensure the fastest possible download speed for my pages?
What color model should I use for web graphics?
Image Compression with Galleries and Slideshows
How do I make sure SiteGrinder doesn't recompress my jpeg Gallery images?
Why is my Slideshow taking so long to load before it starts playing?
Troubleshooting Image Compression
Why aren't my Save for Web custom settings showing up in SiteGrinder's compression menu?
Image Compression Basics
What is the best compression format to use, JPEG, GIF, or PNG?
GIF and JPEG are the most popular web formats and supported by virtually all versions of all the major browsers.
GIF compression is best for graphics that you create on the computer in Photoshop or other software tools. For maximum compression GIF takes special advantage of areas of identical color, which computer-generated graphics tend to have a lot of.
JPEG compression is ideal for Photographs, which have few areas of identical color. JPEG's must be rectangular and completely opaque, whereas gif images can have holes. This is important to know because if you have a large layer with a hole in it sitting on top of other elements, and that layer is set to compress as a JPEG file, the lower elements may not be visible on the resulting page because SiteGrinder will have merged the transparent area with the layers behind it into one solid image.
The PNG format is the most recent and, in many ways, has the most features and options. The downside of PNG is that it is the least supported by browsers.
Our advice is to stick with GIF and JPEG except in special situations.
Click here for more info about formats.
How do I set which compression format is used?
The SiteGrinder Compression Panel allows you to set a default compression setting along with custom settings on a layer-by-layer basis. You may choose from any compression setting found in Photoshop's Save For Web dialog, even custom settings. (See below)
Generally you will use a gif setting for the default and jpeg settings as necessary for Photographic elements.
Can I set different compression settings for different elements of my pages?
Yes you can. Using The SiteGrinder Compression Panel you can set unique compression settings for every layer in your document if you so choose.
The only complication is that SiteGrinder auto-merges layers that aren't interactive, so you may need to use the -nomerge hint on layers that require custom compression settings.
How do I use custom settings from Photoshop's Save For Web dialog?
Custom settings you create, name, and save using Photoshop's Save For Web dialog will be available in SiteGrinder's Compression Panel. The only exception is under MacOS X, where you must be sure to save your settings with the ".irs" extension for SiteGrinder to find them.
What SiteGrinder techniques ensure the fastest possible download speed for my pages?
SiteGrinder gives you a number of powerful tools for minimizing download time:
- Any layer that contains nothing more than a rectangle of solid color will be output as an HTML rectangle and no graphic will need to be produced or downloaded. This includes both image layer rectangles and object layer rectangles. (The layer and all its pixels must be 100% opaque.)
- Turning off the anti-aliasing for type layers or adding the "-text" hint to type layers causes SiteGrinder to create real, live, styled CSS text instead of an image of text. "Real" text downloads much more quickly than images if text.
- If you use the same image on different pages SiteGrinder will create only one copy and link to it from all the pages it appears on. This means end users only have to download it once. The exception to this is if the image is on top of different backgrounds.
How do I stop SiteGrinder from merging layers when it builds so I can use different compressions settings on them?
Add the -nomerge hint to any layers you want to have SiteGrinder exempt from the auto-merging process.
What color space should I use for web graphics?
sRGB is the color space you should use for web graphics.
Additionally you may want to use a custom "Save for Web" setting that embeds an icc color profile in your jpegs. Keep in mind that browser support for this profile varies.
Image Compression with Galleries and Slideshows
How do I make sure SiteGrinder doesn't recompress my JPEG Gallery images?
When SiteGrinder generates each page of a gallery it has to compare the dimensions of the -picturebox layer in your Photoshop design to the dimensions of the JPEG image meant for that gallery page.
If the JPEG dimensions are smaller than the -picturebox layer then SiteGrinder will center the jpeg in the rectangle defined by the size and position of the -picturebox.
If the JPEG dimensions are the same size as the -picturebox layer then SiteGrinder will simply place the JPEG image in the exact position as the -picturebox.
In both of the above cases SiteGrinder simply copies the JPEG file into the build folder and no additional compression is require.
If the JPEG file is taller or wider (or both) than the -picturebox then SiteGrinder will have to crop or shrink the image and will therefore perform an additional JPEG compression.
The lesson is, if you don't want SiteGrinder to resize and recompress your JPEG images in a Gallery then make them smaller than or exactly the same size as your -picturebox layer.
If I want SiteGrinder to resize and recompress my Gallery images, how do I choose which compression settings it uses?
Picturebox layers from any gallery are listed in the layers menu in SiteGrinder's Compression Panel custom settings dialog. Simply choose the -picturebox for the Gallery you want to choose compression settings for and then pick the Save For Web preset you would like SiteGrinder to use for the images in that gallery.
SiteGrinder only has to compress gallery images if they are taller or wider (or both) than the associated -picturebox. (See above.)
Why is my Slideshow taking so long to load before it starts playing?
Unlike Galleries, SiteGrinder never resizes or recompresses JPEG files used in Slideshows. If you point a sideshow at a folder of jpeg files that have much larger dimensions than the slideshow then SiteGrinder will dutifully use them and your site's viewer's will have to wait for a long time as their browser needlessly downloads giant images and the slideshow scales them to fit on the fly.
With some slideshow types, such as pan and zoom, you may well want to use images that are larger than the slideshow layer, but not by very much.
If your Slideshow is taking wy too long to download you probably need to shrink your image sizes and/or use a lower quality compression setting.
Keep in mind that the SiteGrinder slideshow preloads more than one image before starting in order to ensure smooth playback once the show actually begins.
Troubleshooting Image Compression
Why aren't my Save for Web custom settings showing up in SiteGrinder's compression menu?
Under MacOS X you must be sure to save your compression custom presets with the ".irs" extension for SiteGrinder to find them. "Bill's great jpeg preset" won't appear, but "Bill's great jpeg preset.irs" will.
