Graphics Reference
In-Depth Information
There are generally two major areas in which you can optimize
your files: graphics and code. Within those two areas, there are
smaller areas of discussion that I
'
ve split into the following sections:
Image Types
Image Compression
Vectors and Fonts
Optimizing Code
Image Types
Different images call for different formats. If you have a picture of a
person, you
'
ll generally want to use a .jpg (.png is definitely an option,
but the .jpg
s file size is most likely going to be smaller). If you have a
line drawing or any other image that isn
'
'
t photographic, you
'
ll prob-
ably want to use a .gif and for the most part, you
ll probably want to
save the .png format for images that contain transparency.
'
.jpg
As mentioned earlier, .jpg files are best used for photographs or images
with smooth variations of tone and color. They use what is called a
“
data compression method, which basically means that the data
is compressed in such a way that it is actually different from the origi-
nal data but still close enough to be used. As the compression levels
increase,theresultingfilesizereduces.However,withthathighercom-
pression and lower file size, you start to see image artifacts that give
less quality to the pictures. Figures 5.1
lossy
”
5.4 illustrate the same image
with four different quality settings: 100%, 80%, 60%, and 0% (higher
quality setting
-
=
lower compression). For each of these examples, I
'
ve
zoomed in on the same area to better show the image artifacts.
The image in Fig. 5.1 has a quality setting of 100% and is hard to
distinguish from the original photograph even though the original
can take up to six times more file size. If you are using Photoshop
'
s
“
Save for Web
&
Devices
…”
function, you
'
ll notice that 100% is also
called
quality under the .jpg settings.
With a quality setting of 80%, Fig. 5.2 is less than half the file size
of the uncompressed original image in this case. At 80%, the image
still looks great, but we can still go lower for the Web. Photoshop
“
Maximum
”
'
s
“
Save for Web
&
Devices
…”
function labels 80% as
“
Very High
”
quality.
Figure 5.3 shows the quality that you
ll most likely want to use for
your Flash projects (or almost any project on the Web). This is
because at 60% quality, the image artifacts that start to appear
because of compression are extremely small and mostly unnoticeable
at the 72 dots per inch (dpi) that computer monitors display. The
final file size of a .jpg saved at 60% quality can be up to 20 times
'
