File Size
The digital size of an image is measured in kilobytes (K), megabytes
(MB), or gigabytes (GB). File size is proportional to the pixel
dimensions of the image. Images with more pixels may produce
more detail at a given printed size, but they require more disk
space to store and may be slower to edit and print. Image resolution
becomes a compromise between image quality and file size.
Another factor that affects file size is file format, due to
varying compression methods used by GIF or JPEG file formats,
file sizes can vary considerably for the same pixel dimensions.
Also, color bit-depth and the number of layers in an image affect
file size.
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.
You can optimize images in the three major graphic file formats
used on the Web: GIF, JPEG, and PNG-8 or PNG-24. In this lesson
we are going to concentrate in two of them: GIF and JPG.
For precise optimization, you can use the optimization features
in Photoshop to preview optimized images in different file formats
and with different file attributes. You can view multiple versions
of an image simultaneously and modify optimization settings
as you preview the image to select the best combination of settings
for your needs. |
JPEG
vs GIF
JPEG
When to use:
Photographs or any image that contains a large spectrum of
color values, gradients for example.
JPEG compresses file size by selectively discarding data.
A higher quality setting results in less data being discarded,
but the JPEG compression method can degrade sharp detail in
an image, particularly in images containing type or vector
art.
Because important data gets lost while compressing,
it is not recommended that you save an image in JPEG if it
has already been saved as JPEG.
The JPEG format does not support transparency. If you know
the background color of the Web page where you will place
the image, you can match the Matte color to the Web page background
color to simulate the effect of background transparency.
GIF
When to use:
Simple flat graphics like logos, title graphics, buttons or
drawing. All kind of navigation assets.
The GIF format uses 8-bit color and efficiently compresses
solid areas of color while preserving sharp detail, such as
that in line art, logos, or illustrations with type. You also
use the GIF format to create animated images. GIF is supported
by most browsers.
You can reduce the number of colors in a GIF image and choose
options to control the way colors dither in the application
or in a browser. GIF supports background transparency and
background matting, in which you blend the edges of the image
with a Web page background color.
Saving Images for Web
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...
Once you get to the window, there are a few options
that enable you to switch easily between optimized and original
(non-optimized) versions of an image and view up to four versions
of an optimized image simultaneously. To select a display
option for viewing images:
|
Under each image view there is an annotation area that shows
the optimization settings. It shows the file size of the original
image (PSD) and the optimized size of the JPG.
It also indicates how long it will take to download while
viewing it on the web. The example above shows that the compressed
JPG file will be about 2.767K and it will take 2 seconds to
load in a 28.8Kbps connection.
|
Click a tab at the top of the image:
Original
to view the image with no optimization.
Optimized
to view the image with the current optimization settings applied.
2-Up to view two versions of the image side
by side.
4-Up to view four versions of the image side
by side. |
| To optimize an image
in JPEG 1. In the Optimize panel
choose JPEG from the File Format menu.
2. Do one of the following to specify the image Quality:
-Choose an option from the Quality menu.
-Drag the Quality pop-up slider.
-Enter a value in the Quality text box.
The higher the Quality setting, the more detail the compression
preserves. However, using a high Quality setting results in
a larger file size. View the optimized image at several quality
settings to determine the best balance of quality and file
size.
3. To create an enhanced JPEG with a slightly smaller file
size, select Optimized. The Optimized JPEG
format is recommended for maximum file compression.
4. Leave the other option as they are for now (No Interlace,
no ICC Profile, 0 Blur)
|
Final JPEG
|
| To optimize an image
in GIF The following setting is my suggestion for
saving good quality and small size GIF images. There are many
ways of doing this and many parameters that will affect the
image in several ways. I will keep it simple. If you want
to find out more about these GIF optimizing parameters, in
Photoshop go to: Help > Contents> (it
will open a browser window) and select Optimizing
images for the Web.
Simple way:
1. In the Optimize panel choose GIF from
the File Format menu.
2. Under the format drop-down, select Adaptive
as a color reduction algorithm.
3. To specify the maximum number of colors in the color palette,
select a number from the Colors pop-up menu
or enter a value in the text box
4. Select No Dither
5 . Check Transparency only if the image
contains transparency. In this lesson we will not cover creating
a transparent background image, therefore leave the box unchecked.
(If you want to learn how to create a transparent Gif image,
in Photoshop, go to: Help > Contents>
(it will open a browser window) and select Optimizing
images for the Web >Making transparent and matted images
6. Do not check Interlaced, and
leave Web Snap at 0%. |
Note how the selection of colors displays the color table underneath.
This color table show you which colors are going to be included
in your GIF format. You can select any number of colors based
on your image. This will decrease the file size of your image.
Sample GIF
|
|
| |
|
Editing in Photoshop