Optimizing Images

1
Optimizing Images

• Photoshop CS2

2
What affects speed on the Web?

• Connection Speed If connection speed is slow,
  your Web site will be slow.
• Routing problems If router problems exits, your
  Web site will be slow.
• Traffic Large internet service providers such as
  AOL, EarthLink, or GeoCities, may slow down
  during heavy volume usage hours. Likewise, Small
  service provides may not have the resources to
  handle heavy traffic periods.

3
File formats for the Web

• GIF Graphic Interchange Format, best for flat or
  simple graphic images with solid areas of color,
  such as logos, illustrations, cartoons, line art,
  etc.
• JPEG Joint Photographic Experts Group, best for
  continuous-tone images, such as photographs,
  glows, gradients, drop shadows, etc.

4
Transparency and Animation

• Transparency All digital image files are
  rectangular. Even if the image is not that shape,
  the file itself is defined by rectangular
  boundaries. If you design a circular button you
  can give it a transparent background leaving it
  so the image appears round. You can choose one of
  two file formats GIF or SWF

5
Transparency and Animation

• Animation Are a series of still images (called
  frames) that appear in motion. You can control
  how fast and how many times the animation plays.
  Photoshop lets you save animations as GIFS Image
  Ready lets you save them as GIFS or SWF files.

6
Compression

• Lossy file compression reduces file size by
  discarding visual information. (JPEG)
  Recompressing a JPG can erode the image quality
  because you throw away visual information each
  time you apply lossy compression. The result can
  be visible, unwanted compression artifacts, which
  cause the image to look distressed.
• Save the original file and make changes and
  compress the file as a fresh JPEG.
• Lossless file compression reduces file size
  without throwing away visual information. (GIF)

7
JPEG Compression

• The JPEG file format works best at compressing
  data with low contrast, subtle variation, and
  slight tonal shifts.
• It cant compress areas of solid color
  effectively, and it doesnt work well for flat
  graphic-style artwork.
• JPEG format compresses blurry images effectively.
  Adding a little blur to an image can decrease its
  file size.

8
JPEG Compression

• The more JPEG compression you add, the smaller
  the file size. Too much compression can cause
  unwanted compression artifacts.

9
JPEG Compression

• Use alpha channels to compress different areas of
  the image with two different levels of
  compression sometimes lowers the overall file
  size.

10
Compression - GIF

• There are many more settings when optimizing GIF
  images than when optimizing JPEG.
• Notice When a preview is set to GIF, the Color
  Table is visible.

11
GIF Reduce file size

• Minimizing the number of colors in a GIF is the
  most significant thing you can do to reduce GIF
  file size.
• The goal is to reduce the number of colors until
  you arrive at the fewest colors necessary to keep
  the image looking good.
• Color options 256, 128, 64, 32, 16, 8, 4, 2

12
What is Dither?

• When you limit the number of colors available in
  the Color Table, it might be impossible to
  reproduce some of the colors from the original
  image.
• Photoshop takes two colors in the color Table ad
  places small dots of each color next to one
  another to try to simulate the original color.

13
What is Dither?

• Three patterns of dither dots are diffusion,
  pattern, and noise, which offers the way the dots
  are arranged.
• Try to avoid dither because it increases file
  size.
• If your image has a gradient, glow, or shadow,
  adding dithering will sometimes improve the
  appearance.

14
Color Reduction Palettes

• Perceptive, Selective, and Adaptive are derived
  from the colors in the image, each by means of a
  slightly different algorithm.
• Experiment with each one and select the one that
  gives the smallest file size and produces the
  best results.
• Restrictive (Web) is independent of the colors in
  an image. It converts an image with non-Web-safe
  colors to Web-safe colors. Only use if you need a
  quick way to convert an image to Web-safe colors.

15
Its your job to find a balance between making
the compressed image file small and making it
look good.