Freeway tutorial

Graphic Image Formats

Graphics in web pages must be in the right web-safe format: JPEG, GIF or PNG. Any other formats can’t be read (except by Safari, which likes to show off) and shouldn’t be used in web pages. HOWEVER - remember that Freeway’s job is to sort things out for you, turning your layouts into whatever it takes to make it work in a web browser. One of the things it does is optimise your graphics for you, so you can import whatever graphics you like and leave the dull web-optimising work to Freeway. In fact, it is best NOT to turn your images into JPEGs first, because Freeway will normally regenerate them anyway - applying a fresh round of lossy compression.

What kind of images can I use in my Freeway layouts? Pretty much anything you are likely to use on your Mac. Some of the best to use are native Photoshop (.psd), TIFF, PDF, and native Illustrator files. If you use files that include transparency, this will be carried through in your layout. Freeway will automatically set these to be generated as JPEG or GIF when you publish your work.

Remember the traditional rule of thumb: JPEGs are great for photographic-style content, GIFs are great for simple graphics with flat colours and sharp edges - for example, logos or graphic text.

How can I control what format a graphic will be? Use Freeway’s Inspector palette window. With any graphic box selected, the third icon will be the Item Output Settings; this is where you can pick what type of graphic will be made and select compression details.

How can I tell how much compression to use? Freeway defaults to 75% JPEG quality or 256 colours for GIF, and this works reasonably well for most circumstances. If you want to improve the quality or reduce the file size then adjust the Quality (for JPEGs) or Colors (for GIFs) slider in the Inspector palette. To see what effect this will have, turn on Freeway’s Graphic Preview feature - select View > Graphics Preview - and your graphics will be rendered and shown in their final form on the fly. This is very useful for making JPEG compression setting and GIF colour count judgements right there in your layout, but it can slow things down slightly so it is generally best not to work with this enabled the whole time.

But what about PNG? The third web-safe graphic format is PNG (pronounced “ping”), and this can work as either a flat-colour alternative to GIF or as a full-colour alternative to JPEG. It generally doesn’t achieve quite as small file sizes, but it has one key advantage that you might find useful on occasion: when the colour is set to ‘Millions’ in Freeway it is created with an 8-bit alpha channel. This gives it the ability to have variable transparency, not just the ‘on/off’ cutout-style transparency of the GIF format. Use this to preserve the true see-through appearance of soft shadows and any translucent areas of imported graphics.